diff --git a/src/layout/components/SidebarItem/index.vue b/src/layout/components/SidebarItem/index.vue
index 2484bcde..d17d3275 100644
--- a/src/layout/components/SidebarItem/index.vue
+++ b/src/layout/components/SidebarItem/index.vue
@@ -2,7 +2,7 @@
     <div v-if="item.meta.sidebar !== false" class="sidebar-item">
         <el-sub-menu v-if="item.path == undefined" :title="item.meta.title" :index="JSON.stringify(item)">
             <template #title>
-                <svg-icon v-if="item.meta.icon" :name="item.meta.icon" class="icon" />
+                <svg-icon v-if="item.meta.icon" :name="item.meta.icon" />
                 <span class="title">{{ item.meta.title }}</span>
             </template>
             <SidebarItem v-for="route in item.children" :key="route.path" :item="route" />
@@ -10,14 +10,14 @@
         <router-link v-else-if="!hasChildren" v-slot="{ href, navigate, isActive, isExactActive }" custom :to="resolveRoutePath(basePath, item.path)">
             <a :href="isExternalLink(resolveRoutePath(basePath, item.path)) ? resolveRoutePath(basePath, item.path) : href" :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']" :target="isExternalLink(resolveRoutePath(basePath, item.path)) ? '_blank' : '_self'" @click="navigate">
                 <el-menu-item :title="item.meta.title" :index="resolveRoutePath(basePath, item.path)">
-                    <svg-icon v-if="item.meta.icon" :name="item.meta.icon" class="icon" />
+                    <svg-icon v-if="item.meta.icon" :name="item.meta.icon" />
                     <span class="title">{{ item.meta.title }}</span>
                 </el-menu-item>
             </a>
         </router-link>
         <el-sub-menu v-else :title="item.meta.title" :index="resolveRoutePath(basePath, item.path)">
             <template #title>
-                <svg-icon v-if="item.meta.icon" :name="item.meta.icon" class="icon" />
+                <svg-icon v-if="item.meta.icon" :name="item.meta.icon" />
                 <span class="title">{{ item.meta.title }}</span>
             </template>
             <SidebarItem v-for="route in item.children" :key="route.path" :item="route" :base-path="resolveRoutePath(basePath, item.path)" />
@@ -69,10 +69,9 @@ const hasChildren = computed(() => {
 }
 :deep(.el-sub-menu),
 :deep(.el-menu-item) {
-    .icon {
+    .svg-icon {
         width: 20px;
         font-size: 20px;
-        margin-right: 10px;
         vertical-align: -0.25em;
         transition: transform 0.3s;
         color: unset;
@@ -81,13 +80,16 @@ const hasChildren = computed(() => {
             vertical-align: middle;
         }
     }
-    &:hover > .icon,
-    .el-sub-menu__title:hover > .icon {
+    .svg-icon + .title {
+        margin-left: 10px;
+    }
+    &:hover > .svg-icon,
+    .el-sub-menu__title:hover > .svg-icon {
         transform: scale(1.2);
     }
 }
 :deep(.el-sub-menu) {
-    > .el-sub-menu__title > .icon.active {
+    > .el-sub-menu__title > .svg-icon.active {
         display: none;
     }
 }