diff --git a/src/App.vue b/src/App.vue
index a9dce3da..f14d247a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,8 +18,6 @@ import { useDesignStore } from '@/store/modules/designStore/designStore'
 
 import { getDarkThemeHook, getThemeOverridesHook } from '@/hooks'
 
-const designStore = useDesignStore()
-
 // 返回暗黑主题
 const getDarkTheme = getDarkThemeHook()
 
diff --git a/src/components/Doc/index.vue b/src/components/Doc/index.vue
index b6985adb..1394524f 100644
--- a/src/components/Doc/index.vue
+++ b/src/components/Doc/index.vue
@@ -8,7 +8,8 @@
 
 <script lang="ts" setup>
 import { openDoc } from '@/utils'
-import { DocumentText as DocumentTextIcon } from '@vicons/ionicons5'
+import { icon } from '@/plugins'
+const { DocumentTextIcon } = icon.ionicons5
 
 const handleClick = () => {
   openDoc()
diff --git a/src/components/LangSelect/index.vue b/src/components/LangSelect/index.vue
index c7efc647..66db2c00 100644
--- a/src/components/LangSelect/index.vue
+++ b/src/components/LangSelect/index.vue
@@ -15,10 +15,11 @@
 
 <script lang="ts" setup>
 import { useLangStore } from '@/store/modules/langStore/langStore'
-import { Language as LanguageIcon } from '@vicons/ionicons5'
 import { langList } from '@/settings/designSetting'
 import { LangEnum } from '@/enums/styleEnum'
+import { icon } from '@/plugins'
 
+const { LanguageIcon } = icon.ionicons5
 const langStore = useLangStore()
 const options = langList
 
diff --git a/src/components/ThemeSelect/index.vue b/src/components/ThemeSelect/index.vue
index 925cce14..3d9bbc23 100644
--- a/src/components/ThemeSelect/index.vue
+++ b/src/components/ThemeSelect/index.vue
@@ -10,8 +10,8 @@
 <script lang="ts" setup>
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { setHtmlTheme } from '@/utils'
-import { Moon as MoonIcon, Sunny as SunnyIcon } from '@vicons/ionicons5'
-
+import { icon } from '@/plugins'
+const { MoonIcon, SunnyIcon } = icon.ionicons5
 const designStore = useDesignStore()
 
 // 改变样式
diff --git a/src/components/UserInfo/index.vue b/src/components/UserInfo/index.vue
index dda42f89..b85ff7cb 100644
--- a/src/components/UserInfo/index.vue
+++ b/src/components/UserInfo/index.vue
@@ -24,12 +24,9 @@ import { h, ref } from 'vue'
 import { NAvatar, NText } from 'naive-ui'
 import { renderIcon } from '@/utils'
 import { openDoc, logout } from '@/utils'
-import {
-  Person as PersonIcon,
-  LogOutOutline as LogOutOutlineIcon,
-  DocumentText as DocumentTextIcon,
-  ChatboxEllipses as ChatboxEllipsesIcon
-} from '@vicons/ionicons5'
+
+import { icon } from '@/plugins'
+const { DocumentTextIcon, ChatboxEllipsesIcon, PersonIcon, LogOutOutlineIcon } = icon.ionicons5
 
 const imageUrl = 'https://www.naiveui.com/assets/naivelogo.93278402.svg'
 
diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts
index 8d6c5456..7ee11153 100644
--- a/src/plugins/icon.ts
+++ b/src/plugins/icon.ts
@@ -11,11 +11,50 @@ import {
   DownloadOutline as DownloadIcon,
   Open as OpenIcon,
   Send as SendIcon,
-  InformationCircleOutline as InformationCircleIcon
+  InformationCircleOutline as InformationCircleIcon,
+  Beer as BeerIcon,
+  Grid as GridIcon,
+  TvOutline as DesktopIcon,
+  LaptopOutline as LaptopOutlineIcon,
+  DocumentText as DocumentTextIcon,
+  Language as LanguageIcon,
+  Moon as MoonIcon,
+  Sunny as SunnyIcon,
+  Person as PersonIcon,
+  PersonOutline as PersonOutlineIcon,
+  LogOutOutline as LogOutOutlineIcon,
+  ChatboxEllipses as ChatboxEllipsesIcon,
+  LockClosedOutline as LockClosedOutlineIcon,
+  HelpCircleOutline as HelpOutlineIcon,
+  CodeSlash as CodeSlashIcon,
+  Duplicate as DuplicateIcon,
+  DuplicateOutline as DuplicateOutlineIcon
 } from '@vicons/ionicons5'
 
 // ionicons5 在这里
 const ionicons5 = {
+  // 帮助
+  HelpOutlineIcon,
+  // 添加
+  DuplicateIcon,
+  // 添加 Outline
+  DuplicateOutlineIcon,
+  // 代码
+  CodeSlashIcon,
+  // 退出
+  LogOutOutlineIcon,
+  // 锁
+  LockClosedOutlineIcon, 
+  // 人
+  PersonIcon,
+  // 人2
+  PersonOutlineIcon,
+  // 更多（省略号）
+  ChatboxEllipsesIcon,
+  // 月亮
+  MoonIcon,
+  // 太阳
+  SunnyIcon,
   // 关闭
   CloseIcon,
   // 移除（最小化）
@@ -41,7 +80,19 @@ const ionicons5 = {
   // 导出
   SendIcon,
   // 信息
-  InformationCircleIcon
+  InformationCircleIcon,
+  // 物料（颜色混合）
+  BeerIcon,
+  // 项目
+  GridIcon,
+  // 电脑1
+  DesktopIcon,
+  // 电脑2
+  LaptopOutlineIcon,
+  // 文档
+  DocumentTextIcon,
+  // 语言
+  LanguageIcon
 }
 
 // https://www.xicons.org/#/ 还有很多
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index b39bd289..4a74b54f 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -125,10 +125,9 @@ import { LangSelect } from '@/components/LangSelect'
 import { Header } from '@/layout/components/Header'
 import { Footer } from '@/layout/components/Footer'
 import { PageEnum } from '@/enums/pageEnum'
-import {
-  PersonOutline as PersonOutlineIcon,
-  LockClosedOutline as LockClosedOutlineIcon
-} from '@vicons/ionicons5'
+import { icon } from '@/plugins'
+
+const { ChatboxEllipsesIcon, LockClosedOutlineIcon } = icon.ionicons5
 
 interface FormState {
   username: string
diff --git a/src/views/project/items/components/List/index.vue b/src/views/project/items/components/List/index.vue
index c7f78796..c045eedd 100644
--- a/src/views/project/items/components/List/index.vue
+++ b/src/views/project/items/components/List/index.vue
@@ -18,10 +18,9 @@
 import { reactive, ref } from 'vue'
 import { Card } from '../Card/index'
 import { ModalCard } from '../ModalCard/index'
-import {
-  EllipsisHorizontalSharp as EllipsisHorizontalCircleSharpIcon,
-  CopyOutline as CopyIcon
-} from '@vicons/ionicons5'
+ 
+import { icon } from '@/plugins'
+const { CopyIcon, EllipsisHorizontalCircleSharpIcon } = icon.ionicons5
 
 const list = reactive([
   {
diff --git a/src/views/project/layout/components/AsideFooter/index.vue b/src/views/project/layout/components/AsideFooter/index.vue
index 3c425e66..8da70d2d 100644
--- a/src/views/project/layout/components/AsideFooter/index.vue
+++ b/src/views/project/layout/components/AsideFooter/index.vue
@@ -56,10 +56,8 @@
 <script setup lang="ts">
 import { openDoc, openGiteeSourceCode } from '@/utils'
 
-import {
-  HelpCircleOutline as HelpOutlineIcon,
-  CodeSlash as CodeSlashIcon
-} from '@vicons/ionicons5'
+import { icon } from '@/plugins'
+const { HelpOutlineIcon, CodeSlashIcon} = icon.ionicons5
 
 const props = defineProps({
   collapsed: Boolean
diff --git a/src/views/project/layout/components/Create/index.vue b/src/views/project/layout/components/Create/index.vue
index da175265..25f74cdc 100644
--- a/src/views/project/layout/components/Create/index.vue
+++ b/src/views/project/layout/components/Create/index.vue
@@ -4,28 +4,36 @@
       <n-button ghost type="primary" size="small">
         <template #icon>
           <n-icon>
-            <DuplicateIcon />
+            <DuplicateOutlineIcon v-show="designStore.getDarkTheme" />
+            <DuplicateIcon v-show="!designStore.getDarkTheme" />
           </n-icon>
         </template>
       </n-button>
     </template>
-    <n-text>
+    <span>
       新建
-    </n-text>
+    </span>
   </n-tooltip>
   <n-button v-else ghost type="primary" size="large">
     <template #icon>
       <n-icon>
-        <DuplicateIcon />
+        <DuplicateOutlineIcon v-show="designStore.getDarkTheme" />
+        <DuplicateIcon v-show="!designStore.getDarkTheme" />
       </n-icon>
     </template>
-    <n-text>
+    <span>
       新建
-    </n-text>
+    </span>
   </n-button>
 </template>
 <script setup lang="ts">
-import { Duplicate as DuplicateIcon } from '@vicons/ionicons5'
+import { icon } from '@/plugins'
+import { computed } from 'node_modules/vue/dist/vue'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
+
+const { DuplicateIcon, DuplicateOutlineIcon } = icon.ionicons5
+const designStore = useDesignStore()
+
 const props = defineProps({
   collapsed: Boolean
 })
diff --git a/src/views/project/layout/components/Sider/menu.ts b/src/views/project/layout/components/Sider/menu.ts
index 360a9b8b..056cbb77 100644
--- a/src/views/project/layout/components/Sider/menu.ts
+++ b/src/views/project/layout/components/Sider/menu.ts
@@ -3,13 +3,9 @@ import { renderIcon } from '@/utils'
 import { RouterLink } from 'vue-router'
 import { PageEnum } from '@/enums/pageEnum'
 import { MenuOption, MenuGroupOption } from 'naive-ui'
-import {
-  Grid as GridIcon,
-  LogoAppleAppstore as LogoAppleAppstoreIcon,
-  TvOutline as DesktopIcon,
-  LaptopOutline as LaptopOutlineIcon,
-} from '@vicons/ionicons5'
+import { icon } from '@/plugins'
 
+const { GridIcon, BeerIcon, DesktopIcon, LaptopOutlineIcon } = icon.ionicons5
 export const renderMenuLabel = (option: MenuOption | MenuGroupOption) => {
   return option.label
 }
@@ -81,7 +77,7 @@ export const menuOptionsInit = () => {
           { default: () => '物料市场' }
         ),
       key: PageEnum.BASE_HOME_TEMPLATE_MARKET_NAME,
-      icon: renderIcon(LogoAppleAppstoreIcon)
+      icon: renderIcon(BeerIcon)
     }
   ])
 }