diff --git a/src/components/ContentWrap/src/ContentWrap.vue b/src/components/ContentWrap/src/ContentWrap.vue
index 2c75f0d61..705b6bba1 100644
--- a/src/components/ContentWrap/src/ContentWrap.vue
+++ b/src/components/ContentWrap/src/ContentWrap.vue
@@ -14,10 +14,10 @@ defineProps({
 </script>
 
 <template>
-  <ElCard :class="prefixCls" shadow="never">
+  <ElCard :class="[prefixCls, 'mb-20px']" shadow="never">
     <template v-if="title" #header>
       <div class="flex items-center">
-        {{ title }}
+        <span class="text-16px font-700">{{ title }}</span>
         <ElTooltip v-if="message" effect="dark" placement="right">
           <template #content>
             <div class="max-w-200px">{{ message }}</div>
@@ -31,5 +31,3 @@ defineProps({
     </div>
   </ElCard>
 </template>
-
-<style lang="less" scoped></style>
diff --git a/src/components/Infotip/index.ts b/src/components/Infotip/index.ts
new file mode 100644
index 000000000..413fa5f4d
--- /dev/null
+++ b/src/components/Infotip/index.ts
@@ -0,0 +1,3 @@
+import Infotip from './src/Infotip.vue'
+
+export { Infotip }
diff --git a/src/components/Infotip/src/Infotip.vue b/src/components/Infotip/src/Infotip.vue
new file mode 100644
index 000000000..54d3b5d3e
--- /dev/null
+++ b/src/components/Infotip/src/Infotip.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { Highlight } from '@//components/Highlight'
+import { useDesign } from '@/hooks/web/useDesign'
+import { propTypes } from '@/utils/propTypes'
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('infotip')
+
+defineProps({
+  title: propTypes.string.def(''),
+  schema: {
+    type: Array as PropType<Array<string | TipSchema>>,
+    required: true,
+    default: () => []
+  },
+  showIndex: propTypes.bool.def(true),
+  highlightColor: propTypes.string.def('var(--el-color-primary)')
+})
+
+const emit = defineEmits(['click'])
+
+const keyClick = (key: string) => {
+  emit('click', key)
+}
+</script>
+
+<template>
+  <div
+    :class="[
+      prefixCls,
+      'p-20px mb-20px border-1px border-solid border-[var(--el-color-primary)] bg-[var(--el-color-primary-light-9)]'
+    ]"
+  >
+    <div v-if="title" :class="[`${prefixCls}__header`, 'flex items-center']">
+      <Icon icon="bi:exclamation-circle-fill" :size="22" color="var(--el-color-primary)" />
+      <span :class="[`${prefixCls}__title`, 'pl-5px text-14px font-bold']">{{ title }}</span>
+    </div>
+    <div :class="`${prefixCls}__content`">
+      <p v-for="(item, $index) in schema" :key="$index" class="pl-8px text-14px mt-15px">
+        <Highlight
+          :keys="typeof item === 'string' ? [] : item.keys"
+          :color="highlightColor"
+          @click="keyClick"
+        >
+          {{ showIndex ? `${$index + 1}、` : '' }}{{ typeof item === 'string' ? item : item.label }}
+        </Highlight>
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/src/hooks/web/useIntro.ts b/src/hooks/web/useIntro.ts
index 1c21d8bbd..85604df6a 100644
--- a/src/hooks/web/useIntro.ts
+++ b/src/hooks/web/useIntro.ts
@@ -16,6 +16,12 @@ export const useIntro = (setps?: Step[], options?: Options) => {
       intro: t('common.menuDes'),
       position: 'right'
     },
+    {
+      element: `#${variables.namespace}-tool-header`,
+      title: t('common.tool'),
+      intro: t('common.toolDes'),
+      position: 'left'
+    },
     {
       element: `#${variables.namespace}-tags-view`,
       title: t('common.tagsView'),
diff --git a/src/layout/components/ToolHeader.vue b/src/layout/components/ToolHeader.vue
index 3d4eadb23..7072dd4d4 100644
--- a/src/layout/components/ToolHeader.vue
+++ b/src/layout/components/ToolHeader.vue
@@ -9,7 +9,7 @@ import { Breadcrumb } from '@/components/Breadcrumb'
 import { useAppStore } from '@/store/modules/app'
 import { useDesign } from '@/hooks/web/useDesign'
 
-const { getPrefixCls } = useDesign()
+const { getPrefixCls, variables } = useDesign()
 
 const prefixCls = getPrefixCls('tool-header')
 
@@ -38,6 +38,7 @@ export default defineComponent({
   setup() {
     return () => (
       <div
+        id={`${variables.namespace}-tool-header`}
         class={[
           prefixCls,
           'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between'
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 0c9ae6fc8..4a9a6c99d 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -27,7 +27,9 @@ export default {
     collapse: 'Collapse',
     collapseDes: 'Expand and zoom the menu bar',
     tagsView: 'Tags view',
-    tagsViewDes: 'Used to record routing history'
+    tagsViewDes: 'Used to record routing history',
+    tool: 'Tool',
+    toolDes: 'Used to set up custom systems'
   },
   setting: {
     projectSetting: 'Project setting',
@@ -83,7 +85,9 @@ export default {
     dashboard: 'Dashboard',
     analysis: 'Analysis',
     workplace: 'Workplace',
-    guide: 'Guide'
+    guide: 'Guide',
+    component: 'Component',
+    icon: 'Icon'
   },
   analysis: {
     newUser: 'New user',
@@ -190,5 +194,14 @@ export default {
     start: 'Start',
     message:
       'The guide page is very useful for some people who enter the project for the first time. You can briefly introduce the functions of the project. The boot page is based on intro js'
+  },
+  iconDemo: {
+    icon: 'Icon',
+    localIcon: 'Local Icon',
+    iconify: 'Iconify component',
+    recommendedUse: 'Recommended use',
+    recommendeDes:
+      'Iconify component basically contains all icons. You can query any icon you want. And packaging will only package the icons used.',
+    accessAddress: 'Access address'
   }
 }
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 913fd46b6..e644fadb9 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -27,7 +27,9 @@ export default {
     collapse: '展开缩收',
     collapseDes: '展开和缩放菜单栏',
     tagsView: '标签页',
-    tagsViewDes: '用于记录路由历史记录'
+    tagsViewDes: '用于记录路由历史记录',
+    tool: '工具',
+    toolDes: '用于设置定制系统'
   },
   setting: {
     projectSetting: '项目配置',
@@ -83,7 +85,9 @@ export default {
     dashboard: '首页',
     analysis: '分析页',
     workplace: '工作台',
-    guide: '引导'
+    guide: '引导',
+    component: '组件',
+    icon: '图标'
   },
   analysis: {
     newUser: '新增用户',
@@ -190,5 +194,14 @@ export default {
     start: '开始',
     message:
       '引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。引导页基于 intro.js'
+  },
+  iconDemo: {
+    icon: '图标',
+    localIcon: '本地图标',
+    iconify: 'Iconify组件',
+    recommendedUse: '推荐使用',
+    recommendeDes:
+      'Iconify组件基本包含所有的图标，你可以查询到你想要的任何图标。并且打包只会打包所用到的图标。',
+    accessAddress: '访问地址'
   }
 }
diff --git a/src/router/index.ts b/src/router/index.ts
index 7d8a0d342..303afa123 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -85,6 +85,27 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
       }
     ]
   },
+  {
+    path: '/components',
+    component: Layout,
+    redirect: '/components/icon',
+    name: 'ComponentsDemo',
+    meta: {
+      title: t('router.component'),
+      icon: 'bx:bxs-component',
+      alwaysShow: true
+    },
+    children: [
+      {
+        path: 'icon',
+        component: () => import('@/views/Components/Icon.vue'),
+        name: 'Icon',
+        meta: {
+          title: t('router.icon')
+        }
+      }
+    ]
+  },
   {
     path: '/level',
     component: Layout,
@@ -143,23 +164,6 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
         }
       }
     ]
-  },
-  {
-    path: '/icon',
-    component: Layout,
-    name: 'IconsDemo',
-    meta: {},
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/Level/Menu2.vue'),
-        name: 'Icons',
-        meta: {
-          title: '图标',
-          icon: 'carbon:skill-level-advanced'
-        }
-      }
-    ]
   }
 ]
 
diff --git a/src/views/Components/Icon.vue b/src/views/Components/Icon.vue
new file mode 100644
index 000000000..44385bf1c
--- /dev/null
+++ b/src/views/Components/Icon.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ContentWrap } from '@/components/ContentWrap'
+import { useI18n } from '@/hooks/web/useI18n'
+import { Infotip } from '@/components/Infotip'
+
+const { t } = useI18n()
+
+const keyClick = (key: string) => {
+  if (key === t('iconDemo.accessAddress')) {
+    window.open('https://iconify.design/')
+  }
+}
+</script>
+
+<template>
+  <Infotip
+    :show-index="false"
+    :title="`${t('iconDemo.recommendedUse')}${t('iconDemo.iconify')}`"
+    :schema="[
+      {
+        label: t('iconDemo.recommendeDes'),
+        keys: ['Iconify']
+      },
+      {
+        label: t('iconDemo.accessAddress'),
+        keys: [t('iconDemo.accessAddress')]
+      }
+    ]"
+    @click="keyClick"
+  />
+  <ContentWrap :title="t('iconDemo.localIcon')">
+    <div class="flex justify-between">
+      <Icon icon="svg-icon:peoples" />
+      <Icon icon="svg-icon:money" />
+      <Icon icon="svg-icon:message" />
+      <Icon icon="svg-icon:shopping" />
+    </div>
+  </ContentWrap>
+  <ContentWrap :title="t('iconDemo.iconify')">
+    <div class="flex justify-between">
+      <Icon icon="ep:aim" />
+      <Icon icon="ep:alarm-clock" />
+      <Icon icon="ep:baseball" />
+      <Icon icon="ep:chat-line-round" />
+    </div>
+  </ContentWrap>
+</template>
diff --git a/types/componentType/infotip.d.ts b/types/componentType/infotip.d.ts
new file mode 100644
index 000000000..9c2338a3e
--- /dev/null
+++ b/types/componentType/infotip.d.ts
@@ -0,0 +1,4 @@
+declare interface TipSchema {
+  label: string
+  keys?: string[]
+}