diff --git a/src/components/common/DarkModeSwitch.vue b/src/components/common/DarkModeSwitch.vue
index 276555c..acd3ff6 100644
--- a/src/components/common/DarkModeSwitch.vue
+++ b/src/components/common/DarkModeSwitch.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { NFlex } from 'naive-ui'
 import { useAppStore } from '@/store'
-import { renderIcon } from '@/utils'
+import IconSun from '~icons/icon-park-outline/sun-one'
+import IconMoon from '~icons/icon-park-outline/moon'
+import IconAuto from '~icons/icon-park-outline/laptop-computer'
 
 const { t } = useI18n()
 
@@ -12,17 +14,17 @@ const options = computed(() => {
     {
       label: t('app.lignt'),
       value: 'light',
-      icon: 'icon-park-outline:sun-one',
+      icon: IconSun,
     },
     {
       label: t('app.dark'),
       value: 'dark',
-      icon: 'icon-park-outline:moon',
+      icon: IconMoon,
     },
     {
       label: t('app.system'),
       value: 'auto',
-      icon: 'icon-park-outline:laptop-computer',
+      icon: IconAuto,
     },
   ]
 })
@@ -30,7 +32,7 @@ const options = computed(() => {
 function renderLabel(option: any) {
   return h(NFlex, { align: 'center' }, {
     default: () => [
-      renderIcon(option.icon)(),
+      h(option.icon),
       option.label,
     ],
   })
diff --git a/src/layouts/components/header/UserCenter.vue b/src/layouts/components/header/UserCenter.vue
index 03c2a6d..4f97c60 100644
--- a/src/layouts/components/header/UserCenter.vue
+++ b/src/layouts/components/header/UserCenter.vue
@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { renderIcon } from '@/utils/icon'
 import { useAuthStore } from '@/store'
+import IconGithub from '~icons/icon-park-outline/github'
+import IconUser from '~icons/icon-park-outline/user'
+import IconLogout from '~icons/icon-park-outline/logout'
+import IconBookOpen from '~icons/icon-park-outline/book-open'
 
 const { t } = useI18n()
 
@@ -12,7 +16,7 @@ const options = computed(() => {
     {
       label: t('app.userCenter'),
       key: 'userCenter',
-      icon: renderIcon('carbon:user-avatar-filled-alt'),
+      icon: () => h(IconUser),
     },
     {
       type: 'divider',
@@ -21,13 +25,18 @@ const options = computed(() => {
     {
       label: 'Github',
       key: 'guthub',
-      icon: renderIcon('icon-park-outline:github'),
+      icon: () => h(IconGithub),
     },
     {
       label: 'Gitee',
       key: 'gitee',
       icon: renderIcon('simple-icons:gitee'),
     },
+    {
+      label: 'Docs',
+      key: 'docs',
+      icon: () => h(IconBookOpen),
+    },
     {
       type: 'divider',
       key: 'd1',
@@ -35,7 +44,7 @@ const options = computed(() => {
     {
       label: t('app.loginOut'),
       key: 'loginOut',
-      icon: renderIcon('icon-park-outline:logout'),
+      icon: () => h(IconLogout),
     },
   ]
 })
@@ -59,6 +68,9 @@ function handleSelect(key: string | number) {
 
   if (key === 'gitee')
     window.open('https://gitee.com/chansee97/nova-admin')
+
+  if (key === 'docs')
+    window.open('https://nova-admin-docs.netlify.app/')
 }
 </script>
 
diff --git a/src/layouts/components/tab/TabBar.vue b/src/layouts/components/tab/TabBar.vue
index 76e537f..4753fe7 100644
--- a/src/layouts/components/tab/TabBar.vue
+++ b/src/layouts/components/tab/TabBar.vue
@@ -2,8 +2,13 @@
 import type { RouteLocationNormalized } from 'vue-router'
 import Reload from './Reload.vue'
 import DropTabs from './DropTabs.vue'
-import { renderIcon } from '@/utils'
 import { useAppStore, useTabStore } from '@/store'
+import IconRedo from '~icons/icon-park-outline/redo'
+import IconClose from '~icons/icon-park-outline/close'
+import IconDelete from '~icons/icon-park-outline/delete-four'
+import IconLeft from '~icons/icon-park-outline/to-left'
+import IconRight from '~icons/icon-park-outline/to-right'
+import IconFullwith from '~icons/icon-park-outline/fullwidth'
 
 const tabStore = useTabStore()
 const appStore = useAppStore()
@@ -21,32 +26,32 @@ const options = computed(() => {
     {
       label: t('common.reload'),
       key: 'reload',
-      icon: renderIcon('icon-park-outline:redo'),
+      icon: () => h(IconRedo),
     },
     {
       label: t('common.close'),
       key: 'closeCurrent',
-      icon: renderIcon('icon-park-outline:close'),
+      icon: () => h(IconClose),
     },
     {
       label: t('app.closeOther'),
       key: 'closeOther',
-      icon: renderIcon('icon-park-outline:delete-four'),
+      icon: () => h(IconDelete),
     },
     {
       label: t('app.closeLeft'),
       key: 'closeLeft',
-      icon: renderIcon('icon-park-outline:to-left'),
+      icon: () => h(IconLeft),
     },
     {
       label: t('app.closeRight'),
       key: 'closeRight',
-      icon: renderIcon('icon-park-outline:to-right'),
+      icon: () => h(IconRight),
     },
     {
       label: t('app.closeAll'),
       key: 'closeAll',
-      icon: renderIcon('icon-park-outline:fullwidth'),
+      icon: () => h(IconFullwith),
     },
   ]
 })
diff --git a/src/typings/global.d.ts b/src/typings/global.d.ts
index 1315306..96982e2 100644
--- a/src/typings/global.d.ts
+++ b/src/typings/global.d.ts
@@ -19,13 +19,6 @@ declare namespace NaiveUI {
   type ThemeColor = 'default' | 'error' | 'primary' | 'info' | 'success' | 'warning'
 }
 
-declare module '~icons/*' {
-  import type { FunctionalComponent, SVGAttributes } from 'vue'
-
-  const component: FunctionalComponent<SVGAttributes>
-  export default component
-}
-
 declare namespace Storage {
   interface Session {
     demoKey: string
diff --git a/tsconfig.json b/tsconfig.json
index 3e280eb..9725c26 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,7 +10,7 @@
       "@/*": ["src/*"]
     },
     "resolveJsonModule": true,
-    "types": ["node", "vite/client", "naive-ui/volar"],
+    "types": ["node", "vite/client", "naive-ui/volar", "unplugin-icons/types/vue"],
     "allowJs": true,
     "strict": true,
     "strictNullChecks": true,