diff --git a/apps/web-antd/src/views/tool/gen/code-preview-modal.vue b/apps/web-antd/src/views/tool/gen/code-preview-modal.vue
index 359f91ca..9a37221c 100644
--- a/apps/web-antd/src/views/tool/gen/code-preview-modal.vue
+++ b/apps/web-antd/src/views/tool/gen/code-preview-modal.vue
@@ -2,14 +2,22 @@
 import type { Recordable } from '@vben/types';
 import type { Key } from 'ant-design-vue/es/vc-tree/interface';
 
-import { ref } from 'vue';
+import { type Component, ref } from 'vue';
 
 import {
   CodeMirror,
   type LanguageSupport,
   useVbenModal,
 } from '@vben/common-ui';
-import { IconifyIcon } from '@vben/icons';
+import {
+  DefaultFileIcon,
+  FolderIcon,
+  JavaIcon,
+  SqlIcon,
+  TsIcon,
+  VueIcon,
+  XmlIcon,
+} from '@vben/icons';
 
 import { useClipboard } from '@vueuse/core';
 import { Skeleton, Tree } from 'ant-design-vue';
@@ -20,7 +28,7 @@ interface TreeNode {
   children: TreeNode[];
   title: string;
   key: string;
-  icon: string; // 树左边图标
+  icon: Component; // 树左边图标
 }
 
 const treeData = ref<TreeNode[]>([]);
@@ -90,16 +98,16 @@ function convertToTree(paths: string[]): TreeNode[] {
 }
 
 const iconMap = [
-  { key: 'java', value: 'skill-icons:java-light' },
-  { key: 'xml', value: 'tabler:file-type-xml' },
-  { key: 'sql', value: 'carbon:sql' },
-  { key: 'ts', value: 'skill-icons:typescript' },
-  { key: 'vue', value: 'logos:vue' },
-  { key: 'folder', value: 'flat-color-icons:folder' },
+  { key: 'java', value: JavaIcon },
+  { key: 'xml', value: XmlIcon },
+  { key: 'sql', value: SqlIcon },
+  { key: 'ts', value: TsIcon },
+  { key: 'vue', value: VueIcon },
+  { key: 'folder', value: FolderIcon },
 ];
 function findIcon(path: string) {
-  const defaultFileIcon = 'bx:file';
-  const defaultFolderIcon = 'flat-color-icons:folder';
+  const defaultFileIcon = DefaultFileIcon;
+  const defaultFolderIcon = FolderIcon;
   if (path.endsWith('.vm')) {
     const realPath = path.slice(0, -3);
     // 是否为指定拓展名
@@ -172,7 +180,7 @@ const { copy } = useClipboard({ legacy: true });
         >
           <template #title="{ title, icon }">
             <div class="flex items-center gap-[16px]">
-              <IconifyIcon :icon="icon" />
+              <component :is="icon" />
               <span>{{ title }}</span>
             </div>
           </template>
diff --git a/packages/icons/package.json b/packages/icons/package.json
index 5b0ced22..764a4f49 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -45,9 +45,11 @@
     "@iconify/icons-material-symbols": "^1.2.58",
     "@iconify/icons-mdi": "^1.2.48",
     "@iconify/icons-mingcute": "^1.2.9",
+    "@iconify/icons-noto": "^1.2.10",
     "@iconify/icons-ph": "^1.2.5",
     "@iconify/icons-ri": "^1.2.10",
     "@iconify/icons-simple-icons": "^1.2.74",
+    "@iconify/icons-skill-icons": "^1.2.1",
     "@iconify/icons-solar": "^1.2.3",
     "@iconify/icons-streamline": "^1.2.3",
     "@iconify/icons-tabler": "^1.2.95",
diff --git a/packages/icons/src/iconify-offline/index.ts b/packages/icons/src/iconify-offline/index.ts
index c24cca95..6e2e19e4 100644
--- a/packages/icons/src/iconify-offline/index.ts
+++ b/packages/icons/src/iconify-offline/index.ts
@@ -4,6 +4,8 @@ import githubOutlined from '@iconify/icons-ant-design/github-outlined';
 import inboxIcon from '@iconify/icons-ant-design/inbox-outlined';
 import userOutlined from '@iconify/icons-ant-design/user-outlined';
 import ucIcon from '@iconify/icons-arcticons/uc-browser';
+import defaultFileIcon from '@iconify/icons-bx/file';
+import sqlIcon from '@iconify/icons-carbon/sql';
 import linuxIcon from '@iconify/icons-devicon/linux';
 import windowsIcon from '@iconify/icons-devicon/windows8';
 import alipayIcon from '@iconify/icons-fa-brands/alipay';
@@ -19,6 +21,7 @@ import operaIcon from '@iconify/icons-logos/opera';
 import quarkIcon from '@iconify/icons-logos/quarkus-icon';
 import redisIcon from '@iconify/icons-logos/redis';
 import safariIcon from '@iconify/icons-logos/safari';
+import vueIcon from '@iconify/icons-logos/vue';
 import iphoneIcon from '@iconify/icons-majesticons/iphone-x-apps-line';
 import menuIcon from '@iconify/icons-material-symbols/menu';
 import okButtonIcon from '@iconify/icons-mdi/button-pointer';
@@ -30,6 +33,9 @@ import dingtalkIcon from '@iconify/icons-ri/dingding-line';
 import taobaoIconFill from '@iconify/icons-ri/taobao-fill';
 import giteeIcon from '@iconify/icons-simple-icons/gitee';
 import qqIcon from '@iconify/icons-simple-icons/tencentqq';
+import javaIcon from '@iconify/icons-skill-icons/java-light';
+import tsIcon from '@iconify/icons-skill-icons/typescript';
+import xmlIcon from '@iconify/icons-tabler/file-type-xml';
 import githubOAuthIcon from '@iconify/icons-uiw/github';
 import excelIcon from '@iconify/icons-vscode-icons/file-type-excel';
 import osxIcon from '@iconify/icons-wpf/macos';
@@ -159,3 +165,22 @@ export const MenuIcon = createIconifyOfflineIcon(
   'material-symbols:menu',
   menuIcon,
 );
+
+export const JavaIcon = createIconifyOfflineIcon(
+  'skill-icons:java-light',
+  javaIcon,
+);
+export const XmlIcon = createIconifyOfflineIcon(
+  'tabler:file-type-xml',
+  xmlIcon,
+);
+export const SqlIcon = createIconifyOfflineIcon('carbon:sql', sqlIcon);
+export const TsIcon = createIconifyOfflineIcon(
+  'skill-icons:typescript',
+  tsIcon,
+);
+export const VueIcon = createIconifyOfflineIcon('logos:vue', vueIcon);
+export const DefaultFileIcon = createIconifyOfflineIcon(
+  'flat-color-icons:folder',
+  defaultFileIcon,
+);