diff --git a/AGENTS.md b/AGENTS.md
index f03f8b7c8..7fc7c7821 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -25,6 +25,13 @@
 - ESLint is the source of truth; run `pnpm lint:fix` before commit.
 - Commit hooks are managed by Husky (`pnpm bootstrap`).
 
+## Icons (unplugin-icons)
+- Use `Icon*` components (e.g., `<IconRiDownload2Line />`) in templates; they are auto-imported.
+- In script/render functions, `Icon*` components are also auto-imported via `unplugin-auto-import`; avoid manual `~icons/...` imports.
+- If an icon name fails, switch to a valid icon in the same collection (e.g., `ri`), then rerun the app.
+- Loader note: `@iconify/utils` uses `searchForIcon()` with `getPossibleIconNames()`, so numeric names like `settings4-line` can resolve to `settings-4-line` at load time.
+- Rule: always use the `Icon*` component form (e.g., `<IconRiSettings4Line />`) for icons going forward.
+
 ## i18n Keys & Usage
 - Locale files live in `src/locales/` (`en-US.json`, `zh-CN.json`, `zh-TW.json`, `ko-KR.json`).
 - `en-US.json` is the canonical schema; add new keys there first, then mirror them in other locales.
diff --git a/auto-imports.d.ts b/auto-imports.d.ts
index 1b034cab7..800980ebb 100644
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -7,6 +7,17 @@
 export {}
 declare global {
   const EffectScope: typeof import('vue').EffectScope
+  const IconIcOutlineCode: typeof import('~icons/ic/outline-code').default
+  const IconIcOutlineCodeOff: typeof import('~icons/ic/outline-code-off').default
+  const IconMdiFormatVerticalAlignBottom: typeof import('~icons/mdi/format-vertical-align-bottom').default
+  const IconMdiFormatVerticalAlignTop: typeof import('~icons/mdi/format-vertical-align-top').default
+  const IconMdiReorderHorizontal: typeof import('~icons/mdi/reorder-horizontal').default
+  const IconRiContrastLine: typeof import('~icons/ri/contrast-line').default
+  const IconRiDeleteBinLine: typeof import('~icons/ri/delete-bin-line').default
+  const IconRiExternalLinkLine: typeof import('~icons/ri/external-link-line').default
+  const IconRiFileCopy2Line: typeof import('~icons/ri/file-copy2-line').default
+  const IconRiMoonFoggyLine: typeof import('~icons/ri/moon-foggy-line').default
+  const IconRiSunFoggyLine: typeof import('~icons/ri/sun-foggy-line').default
   const acceptHMRUpdate: typeof import('pinia').acceptHMRUpdate
   const computed: typeof import('vue').computed
   const createApp: typeof import('vue').createApp
diff --git a/components.d.ts b/components.d.ts
index e24602dbf..6c64221b4 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -11,6 +11,51 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    IconIcOutlineChat: typeof import('~icons/ic/outline-chat')['default']
+    IconMageBoxUpload: typeof import('~icons/mage/box-upload')['default']
+    IconMdiFormatVerticalAlignBottom: typeof import('~icons/mdi/format-vertical-align-bottom')['default']
+    IconMdiFormatVerticalAlignTop: typeof import('~icons/mdi/format-vertical-align-top')['default']
+    IconMdiGift: typeof import('~icons/mdi/gift')['default']
+    IconMdiLightbulbOutline: typeof import('~icons/mdi/lightbulb-outline')['default']
+    IconMdiReorderHorizontal: typeof import('~icons/mdi/reorder-horizontal')['default']
+    IconMdiWeb: typeof import('~icons/mdi/web')['default']
+    IconRiAddFill: typeof import('~icons/ri/add-fill')['default']
+    IconRiAlignJustify: typeof import('~icons/ri/align-justify')['default']
+    IconRiAlignRight: typeof import('~icons/ri/align-right')['default']
+    IconRiArrowDownSLine: typeof import('~icons/ri/arrow-down-s-line')['default']
+    IconRiBarChartBoxLine: typeof import('~icons/ri/bar-chart-box-line')['default']
+    IconRiBubbleChartFill: typeof import('~icons/ri/bubble-chart-fill')['default']
+    IconRiChatDownloadLine: typeof import('~icons/ri/chat-download-line')['default']
+    IconRiChatHistoryLine: typeof import('~icons/ri/chat-history-line')['default']
+    IconRiChatQuoteLine: typeof import('~icons/ri/chat-quote-line')['default']
+    IconRiChatUploadLine: typeof import('~icons/ri/chat-upload-line')['default']
+    IconRiCloseCircleLine: typeof import('~icons/ri/close-circle-line')['default']
+    IconRiDeleteBack2Fill: typeof import('~icons/ri/delete-back2-fill')['default']
+    IconRiDeleteBinLine: typeof import('~icons/ri/delete-bin-line')['default']
+    IconRiDownload2Fill: typeof import('~icons/ri/download2-fill')['default']
+    IconRiDownload2Line: typeof import('~icons/ri/download2-line')['default']
+    IconRiDownloadLine: typeof import('~icons/ri/download-line')['default']
+    IconRiEditLine: typeof import('~icons/ri/edit-line')['default']
+    IconRiEqualizerLine: typeof import('~icons/ri/equalizer-line')['default']
+    IconRiFileUserLine: typeof import('~icons/ri/file-user-line')['default']
+    IconRiImageEditLine: typeof import('~icons/ri/image-edit-line')['default']
+    IconRiInboxLine: typeof import('~icons/ri/inbox-line')['default']
+    IconRiKey2Line: typeof import('~icons/ri/key2-line')['default']
+    IconRiLink: typeof import('~icons/ri/link')['default']
+    IconRiListSettingsLine: typeof import('~icons/ri/list-settings-line')['default']
+    IconRiMailLine: typeof import('~icons/ri/mail-line')['default']
+    IconRiMessage3Line: typeof import('~icons/ri/message3-line')['default']
+    IconRiMore2Fill: typeof import('~icons/ri/more2-fill')['default']
+    IconRiQuestionAnswerLine: typeof import('~icons/ri/question-answer-line')['default']
+    IconRiRestartLine: typeof import('~icons/ri/restart-line')['default']
+    IconRiSaveLine: typeof import('~icons/ri/save-line')['default']
+    IconRiSendPlaneFill: typeof import('~icons/ri/send-plane-fill')['default']
+    IconRiSettings4Line: typeof import('~icons/ri/settings4-line')['default']
+    IconRiSettingsLine: typeof import('~icons/ri/settings-line')['default']
+    IconRiStopCircleLine: typeof import('~icons/ri/stop-circle-line')['default']
+    IconRiUpload2Fill: typeof import('~icons/ri/upload2-fill')['default']
+    IconRiUser5Line: typeof import('~icons/ri/user5-line')['default']
+    IconUilExit: typeof import('~icons/uil/exit')['default']
     NAutoComplete: typeof import('naive-ui')['NAutoComplete']
     NAvatar: typeof import('naive-ui')['NAvatar']
     NButton: typeof import('naive-ui')['NButton']
diff --git a/package.json b/package.json
index 2768b37b7..fa7544b7f 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
     "@antfu/eslint-config": "^6.3.0",
     "@commitlint/cli": "^20.1.0",
     "@commitlint/config-conventional": "^20.0.0",
-    "@iconify/vue": "^5.0.0",
+    "@iconify/json": "^2.2.397",
     "@tailwindcss/vite": "^4.1.17",
     "@types/katex": "^0.16.7",
     "@types/markdown-it": "^14.1.2",
@@ -56,6 +56,7 @@
     "tailwindcss": "^4.1.17",
     "typescript": "~5.9.3",
     "unplugin-auto-import": "^20.3.0",
+    "unplugin-icons": "^22.5.0",
     "unplugin-vue-components": "^30.0.0",
     "vite": "^7.2.6",
     "vue": "^3.5.25",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7e4ee6c75..d3e8cef5c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,9 +17,9 @@ importers:
       '@commitlint/config-conventional':
         specifier: ^20.0.0
         version: 20.0.0
-      '@iconify/vue':
-        specifier: ^5.0.0
-        version: 5.0.0(vue@3.5.25(typescript@5.9.3))
+      '@iconify/json':
+        specifier: ^2.2.397
+        version: 2.2.427
       '@tailwindcss/vite':
         specifier: ^4.1.17
         version: 4.1.17(vite@7.2.6(@types/node@24.10.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(yaml@2.8.2))
@@ -104,6 +104,9 @@ importers:
       unplugin-auto-import:
         specifier: ^20.3.0
         version: 20.3.0(@vueuse/core@14.1.0(vue@3.5.25(typescript@5.9.3)))
+      unplugin-icons:
+        specifier: ^22.5.0
+        version: 22.5.0(@vue/compiler-sfc@3.5.25)
       unplugin-vue-components:
         specifier: ^30.0.0
         version: 30.0.0(@babel/parser@7.28.5)(vue@3.5.25(typescript@5.9.3))
@@ -567,13 +570,14 @@ packages:
     resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
     engines: {node: '>=18.18'}
 
+  '@iconify/json@2.2.427':
+    resolution: {integrity: sha512-QyFXZmAzOvYbDInKKpDgPJJNWB6oXKuAFxzRTXeIEzRP1q/E9GJidvyg5f/Tt3KE8gEP+RVD2793tUn1foFbcw==}
+
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
-  '@iconify/vue@5.0.0':
-    resolution: {integrity: sha512-C+KuEWIF5nSBrobFJhT//JS87OZ++QDORB6f2q2Wm6fl2mueSTpFBeBsveK0KW9hWiZ4mNiPjsh6Zs4jjdROSg==}
-    peerDependencies:
-      vue: '>=3'
+  '@iconify/utils@3.1.0':
+    resolution: {integrity: sha512-Zlzem1ZXhI1iHeeERabLNzBHdOa4VhQbqAcOQaMKuTuyZCpwKbC2R4Dd0Zo3g9EAc+Y4fiarO8HIHRAth7+skw==}
 
   '@intlify/core-base@11.2.2':
     resolution: {integrity: sha512-0mCTBOLKIqFUP3BzwuFW23hYEl9g/wby6uY//AC5hTgQfTsM2srCYF2/hYGp+a5DZ/HIFIgKkLJMzXTt30r0JQ==}
@@ -2853,6 +2857,29 @@ packages:
       '@vueuse/core':
         optional: true
 
+  unplugin-icons@22.5.0:
+    resolution: {integrity: sha512-MBlMtT5RuMYZy4TZgqUL2OTtOdTUVsS1Mhj6G1pEzMlFJlEnq6mhUfoIt45gBWxHcsOdXJDWLg3pRZ+YmvAVWQ==}
+    peerDependencies:
+      '@svgr/core': '>=7.0.0'
+      '@svgx/core': ^1.0.1
+      '@vue/compiler-sfc': ^3.0.2 || ^2.7.0
+      svelte: ^3.0.0 || ^4.0.0 || ^5.0.0
+      vue-template-compiler: ^2.6.12
+      vue-template-es2015-compiler: ^1.9.0
+    peerDependenciesMeta:
+      '@svgr/core':
+        optional: true
+      '@svgx/core':
+        optional: true
+      '@vue/compiler-sfc':
+        optional: true
+      svelte:
+        optional: true
+      vue-template-compiler:
+        optional: true
+      vue-template-es2015-compiler:
+        optional: true
+
   unplugin-utils@0.3.1:
     resolution: {integrity: sha512-5lWVjgi6vuHhJ526bI4nlCOmkCIF3nnfXkCMDeMJrtdvxTs6ZFCM8oNufGTsDbKv/tJ/xj8RpvXjRuPBZJuJog==}
     engines: {node: '>=20.19.0'}
@@ -3445,12 +3472,18 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.3': {}
 
+  '@iconify/json@2.2.427':
+    dependencies:
+      '@iconify/types': 2.0.0
+      pathe: 2.0.3
+
   '@iconify/types@2.0.0': {}
 
-  '@iconify/vue@5.0.0(vue@3.5.25(typescript@5.9.3))':
+  '@iconify/utils@3.1.0':
     dependencies:
+      '@antfu/install-pkg': 1.1.0
       '@iconify/types': 2.0.0
-      vue: 3.5.25(typescript@5.9.3)
+      mlly: 1.8.0
 
   '@intlify/core-base@11.2.2':
     dependencies:
@@ -5879,6 +5912,18 @@ snapshots:
     optionalDependencies:
       '@vueuse/core': 14.1.0(vue@3.5.25(typescript@5.9.3))
 
+  unplugin-icons@22.5.0(@vue/compiler-sfc@3.5.25):
+    dependencies:
+      '@antfu/install-pkg': 1.1.0
+      '@iconify/utils': 3.1.0
+      debug: 4.4.3
+      local-pkg: 1.1.2
+      unplugin: 2.3.11
+    optionalDependencies:
+      '@vue/compiler-sfc': 3.5.25
+    transitivePeerDependencies:
+      - supports-color
+
   unplugin-utils@0.3.1:
     dependencies:
       pathe: 2.0.3
diff --git a/src/components/common/PromptStore/index.vue b/src/components/common/PromptStore/index.vue
index 1fa0b1edc..fb0f9f0c5 100644
--- a/src/components/common/PromptStore/index.vue
+++ b/src/components/common/PromptStore/index.vue
@@ -6,7 +6,6 @@ import { UserPrompt } from '@/components/common/Setting/model'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
 import { useAuthStoreWithout, usePromptStore } from '@/store'
 import { rankBetween } from '@/utils/lexorank'
-import { SvgIcon } from '..'
 import PromptRecommend from '../../../assets/recommend.json'
 
 const props = defineProps<Props>()
@@ -477,7 +476,7 @@ function createColumns(): DataTableColumns<DataProps> {
                       draggingId.value = null
                     },
                   },
-                  { default: () => h(SvgIcon, { icon: 'mdi:reorder-horizontal' }) },
+                  { default: () => h(IconMdiReorderHorizontal) },
                 ),
                 default: () => t('store.drag'),
               },
@@ -494,7 +493,7 @@ function createColumns(): DataTableColumns<DataProps> {
                     disabled,
                     onClick: () => moveToTop(row),
                   },
-                  { default: () => h(SvgIcon, { icon: 'mdi:format-vertical-align-top' }) },
+                  { default: () => h(IconMdiFormatVerticalAlignTop) },
                 ),
                 default: () => t('store.moveTop'),
               },
@@ -511,7 +510,7 @@ function createColumns(): DataTableColumns<DataProps> {
                     disabled,
                     onClick: () => moveToBottom(row),
                   },
-                  { default: () => h(SvgIcon, { icon: 'mdi:format-vertical-align-bottom' }) },
+                  { default: () => h(IconMdiFormatVerticalAlignBottom) },
                 ),
                 default: () => t('store.moveBottom'),
               },
@@ -768,7 +767,7 @@ async function handleGetUserPromptList() {
                           @dragstart="handleMobileDragStart($event, item)"
                           @dragend="handleMobileDragEnd"
                         >
-                          <SvgIcon icon="mdi:reorder-horizontal" />
+                          <IconMdiReorderHorizontal />
                         </NButton>
                       </template>
                       {{ t('store.drag') }}
@@ -781,7 +780,7 @@ async function handleGetUserPromptList() {
                           :disabled="ordering || isSearchActive"
                           @click="moveToTop(item)"
                         >
-                          <SvgIcon icon="mdi:format-vertical-align-top" />
+                          <IconMdiFormatVerticalAlignTop />
                         </NButton>
                       </template>
                       {{ t('store.moveTop') }}
@@ -794,7 +793,7 @@ async function handleGetUserPromptList() {
                           :disabled="ordering || isSearchActive"
                           @click="moveToBottom(item)"
                         >
-                          <SvgIcon icon="mdi:format-vertical-align-bottom" />
+                          <IconMdiFormatVerticalAlignBottom />
                         </NButton>
                       </template>
                       {{ t('store.moveBottom') }}
@@ -848,11 +847,11 @@ async function handleGetUserPromptList() {
                       :href="info.url"
                       target="_blank"
                     >
-                      <SvgIcon class="text-xl" icon="ri:link" />
+                      <IconRiLink class="text-xl" />
                     </a>
                   </NButton>
                   <NButton text @click="setDownloadURL(info.downloadUrl) ">
-                    <SvgIcon class="text-xl" icon="ri:add-fill" />
+                    <IconRiAddFill class="text-xl" />
                   </NButton>
                 </div>
               </template>
diff --git a/src/components/common/Setting/BuiltInPrompt.vue b/src/components/common/Setting/BuiltInPrompt.vue
index 04505e499..458dd845c 100644
--- a/src/components/common/Setting/BuiltInPrompt.vue
+++ b/src/components/common/Setting/BuiltInPrompt.vue
@@ -5,7 +5,6 @@ import { fetchBuiltInPromptList, fetchDeleteBuiltInPrompt, fetchUpsertBuiltInPro
 import { BuiltInPrompt } from '@/components/common/Setting/model'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
 import { rankBetween } from '@/utils/lexorank'
-import { SvgIcon } from '..'
 
 const { t } = useI18n()
 const message = useMessage()
@@ -236,7 +235,7 @@ function createColumns(): DataTableColumns<BuiltInPrompt> {
                       draggingId.value = null
                     },
                   },
-                  { default: () => h(SvgIcon, { icon: 'mdi:reorder-horizontal' }) },
+                  { default: () => h(IconMdiReorderHorizontal) },
                 ),
                 default: () => t('store.drag'),
               },
@@ -253,7 +252,7 @@ function createColumns(): DataTableColumns<BuiltInPrompt> {
                     disabled,
                     onClick: () => moveToTop(row),
                   },
-                  { default: () => h(SvgIcon, { icon: 'mdi:format-vertical-align-top' }) },
+                  { default: () => h(IconMdiFormatVerticalAlignTop) },
                 ),
                 default: () => t('store.moveTop'),
               },
@@ -270,7 +269,7 @@ function createColumns(): DataTableColumns<BuiltInPrompt> {
                     disabled,
                     onClick: () => moveToBottom(row),
                   },
-                  { default: () => h(SvgIcon, { icon: 'mdi:format-vertical-align-bottom' }) },
+                  { default: () => h(IconMdiFormatVerticalAlignBottom) },
                 ),
                 default: () => t('store.moveBottom'),
               },
diff --git a/src/components/common/Setting/ChatRecord.vue b/src/components/common/Setting/ChatRecord.vue
index 6aad582fb..dc1ac5462 100644
--- a/src/components/common/Setting/ChatRecord.vue
+++ b/src/components/common/Setting/ChatRecord.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { NButton } from 'naive-ui'
 import { fetchGetChatHistory, fetchGetChatRoomsCount, fetchGetUsers } from '@/api'
-import { SvgIcon } from '@/components/common'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
 import Message from '@/views/chat/components/Message/index.vue'
 
@@ -168,7 +167,7 @@ onMounted(async () => {
       <NSpin :show="chatLoading">
         <template v-if="!dataSources.length">
           <div class="flex items-center justify-center mt-4 text-center text-neutral-300">
-            <SvgIcon icon="ri:bubble-chart-fill" class="mr-2 text-3xl" />
+            <IconRiBubbleChartFill class="mr-2 text-3xl" />
             <span>Aha~</span>
           </div>
         </template>
diff --git a/src/components/common/Setting/General.vue b/src/components/common/Setting/General.vue
index 7fbfcc0df..9d16d1468 100644
--- a/src/components/common/Setting/General.vue
+++ b/src/components/common/Setting/General.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
+import type { Component } from 'vue'
 import type { Language, Theme } from '@/store/modules/app/helper'
 import type { UserInfo } from '@/store/modules/user/helper'
 import { decode_redeemcard, fetchClearAllChat, fetchUpdateUserChatModel, fetchUpdateUserMaxContextCount } from '@/api'
-import { SvgIcon } from '@/components/common'
 import { UserConfig } from '@/components/common/Setting/model'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
 import { useAppStore, useAuthStore, useUserStore } from '@/store'
@@ -46,21 +46,21 @@ const language = computed({
   },
 })
 
-const themeOptions: { label: string, key: Theme, icon: string }[] = [
+const themeOptions: { label: string, key: Theme, icon: Component }[] = [
   {
     label: 'Auto',
     key: 'auto',
-    icon: 'ri:contrast-line',
+    icon: IconRiContrastLine,
   },
   {
     label: 'Light',
     key: 'light',
-    icon: 'ri:sun-foggy-line',
+    icon: IconRiSunFoggyLine,
   },
   {
     label: 'Dark',
     key: 'dark',
-    icon: 'ri:moon-foggy-line',
+    icon: IconRiMoonFoggyLine,
   },
 ]
 
@@ -244,7 +244,7 @@ function handleImportButtonClick(): void {
         <div class="flex flex-wrap items-center gap-4">
           <NButton size="small" @click="exportData">
             <template #icon>
-              <SvgIcon icon="ri:download-2-fill" />
+              <IconRiDownload2Fill />
             </template>
             {{ t('common.export') }}
           </NButton>
@@ -252,7 +252,7 @@ function handleImportButtonClick(): void {
           <input id="fileInput" type="file" style="display:none" @change="importData">
           <NButton size="small" @click="handleImportButtonClick">
             <template #icon>
-              <SvgIcon icon="ri:upload-2-fill" />
+              <IconRiUpload2Fill />
             </template>
             {{ t('common.import') }}
           </NButton>
@@ -261,7 +261,7 @@ function handleImportButtonClick(): void {
             <template #trigger>
               <NButton size="small">
                 <template #icon>
-                  <SvgIcon icon="ri:close-circle-line" />
+                  <IconRiCloseCircleLine />
                 </template>
                 {{ t('common.clear') }}
               </NButton>
@@ -280,7 +280,7 @@ function handleImportButtonClick(): void {
               @click="appStore.setTheme(item.key)"
             >
               <template #icon>
-                <SvgIcon :icon="item.icon" />
+                <component :is="item.icon" />
               </template>
             </NButton>
           </template>
diff --git a/src/components/common/Setting/Gift.vue b/src/components/common/Setting/Gift.vue
index 96fe0fa00..c32784aac 100644
--- a/src/components/common/Setting/Gift.vue
+++ b/src/components/common/Setting/Gift.vue
@@ -2,7 +2,6 @@
 import type { UploadFileInfo } from 'naive-ui'
 import type { GiftCard } from './model'
 import { fetchUpdateGiftCards } from '@/api'
-import { SvgIcon } from '@/components/common'
 
 const { t } = useI18n()
 
@@ -121,7 +120,7 @@ async function uploadGiftCards() {
         <NUploadDragger>
           <div style="margin-bottom: 12px">
             <NIcon size="48" :depth="3">
-              <SvgIcon icon="mage:box-upload" />
+              <IconMageBoxUpload />
             </NIcon>
           </div>
           <NText style="font-size: 16px">
diff --git a/src/components/common/Setting/Statistics.vue b/src/components/common/Setting/Statistics.vue
index ae0f12a6f..07fdfbaa8 100644
--- a/src/components/common/Setting/Statistics.vue
+++ b/src/components/common/Setting/Statistics.vue
@@ -5,7 +5,6 @@ import { BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title
 import dayjs from 'dayjs'
 import { Bar } from 'vue-chartjs'
 import { fetchGetUsers, fetchUserStatistics, fetchUserStatisticsByModel } from '@/api'
-import { SvgIcon } from '@/components/common'
 import { useUserStore } from '@/store'
 
 const { t } = useI18n()
@@ -331,12 +330,12 @@ onUnmounted(() => {
             >
               <template #icon>
                 <NIcon>
-                  <SvgIcon icon="ri:download-line" />
+                  <IconRiDownloadLine />
                 </NIcon>
               </template>
               {{ t('common.export') }}
               <NIcon class="ml-1">
-                <SvgIcon icon="ri:arrow-down-s-line" />
+                <IconRiArrowDownSLine />
               </NIcon>
             </NButton>
           </NDropdown>
@@ -348,7 +347,7 @@ onUnmounted(() => {
               <NStatistic :label="t('setting.statisticsPrompt')">
                 <template #prefix>
                   <NIcon>
-                    <SvgIcon class="text-lg" icon="ri-chat-upload-line" />
+                    <IconRiChatUploadLine class="text-lg" />
                   </NIcon>
                 </template>
                 <NNumberAnimation :duration="1000" :to="summary.promptTokens" />
@@ -358,7 +357,7 @@ onUnmounted(() => {
               <NStatistic :label="t('setting.statisticsCompletion')">
                 <template #prefix>
                   <NIcon>
-                    <SvgIcon class="text-lg" icon="ri-chat-download-line" />
+                    <IconRiChatDownloadLine class="text-lg" />
                   </NIcon>
                 </template>
                 <NNumberAnimation :duration="1000" :to="summary.completionTokens" />
@@ -368,7 +367,7 @@ onUnmounted(() => {
               <NStatistic :label="t('setting.statisticsTotal')">
                 <template #prefix>
                   <NIcon>
-                    <SvgIcon class="text-lg" icon="ri-question-answer-line" />
+                    <IconRiQuestionAnswerLine class="text-lg" />
                   </NIcon>
                 </template>
                 <NNumberAnimation :duration="1000" :to="summary.totalTokens" />
diff --git a/src/components/common/Setting/index.vue b/src/components/common/Setting/index.vue
index fa00d34f8..06dcab7ff 100644
--- a/src/components/common/Setting/index.vue
+++ b/src/components/common/Setting/index.vue
@@ -1,5 +1,4 @@
 <script setup lang='ts'>
-import { SvgIcon } from '@/components/common'
 import ChatRecord from '@/components/common/Setting/ChatRecord.vue'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
 import { useAuthStore, useUserStore } from '@/store'
@@ -60,7 +59,7 @@ const show = computed({
       <NTabs v-model:value="active" type="line" animated>
         <NTabPane name="General" tab="General">
           <template #tab>
-            <SvgIcon class="text-lg" icon="ri:file-user-line" />
+            <IconRiFileUserLine class="text-lg" />
             <span class="ml-2">{{ t('setting.general') }}</span>
           </template>
           <div class="min-h-[100px]">
@@ -69,21 +68,21 @@ const show = computed({
         </NTabPane>
         <NTabPane name="PasswordConfig" tab="PasswordConfig">
           <template #tab>
-            <SvgIcon class="text-lg" icon="ri-key-2-line" />
+            <IconRiKey2Line class="text-lg" />
             <span class="ml-2">{{ t('setting.passwordConfig') }}</span>
           </template>
           <Password />
         </NTabPane>
         <NTabPane name="TwoFAConfig" tab="TwoFAConfig">
           <template #tab>
-            <SvgIcon class="text-lg" icon="ri-key-2-line" />
+            <IconRiKey2Line class="text-lg" />
             <span class="ml-2">{{ t('setting.twoFAConfig') }}</span>
           </template>
           <TwoFA />
         </NTabPane>
         <NTabPane name="Advanced" tab="Advanced">
           <template #tab>
-            <SvgIcon class="text-lg" icon="ri:equalizer-line" />
+            <IconRiEqualizerLine class="text-lg" />
             <span class="ml-2">{{ t('setting.advanced') }}</span>
           </template>
           <div class="min-h-[100px]">
@@ -92,7 +91,7 @@ const show = computed({
         </NTabPane>
         <NTabPane name="Statistics" tab="Statistics">
           <template #tab>
-            <SvgIcon class="text-lg" icon="ri:bar-chart-box-line" />
+            <IconRiBarChartBoxLine class="text-lg" />
             <span class="ml-2">{{ t('setting.statistics') }}</span>
           </template>
           <div class="min-h-[100px]">
@@ -101,77 +100,77 @@ const show = computed({
         </NTabPane>
         <NTabPane v-if="userStore.userInfo.root" name="Config" tab="Config">
           <template #tab>
-            <SvgIcon class="text-lg" icon="ri:list-settings-line" />
+            <IconRiListSettingsLine class="text-lg" />
             <span class="ml-2">{{ t('setting.config') }}</span>
           </template>
           <About />
         </NTabPane>
         <NTabPane v-if="showChatRecordTab" name="ChatRecord" tab="ChatRecord">
           <template #tab>
-            <SvgIcon class="text-lg" icon="ic:outline-chat" />
+            <IconIcOutlineChat class="text-lg" />
             <span class="ml-2">{{ t('setting.chatRecord') }}</span>
           </template>
           <ChatRecord />
         </NTabPane>
         <NTabPane v-if="userStore.userInfo.root" name="KeysConfig" tab="KeysConfig">
           <template #tab>
-            <SvgIcon class="text-lg" icon="ri-key-2-line" />
+            <IconRiKey2Line class="text-lg" />
             <span class="ml-2">{{ t('setting.model.management') }}</span>
           </template>
           <Key />
         </NTabPane>
         <NTabPane v-if="userStore.userInfo.root" name="BuiltInPromptConfig" tab="BuiltInPromptConfig">
           <template #tab>
-            <SvgIcon class="text-lg" icon="ri:chat-quote-line" />
+            <IconRiChatQuoteLine class="text-lg" />
             <span class="ml-2">{{ t('setting.builtInPromptConfig') }}</span>
           </template>
           <BuiltInPrompt />
         </NTabPane>
         <NTabPane v-if="userStore.userInfo.root" name="SiteConfig" tab="SiteConfig">
           <template #tab>
-            <SvgIcon class="text-lg" icon="ri:settings-line" />
+            <IconRiSettingsLine class="text-lg" />
             <span class="ml-2">{{ t('setting.siteConfig') }}</span>
           </template>
           <Site />
         </NTabPane>
         <NTabPane v-if="userStore.userInfo.root" name="AnnounceConfig" tab="AnnounceConfig">
           <template #tab>
-            <SvgIcon class="text-lg" icon="ri:settings-line" />
+            <IconRiSettingsLine class="text-lg" />
             <span class="ml-2">{{ t('setting.announceConfig') }}</span>
           </template>
           <Announcement />
         </NTabPane>
         <NTabPane v-if="userStore.userInfo.root" name="MailConfig" tab="MailConfig">
           <template #tab>
-            <SvgIcon class="text-lg" icon="ri:mail-line" />
+            <IconRiMailLine class="text-lg" />
             <span class="ml-2">{{ t('setting.mailConfig') }}</span>
           </template>
           <Mail />
         </NTabPane>
         <NTabPane v-if="userStore.userInfo.root" name="AuditConfig" tab="AuditConfig">
           <template #tab>
-            <SvgIcon class="text-lg" icon="ri:settings-line" />
+            <IconRiSettingsLine class="text-lg" />
             <span class="ml-2">{{ t('setting.auditConfig') }}</span>
           </template>
           <Audit />
         </NTabPane>
         <NTabPane v-if="userStore.userInfo.root" name="SearchConfig" tab="SearchConfig">
           <template #tab>
-            <SvgIcon class="text-lg" icon="mdi:web" />
+            <IconMdiWeb class="text-lg" />
             <span class="ml-2">{{ t('setting.searchConfig') }}</span>
           </template>
           <Search />
         </NTabPane>
         <NTabPane v-if="userStore.userInfo.root" name="UserConfig" tab="UserConfig">
           <template #tab>
-            <SvgIcon class="text-lg" icon="ri-user-5-line" />
+            <IconRiUser5Line class="text-lg" />
             <span class="ml-2">{{ t('setting.userConfig') }}</span>
           </template>
           <User />
         </NTabPane>
         <NTabPane v-if="userStore.userInfo.root" name="GiftCardConfig" tab="GiftCardConfig">
           <template #tab>
-            <SvgIcon class="text-lg" icon="mdi-gift" />
+            <IconMdiGift class="text-lg" />
             <span class="ml-2">{{ t('setting.uploadgifts') }}</span>
           </template>
           <Gift />
diff --git a/src/components/common/SvgIcon/index.vue b/src/components/common/SvgIcon/index.vue
deleted file mode 100644
index c15e5b92e..000000000
--- a/src/components/common/SvgIcon/index.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script setup lang='ts'>
-import { Icon } from '@iconify/vue'
-
-interface Props {
-  icon: string
-}
-
-defineProps<Props>()
-
-const attrs = useAttrs()
-
-const bindAttrs = computed<{ class: string, style: string }>(() => ({
-  class: (attrs.class as string) || '',
-  style: (attrs.style as string) || '',
-}))
-</script>
-
-<template>
-  <Icon :icon="icon" v-bind="bindAttrs" />
-</template>
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index fa0765bc3..5cac3de45 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -4,8 +4,7 @@ import NaiveProvider from './NaiveProvider/index.vue'
 import PromptStore from './PromptStore/index.vue'
 import PromptTypeTag from './PromptTypeTag/index.vue'
 import Setting from './Setting/index.vue'
-import SvgIcon from './SvgIcon/index.vue'
 import UserAvatar from './UserAvatar/index.vue'
 import Watermark from './Watermark/index.vue'
 
-export { GithubSite, HoverButton, NaiveProvider, PromptStore, PromptTypeTag, Setting, SvgIcon, UserAvatar, Watermark }
+export { GithubSite, HoverButton, NaiveProvider, PromptStore, PromptTypeTag, Setting, UserAvatar, Watermark }
diff --git a/src/hooks/useIconRender.ts b/src/hooks/useIconRender.ts
deleted file mode 100644
index 0e5caa6f6..000000000
--- a/src/hooks/useIconRender.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { SvgIcon } from '@/components/common'
-
-export function useIconRender() {
-  interface IconConfig {
-    icon: string
-    color?: string
-    fontSize?: number
-  }
-
-  interface IconStyle {
-    color?: string
-    fontSize?: string
-  }
-
-  const iconRender = (config: IconConfig) => {
-    const { color, fontSize, icon } = config
-
-    const style: IconStyle = {}
-
-    if (color)
-      style.color = color
-
-    if (fontSize)
-      style.fontSize = `${fontSize}px`
-
-    if (!icon)
-      window.console.warn('iconRender: icon is required')
-
-    return () => h(SvgIcon, { icon, style })
-  }
-
-  return {
-    iconRender,
-  }
-}
diff --git a/src/views/chat/components/Header/index.vue b/src/views/chat/components/Header/index.vue
index 44dc9aac1..6d2beac8e 100644
--- a/src/views/chat/components/Header/index.vue
+++ b/src/views/chat/components/Header/index.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { HoverButton, SvgIcon } from '@/components/common'
+import { HoverButton } from '@/components/common'
 import IconPrompt from '@/icons/Prompt.vue'
 import { useAppStore, useChatStore } from '@/store'
 
@@ -71,8 +71,8 @@ function handleShowPrompt() {
           class="flex items-center justify-center w-11 h-11"
           @click="handleUpdateCollapsed"
         >
-          <SvgIcon v-if="collapsed" class="text-2xl" icon="ri:align-justify" />
-          <SvgIcon v-else class="text-2xl" icon="ri:align-right" />
+          <IconRiAlignJustify v-if="collapsed" class="text-2xl" />
+          <IconRiAlignRight v-else class="text-2xl" />
         </button>
       </div>
       <h1
@@ -89,25 +89,25 @@ function handleShowPrompt() {
         </HoverButton>
         <HoverButton :class="{ 'text-[#4b9e5f]': usingContext, 'text-[#a8071a]': !usingContext }" @click="toggleUsingContext">
           <span class="text-xl">
-            <SvgIcon icon="ri:chat-history-line" />
+            <IconRiChatHistoryLine />
           </span>
           <span style="margin-left:.25em">{{ usingContext ? t('chat.showOnContext') : t('chat.showOffContext') }}</span>
         </HoverButton>
         <HoverButton :class="{ 'text-[#4b9e5f]': searchEnabled, 'text-[#a8071a]': !searchEnabled }" @click="toggleSearchEnabled">
           <span class="text-xl">
-            <SvgIcon icon="mdi:web" />
+            <IconMdiWeb />
           </span>
           <span style="margin-left:.25em">{{ searchEnabled ? t('chat.searchEnabled') : t('chat.searchDisabled') }}</span>
         </HoverButton>
         <HoverButton :class="{ 'text-[#4b9e5f]': thinkEnabled, 'text-[#a8071a]': !thinkEnabled }" @click="toggleThinkEnabled">
           <span class="text-xl">
-            <SvgIcon icon="mdi:lightbulb-outline" />
+            <IconMdiLightbulbOutline />
           </span>
           <span style="margin-left:.25em">{{ thinkEnabled ? t('chat.thinkEnabled') : t('chat.thinkDisabled') }}</span>
         </HoverButton>
         <HoverButton @click="handleExport">
           <span class="text-xl text-[#4f555e] dark:text-white">
-            <SvgIcon icon="ri:download-2-line" />
+            <IconRiDownload2Line />
           </span>
         </HoverButton>
       </div>
diff --git a/src/views/chat/components/Message/index.vue b/src/views/chat/components/Message/index.vue
index 3d92c53c7..be441f92e 100644
--- a/src/views/chat/components/Message/index.vue
+++ b/src/views/chat/components/Message/index.vue
@@ -1,7 +1,5 @@
 <script setup lang='ts'>
-import { SvgIcon } from '@/components/common'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
-import { useIconRender } from '@/hooks/useIconRender'
 import { useAppStore } from '@/store'
 import { copyToClip } from '@/utils/copy'
 import AvatarComponent from './Avatar.vue'
@@ -52,8 +50,6 @@ interface Emit {
 
 const { isMobile } = useBasicLayout()
 
-const { iconRender } = useIconRender()
-
 const message = useMessage()
 
 const textRef = ref<HTMLElement>()
@@ -72,12 +68,12 @@ const options = computed(() => {
     {
       label: t('chat.copy'),
       key: 'copyText',
-      icon: iconRender({ icon: 'ri:file-copy-2-line' }),
+      icon: () => h(IconRiFileCopy2Line),
     },
     {
       label: t('common.delete'),
       key: 'delete',
-      icon: iconRender({ icon: 'ri:delete-bin-line' }),
+      icon: () => h(IconRiDeleteBinLine),
     },
   ]
 
@@ -85,7 +81,7 @@ const options = computed(() => {
     common.unshift({
       label: asRawText.value ? t('chat.preview') : t('chat.showRawText'),
       key: 'toggleRenderType',
-      icon: iconRender({ icon: asRawText.value ? 'ic:outline-code-off' : 'ic:outline-code' }),
+      icon: () => h(asRawText.value ? IconIcOutlineCodeOff : IconIcOutlineCode),
     })
   }
 
@@ -180,7 +176,7 @@ function isEventTargetValid(event: any) {
         :class="[inversion ? 'ml-2' : 'mr-2']"
       >
         <button class="focus:outline-hidden" style="opacity: 0.5;" @click="fastDelMsg">
-          <SvgIcon class="text-lg" icon="ri:delete-bin-line" />
+          <IconRiDeleteBinLine class="text-lg" />
         </button>
       </div>
     </div>
@@ -265,7 +261,7 @@ function isEventTargetValid(event: any) {
             class="mb-2 transition text-neutral-300 hover:text-neutral-800 dark:hover:text-neutral-300"
             @click="handleRegenerate"
           >
-            <SvgIcon icon="ri:restart-line" />
+            <IconRiRestartLine />
           </button>
           <NDropdown
             :trigger="isMobile ? 'click' : 'hover'"
@@ -274,7 +270,7 @@ function isEventTargetValid(event: any) {
             @select="handleSelect"
           >
             <button class="transition text-neutral-300 hover:text-neutral-800 dark:hover:text-neutral-200">
-              <SvgIcon icon="ri:more-2-fill" />
+              <IconRiMore2Fill />
             </button>
           </NDropdown>
         </div>
diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue
index b2efcd84d..2e528f1cc 100644
--- a/src/views/chat/index.vue
+++ b/src/views/chat/index.vue
@@ -7,7 +7,7 @@ import {
   fetchChatResponseoHistory,
   fetchChatStopResponding,
 } from '@/api'
-import { HoverButton, PromptTypeTag, SvgIcon } from '@/components/common'
+import { HoverButton, PromptTypeTag } from '@/components/common'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
 import IconPrompt from '@/icons/Prompt.vue'
 import { useAuthStore, useChatStore, usePromptStore, useUserStore } from '@/store'
@@ -1049,8 +1049,7 @@ function renderChatModelLabel(option: { label: string, value: string }, _selecte
   if (isExternalModel(option.value)) {
     return h('span', { style: { display: 'flex', alignItems: 'center', gap: '6px' } }, [
       option.label,
-      h(SvgIcon, {
-        icon: 'ri:external-link-line',
+      h(IconRiExternalLinkLine, {
         style: { fontSize: '14px', color: 'var(--n-text-color-secondary)' },
       }),
     ])
@@ -1317,7 +1316,7 @@ onUnmounted(() => {
           <NSpin :show="firstLoading">
             <template v-if="!dataSources.length">
               <div class="flex items-center justify-center mt-4 text-center text-neutral-300">
-                <SvgIcon icon="ri:bubble-chart-fill" class="mr-2 text-3xl" />
+                <IconRiBubbleChartFill class="mr-2 text-3xl" />
                 <span>Aha~</span>
               </div>
             </template>
@@ -1351,7 +1350,7 @@ onUnmounted(() => {
                 <div class="sticky bottom-0 left-0 flex justify-center">
                   <NButton v-if="loading" type="warning" @click="handleStop">
                     <template #icon>
-                      <SvgIcon icon="ri:stop-circle-line" />
+                      <IconRiStopCircleLine />
                     </template>
                     Stop Responding
                   </NButton>
@@ -1377,7 +1376,7 @@ onUnmounted(() => {
               >
               <HoverButton @click="handleDeleteUploadFile">
                 <span class="text-xl text-[#4f555e] dark:text-white">
-                  <SvgIcon icon="ri:delete-back-2-fill" />
+                  <IconRiDeleteBack2Fill />
                 </span>
               </HoverButton>
             </NSpace>
@@ -1398,18 +1397,18 @@ onUnmounted(() => {
                 @finish="handleFinish"
               >
                 <span class="text-xl text-[#4f555e] dark:text-white">
-                  <SvgIcon icon="ri:image-edit-line" />
+                  <IconRiImageEditLine />
                 </span>
               </NUpload>
             </div>
             <HoverButton @click="handleClear">
               <span class="text-xl text-[#4f555e] dark:text-white">
-                <SvgIcon icon="ri:delete-bin-line" />
+                <IconRiDeleteBinLine />
               </span>
             </HoverButton>
             <HoverButton v-if="!isMobile" @click="handleExport">
               <span class="text-xl text-[#4f555e] dark:text-white">
-                <SvgIcon icon="ri:download-2-line" />
+                <IconRiDownload2Line />
               </span>
             </HoverButton>
             <HoverButton v-if="!isMobile" @click="showPrompt = true">
@@ -1433,7 +1432,7 @@ onUnmounted(() => {
               @click="handleToggleSearchEnabled"
             >
               <span class="text-xl flex items-center">
-                <SvgIcon icon="mdi:web" />
+                <IconMdiWeb />
                 <span class="ml-1 text-sm">{{ currentChatRoom?.searchEnabled ? t('chat.searchEnabled') : t('chat.searchDisabled') }}</span>
               </span>
             </HoverButton>
@@ -1445,7 +1444,7 @@ onUnmounted(() => {
               @click="handleToggleThinkEnabled"
             >
               <span class="text-xl flex items-center">
-                <SvgIcon icon="mdi:lightbulb-outline" />
+                <IconMdiLightbulbOutline />
                 <span class="ml-1 text-sm">{{ currentChatRoom?.thinkEnabled ? t('chat.thinkEnabled') : t('chat.thinkDisabled') }}</span>
               </span>
             </HoverButton>
@@ -1457,7 +1456,7 @@ onUnmounted(() => {
               @click="handleToggleUsingContext"
             >
               <span class="text-xl flex items-center">
-                <SvgIcon icon="ri:chat-history-line" />
+                <IconRiChatHistoryLine />
                 <span class="ml-1 text-sm">{{ currentChatRoom?.usingContext ? t('chat.showOnContext') : t('chat.showOffContext') }}</span>
               </span>
             </HoverButton>
@@ -1494,7 +1493,7 @@ onUnmounted(() => {
             <NButton type="primary" :disabled="buttonDisabled" @click="handleSubmit">
               <template #icon>
                 <span class="dark:text-black">
-                  <SvgIcon icon="ri:send-plane-fill" />
+                  <IconRiSendPlaneFill />
                 </span>
               </template>
             </NButton>
diff --git a/src/views/chat/layout/sider/Footer.vue b/src/views/chat/layout/sider/Footer.vue
index 0ceac2cd8..a876a87ad 100644
--- a/src/views/chat/layout/sider/Footer.vue
+++ b/src/views/chat/layout/sider/Footer.vue
@@ -1,5 +1,5 @@
 <script setup lang='ts'>
-import { HoverButton, SvgIcon, UserAvatar } from '@/components/common'
+import { HoverButton, UserAvatar } from '@/components/common'
 import { useAuthStore } from '@/store'
 
 const { t } = useI18n()
@@ -22,13 +22,13 @@ async function handleLogout() {
     </div>
     <HoverButton v-if="!!authStore.token || !!authStore.session?.authProxyEnabled" :tooltip="t('common.logOut')" @click="handleLogout">
       <span class="text-xl text-[#4f555e] dark:text-white">
-        <SvgIcon icon="uil:exit" />
+        <IconUilExit />
       </span>
     </HoverButton>
 
     <HoverButton v-if="!!authStore.token || !!authStore.session?.authProxyEnabled" :tooltip="t('setting.setting')" @click="show = true">
       <span class="text-xl text-[#4f555e] dark:text-white">
-        <SvgIcon icon="ri:settings-4-line" />
+        <IconRiSettings4Line />
       </span>
     </HoverButton>
     <Setting v-if="show" v-model:visible="show" />
diff --git a/src/views/chat/layout/sider/List.vue b/src/views/chat/layout/sider/List.vue
index a37251ddc..8cff22a33 100644
--- a/src/views/chat/layout/sider/List.vue
+++ b/src/views/chat/layout/sider/List.vue
@@ -1,6 +1,5 @@
 <script setup lang='ts'>
 import { fetchRenameChatRoom } from '@/api'
-import { SvgIcon } from '@/components/common'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
 import { useAppStore, useChatStore } from '@/store'
 import { useAuthStoreWithout } from '@/store/modules/auth'
@@ -65,7 +64,7 @@ function isActive(uuid: number) {
       <div class="flex flex-col gap-2 text-sm">
         <template v-if="!dataSources.length">
           <div class="flex flex-col items-center mt-4 text-center text-neutral-300">
-            <SvgIcon icon="ri:inbox-line" class="mb-2 text-3xl" />
+            <IconRiInboxLine class="mb-2 text-3xl" />
             <span>{{ t('common.noData') }}</span>
           </div>
         </template>
@@ -77,7 +76,7 @@ function isActive(uuid: number) {
               @click="handleSelect(item)"
             >
               <span>
-                <SvgIcon icon="ri:message-3-line" />
+                <IconRiMessage3Line />
               </span>
               <div class="relative flex-1 overflow-hidden break-all text-ellipsis whitespace-nowrap">
                 <NInput
@@ -90,17 +89,17 @@ function isActive(uuid: number) {
               <div v-if="isActive(item.roomId)" class="absolute z-10 flex visible right-1">
                 <template v-if="item.isEdit">
                   <button class="p-1" @click="handleEdit(item, false)">
-                    <SvgIcon icon="ri:save-line" />
+                    <IconRiSaveLine />
                   </button>
                 </template>
                 <template v-else>
                   <button class="p-1">
-                    <SvgIcon icon="ri:edit-line" @click.stop="handleEdit(item, true)" />
+                    <IconRiEditLine @click.stop="handleEdit(item, true)" />
                   </button>
                   <NPopconfirm placement="bottom" @positive-click="handleDeleteDebounce(index, $event)">
                     <template #trigger>
                       <button class="p-1">
-                        <SvgIcon icon="ri:delete-bin-line" />
+                        <IconRiDeleteBinLine />
                       </button>
                     </template>
                     {{ t('chat.deleteHistoryConfirm') }}
diff --git a/tsconfig.json b/tsconfig.json
index ebecf5d6d..76e9edb7d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -17,7 +17,7 @@
     "paths": {
       "@/*": ["./src/*"]
     },
-    "types": ["vite/client", "node", "naive-ui/volar"]
+    "types": ["vite/client", "node", "naive-ui/volar", "unplugin-icons/types"]
   },
   "exclude": ["node_modules", "dist", "service"]
 }
diff --git a/vite.config.ts b/vite.config.ts
index 772434619..2d6f18c7b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,6 +3,8 @@ import { fileURLToPath, URL } from 'node:url'
 import tailwindcss from '@tailwindcss/vite'
 import vue from '@vitejs/plugin-vue'
 import AutoImport from 'unplugin-auto-import/vite'
+import IconsResolver from 'unplugin-icons/resolver'
+import Icons from 'unplugin-icons/vite'
 import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
 import Components from 'unplugin-vue-components/vite'
 import { defineConfig, loadEnv } from 'vite'
@@ -36,11 +38,24 @@ export default defineConfig(({ mode }) => {
             ],
           },
         ],
+        resolvers: [
+          IconsResolver({
+            prefix: 'Icon',
+            enabledCollections: ['ri', 'mdi', 'ic', 'mage', 'uil'],
+          }),
+        ],
+      }),
+      Icons({
+        compiler: 'vue3',
       }),
       Components({
         dirs: [],
         resolvers: [
           NaiveUiResolver(),
+          IconsResolver({
+            prefix: 'Icon',
+            enabledCollections: ['ri', 'mdi', 'ic', 'mage', 'uil'],
+          }),
         ],
       }),
     ],