diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts
index 9f7cff68..950d5f9a 100644
--- a/docs/.vuepress/config.ts
+++ b/docs/.vuepress/config.ts
@@ -28,18 +28,34 @@ export default defineUserConfig({
     social: [{ icon: 'github', link: 'https://github.com/pengzhanbo' }],
     notes,
     navbar: [
-      { text: 'Blog', link: '/blog/', activeMatch: '/blog/' },
+      { text: 'Home', link: '/', icon: 'material-symbols:home-outline' },
+      {
+        text: 'Blog',
+        link: '/blog/',
+        icon: 'material-symbols:article-outline',
+      },
       {
         text: 'VuePress',
+        icon: 'vscode-icons:file-type-vue',
         items: [
-          { text: 'theme-plume', link: '/note/vuepress-theme-plume/' },
+          {
+            text: 'theme-plume',
+            link: '/note/vuepress-theme-plume/',
+            icon: 'icon-park-outline:theme',
+          },
           {
             text: 'Plugin',
+            icon: 'mingcute:plugin-2-line',
             items: [
-              { text: 'caniuse', link: '/note/vuepress-plugin/caniuse/' },
+              {
+                text: 'caniuse',
+                link: '/note/vuepress-plugin/caniuse/',
+                icon: 'tabler:brand-css3',
+              },
               {
                 text: 'netlify-functions',
                 link: '/note/vuepress-plugin/netlify-functions/',
+                icon: 'teenyicons:netlify-outline',
               },
             ],
           },
diff --git a/docs/.vuepress/notes.ts b/docs/.vuepress/notes.ts
index 97712243..2986ca7a 100644
--- a/docs/.vuepress/notes.ts
+++ b/docs/.vuepress/notes.ts
@@ -12,6 +12,7 @@ export default definePlumeNotesConfig({
         '',
         {
           text: '指南',
+          icon: 'icon-park-outline:guide-board',
           items: ['快速开始', '编写文章'],
         },
         {
diff --git a/packages/plugin-iconify/package.json b/packages/plugin-iconify/package.json
index fd0efd49..e5e9c5f4 100644
--- a/packages/plugin-iconify/package.json
+++ b/packages/plugin-iconify/package.json
@@ -44,6 +44,6 @@
     "VuePress",
     "vuepress plugin",
     "iconify",
-    "vuepress-plugin-plugin-iconify"
+    "vuepress-plugin-iconify"
   ]
 }
diff --git a/packages/plugin-iconify/src/node/plugin.ts b/packages/plugin-iconify/src/node/plugin.ts
index ae1f828e..a0b5fa1f 100644
--- a/packages/plugin-iconify/src/node/plugin.ts
+++ b/packages/plugin-iconify/src/node/plugin.ts
@@ -6,15 +6,14 @@ export const iconifyPlugin = ({
   componentName = 'Iconify',
   size = '1em',
   color = 'currentColor',
-}: IconifyOptions): Plugin => {
+}: IconifyOptions = {}): Plugin => {
   return (app: App) => {
     return {
       name: '@vuepress-plume/vuepress-plugin-iconify',
       define: {
-        __VUEPRESS_PLUGIN_ICONIFY_COMPONENT_NAME__:
-          JSON.stringify(componentName),
-        __VUEPRESS_PLUGIN_ICONIFY_DEFAULT_SIZE__: JSON.stringify(size),
-        __VUEPRESS_PLUGIN_ICONIFY_DEFAULT_COLOR__: JSON.stringify(color),
+        __VUEPRESS_PLUGIN_ICONIFY_COMPONENT_NAME__: componentName,
+        __VUEPRESS_PLUGIN_ICONIFY_DEFAULT_SIZE__: size,
+        __VUEPRESS_PLUGIN_ICONIFY_DEFAULT_COLOR__: color,
       },
       clientConfigFile: path.resolve(
         getDirname(import.meta.url),
diff --git a/packages/theme/package.json b/packages/theme/package.json
index aed9a7e0..35debb65 100644
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@@ -49,6 +49,7 @@
     "@vuepress-plume/vuepress-plugin-blog-data": "workspace:*",
     "@vuepress-plume/vuepress-plugin-caniuse": "workspace:*",
     "@vuepress-plume/vuepress-plugin-copy-code": "workspace:*",
+    "@vuepress-plume/vuepress-plugin-iconify": "workspace:*",
     "@vuepress-plume/vuepress-plugin-notes-data": "workspace:*",
     "@vuepress/client": "2.0.0-beta.60",
     "@vuepress/core": "2.0.0-beta.60",
diff --git a/packages/theme/src/client/components/Flyout/MenuGroup.vue b/packages/theme/src/client/components/Flyout/MenuGroup.vue
index dc12f21e..cb4d397d 100644
--- a/packages/theme/src/client/components/Flyout/MenuGroup.vue
+++ b/packages/theme/src/client/components/Flyout/MenuGroup.vue
@@ -3,13 +3,17 @@ import MenuLink from './MenuLink.vue'
 
 defineProps<{
   text?: string
+  icon?: string
   items: any[]
 }>()
 </script>
 
 <template>
   <div class="menu-group">
-    <p v-if="text" class="title">{{ text }}</p>
+    <p v-if="text" class="title">
+      <Icon v-if="icon" :name="icon" />
+      {{ text }}
+    </p>
 
     <template v-for="item in items">
       <MenuLink v-if="'link' in item" :key="item?.link" :item="item" />
diff --git a/packages/theme/src/client/components/Flyout/MenuLink.vue b/packages/theme/src/client/components/Flyout/MenuLink.vue
index aa43cf43..884a4c85 100644
--- a/packages/theme/src/client/components/Flyout/MenuLink.vue
+++ b/packages/theme/src/client/components/Flyout/MenuLink.vue
@@ -22,6 +22,7 @@ const page = usePageData()
       }"
       :href="item.link"
     >
+      <Icon v-if="item.icon" :name="item.icon" />
       {{ item.text }}
     </AutoLink>
   </div>
diff --git a/packages/theme/src/client/components/Flyout/VMenu.vue b/packages/theme/src/client/components/Flyout/VMenu.vue
index 91c3f491..6f49effc 100644
--- a/packages/theme/src/client/components/Flyout/VMenu.vue
+++ b/packages/theme/src/client/components/Flyout/VMenu.vue
@@ -12,7 +12,12 @@ defineProps<{
     <div v-if="items" class="items">
       <template v-for="item in items" :key="item.text">
         <MenuLink v-if="'link' in item" :item="item" />
-        <MenuGroup v-else :text="item.text" :items="item.items" />
+        <MenuGroup
+          v-else
+          :text="item.text"
+          :items="item.items"
+          :icon="item.icon"
+        />
       </template>
     </div>
 
diff --git a/packages/theme/src/client/components/Flyout/index.vue b/packages/theme/src/client/components/Flyout/index.vue
index f4456911..116895a4 100644
--- a/packages/theme/src/client/components/Flyout/index.vue
+++ b/packages/theme/src/client/components/Flyout/index.vue
@@ -6,6 +6,7 @@ import IconMoreHorizontal from '../icons/IconMoreHorizontal.vue'
 import VMenu from './VMenu.vue'
 
 defineProps<{
+  prefixIcon?: string
   icon?: any
   button?: string
   label?: string
@@ -22,6 +23,13 @@ function onBlur() {
 }
 </script>
 
+<script lang="ts">
+export default {
+  // eslint-disable-next-line vue/match-component-file-name
+  name: 'Flyout',
+}
+</script>
+
 <template>
   <div
     ref="el"
@@ -38,6 +46,7 @@ function onBlur() {
       @click="open = !open"
     >
       <span v-if="button || icon" class="text">
+        <Icon v-if="prefixIcon" :name="prefixIcon" />
         <Component :is="icon" v-if="icon" class="option-icon" />
         {{ button }}
         <IconChevronDown class="text-icon" />
diff --git a/packages/theme/src/client/components/Nav/NavBarMenuGroup.vue b/packages/theme/src/client/components/Nav/NavBarMenuGroup.vue
index deb023ee..9633f38b 100644
--- a/packages/theme/src/client/components/Nav/NavBarMenuGroup.vue
+++ b/packages/theme/src/client/components/Nav/NavBarMenuGroup.vue
@@ -19,5 +19,6 @@ const page = usePageData()
     }"
     :button="item.text"
     :items="item.items"
+    :prefix-icon="item.icon"
   />
 </template>
diff --git a/packages/theme/src/client/components/Nav/NavBarMenuLink.vue b/packages/theme/src/client/components/Nav/NavBarMenuLink.vue
index 0b5bd0a5..53ed3d39 100644
--- a/packages/theme/src/client/components/Nav/NavBarMenuLink.vue
+++ b/packages/theme/src/client/components/Nav/NavBarMenuLink.vue
@@ -24,6 +24,7 @@ const page = usePageData()
     :href="item.link"
     :no-icon="true"
   >
+    <Icon v-if="item.icon" :name="item.icon" />
     {{ item.text }}
   </AutoLink>
 </template>
diff --git a/packages/theme/src/client/components/Nav/NavScreenMenu.vue b/packages/theme/src/client/components/Nav/NavScreenMenu.vue
index a6a8873b..7ce1b894 100644
--- a/packages/theme/src/client/components/Nav/NavScreenMenu.vue
+++ b/packages/theme/src/client/components/Nav/NavScreenMenu.vue
@@ -13,6 +13,7 @@ const theme = useThemeLocaleData()
         v-if="'link' in item"
         :text="item.text"
         :link="item.link"
+        :icon="item.icon"
       />
       <NavScreenMenuGroup v-else :text="item.text || ''" :items="item.items" />
     </template>
diff --git a/packages/theme/src/client/components/Nav/NavScreenMenuGroup.vue b/packages/theme/src/client/components/Nav/NavScreenMenuGroup.vue
index 65bcd0c1..47763ecd 100644
--- a/packages/theme/src/client/components/Nav/NavScreenMenuGroup.vue
+++ b/packages/theme/src/client/components/Nav/NavScreenMenuGroup.vue
@@ -6,6 +6,7 @@ import NavScreenMenuGroupSection from './NavScreenMenuGroupSection.vue'
 
 const props = defineProps<{
   text: string
+  icon?: string
   items: any[]
 }>()
 
@@ -28,18 +29,29 @@ function toggle() {
       :aria-expanded="isOpen"
       @click="toggle"
     >
-      <span class="button-text">{{ text }}</span>
+      <span class="button-text">
+        <Icon v-if="icon" :name="icon" />
+        {{ text }}
+      </span>
       <IconPlus class="button-icon" />
     </button>
 
     <div :id="groupId" class="items">
       <template v-for="item in items" :key="item.text">
         <div v-if="'link' in item" :key="item.text" class="item">
-          <NavScreenMenuGroupLink :text="item.text" :link="item.link" />
+          <NavScreenMenuGroupLink
+            :text="item.text"
+            :link="item.link"
+            :icon="item.icon"
+          />
         </div>
 
         <div v-else class="group">
-          <NavScreenMenuGroupSection :text="item.text" :items="item.items" />
+          <NavScreenMenuGroupSection
+            :text="item.text"
+            :items="item.items"
+            :icon="item.icon"
+          />
         </div>
       </template>
     </div>
diff --git a/packages/theme/src/client/components/Nav/NavScreenMenuGroupLink.vue b/packages/theme/src/client/components/Nav/NavScreenMenuGroupLink.vue
index a8c277d2..1da846ec 100644
--- a/packages/theme/src/client/components/Nav/NavScreenMenuGroupLink.vue
+++ b/packages/theme/src/client/components/Nav/NavScreenMenuGroupLink.vue
@@ -3,6 +3,7 @@ import { inject } from 'vue'
 import AutoLink from '../AutoLink.vue'
 
 defineProps<{
+  icon?: string
   text: string
   link: string
 }>()
@@ -16,6 +17,7 @@ const closeScreen = inject('close-screen') as () => void
     :href="link"
     @click="closeScreen"
   >
+    <Icon v-if="icon" :name="icon" />
     {{ text }}
   </AutoLink>
 </template>
diff --git a/packages/theme/src/client/components/Nav/NavScreenMenuGroupSection.vue b/packages/theme/src/client/components/Nav/NavScreenMenuGroupSection.vue
index 1255f75e..16d2d6af 100644
--- a/packages/theme/src/client/components/Nav/NavScreenMenuGroupSection.vue
+++ b/packages/theme/src/client/components/Nav/NavScreenMenuGroupSection.vue
@@ -3,6 +3,7 @@ import type { NavItemWithLink } from '../../../shared/index.js'
 import NavScreenMenuGroupLink from './NavScreenMenuGroupLink.vue'
 
 defineProps<{
+  icon?: string
   text?: string
   items: NavItemWithLink[]
 }>()
@@ -10,12 +11,16 @@ defineProps<{
 
 <template>
   <div class="nav-screen-menu-group-section">
-    <p v-if="text" class="title">{{ text }}</p>
+    <p v-if="text" class="title">
+      <Icon v-if="icon" :name="icon" />
+      {{ text }}
+    </p>
     <NavScreenMenuGroupLink
       v-for="item in items"
       :key="item.text"
       :text="item.text"
       :link="item.link"
+      :icon="item.icon"
     />
   </div>
 </template>
diff --git a/packages/theme/src/client/components/Nav/NavScreenMenuLink.vue b/packages/theme/src/client/components/Nav/NavScreenMenuLink.vue
index 96a503d5..937eb4c3 100644
--- a/packages/theme/src/client/components/Nav/NavScreenMenuLink.vue
+++ b/packages/theme/src/client/components/Nav/NavScreenMenuLink.vue
@@ -5,6 +5,7 @@ import AutoLink from '../AutoLink.vue'
 defineProps<{
   text: string
   link: string
+  icon?: string
 }>()
 
 const closeScreen = inject('close-screen') as () => void
@@ -12,6 +13,7 @@ const closeScreen = inject('close-screen') as () => void
 
 <template>
   <AutoLink class="nav-screen-menu-link" :href="link" @click="closeScreen">
+    <Icon v-if="icon" :name="icon" />
     {{ text }}
   </AutoLink>
 </template>
diff --git a/packages/theme/src/client/config.ts b/packages/theme/src/client/config.ts
index 1208547c..6f62481c 100644
--- a/packages/theme/src/client/config.ts
+++ b/packages/theme/src/client/config.ts
@@ -31,6 +31,15 @@ export default defineClientConfig({
       }
       return null
     })
+
+    // eslint-disable-next-line vue/match-component-file-name
+    app.component('Icon', (props) => {
+      const Iconify = app.component('Iconify')
+      if (Iconify) {
+        return h(Iconify, props)
+      }
+      return null
+    })
   },
   setup() {
     setupDarkMode()
diff --git a/packages/theme/src/client/styles/utils.scss b/packages/theme/src/client/styles/utils.scss
index d3adb683..ddb87b22 100644
--- a/packages/theme/src/client/styles/utils.scss
+++ b/packages/theme/src/client/styles/utils.scss
@@ -12,3 +12,7 @@
   width: 20px;
   height: 20px;
 }
+
+.vp-iconify {
+  margin: 0.3em;
+}
diff --git a/packages/theme/src/node/plugins.ts b/packages/theme/src/node/plugins.ts
index 6fadb27e..c014a3f4 100644
--- a/packages/theme/src/node/plugins.ts
+++ b/packages/theme/src/node/plugins.ts
@@ -3,6 +3,7 @@ import { baiduTongjiPlugin } from '@vuepress-plume/vuepress-plugin-baidu-tongji'
 import { blogDataPlugin } from '@vuepress-plume/vuepress-plugin-blog-data'
 import { caniusePlugin } from '@vuepress-plume/vuepress-plugin-caniuse'
 import { copyCodePlugin } from '@vuepress-plume/vuepress-plugin-copy-code'
+import { iconifyPlugin } from '@vuepress-plume/vuepress-plugin-iconify'
 import { notesDataPlugin } from '@vuepress-plume/vuepress-plugin-notes-data'
 import type { App, PluginConfig } from '@vuepress/core'
 import { activeHeaderLinksPlugin } from '@vuepress/plugin-active-header-links'
@@ -74,7 +75,11 @@ export const setupPlugins = (
         }
       },
     }),
+
     localeOptions.notes ? notesDataPlugin(localeOptions.notes) : [],
+
+    iconifyPlugin(),
+
     activeHeaderLinksPlugin({
       headerLinkSelector: 'a.outline-link',
       headerAnchorSelector: '.header-anchor',
diff --git a/packages/theme/src/shared/index.ts b/packages/theme/src/shared/index.ts
index 96b4786b..4da51f26 100644
--- a/packages/theme/src/shared/index.ts
+++ b/packages/theme/src/shared/index.ts
@@ -1,6 +1,5 @@
 export * from './base.js'
 export * from './frontmatter.js'
-export * from './note.js'
 export * from './options/index.js'
 export * from './page.js'
 export * from './blog.js'
diff --git a/packages/theme/src/shared/note.ts b/packages/theme/src/shared/note.ts
deleted file mode 100644
index 345f1d80..00000000
--- a/packages/theme/src/shared/note.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-export interface PlumeThemeNotesOptions {
-  /**
-   * notes 链接前缀
-   *
-   * 默认： /note/
-   */
-  link?: string
-  /**
-   * notes 笔记所在目录
-   *
-   * 此处配置的为所有笔记的存放目录，
-   *
-   * 该目录应该在 sourceDir 目录的子目录
-   *
-   * 目录中的所有文章默认不会出现在 article文章列表之中
-   *
-   * 默认值： _notes
-   */
-  dir?: string
-
-  /**
-   * 是否可折叠
-   *
-   * 默认不折叠， 仅对一级有效
-   */
-  collapsible?: boolean
-  /**
-   * 笔记集合配置
-   *
-   * 允许存在多个 note，统一以文件夹形式放在 dir 子级
-   */
-  notes: PlumeThemeNotesItem[]
-}
-
-export interface PlumeThemeNotesItem {
-  text: string
-  link: string
-  dir: string
-  sidebar?: PlumeThemeSidebarConfigOptions | 'auto'
-}
-
-export type PlumeThemeSidebarConfigOptions = (
-  | PlumeThemeNotesConfigItem
-  | string
-)[]
-export interface PlumeThemeNotesConfigItem {
-  text: string
-  link?: string
-  dir?: string
-  children: PlumeThemeSidebarConfigOptions
-}
diff --git a/packages/theme/src/shared/options/navbar.ts b/packages/theme/src/shared/options/navbar.ts
index b70ed4a8..823a06b2 100644
--- a/packages/theme/src/shared/options/navbar.ts
+++ b/packages/theme/src/shared/options/navbar.ts
@@ -3,6 +3,7 @@ export type NavItem = NavItemWithLink | NavItemWithChildren
 export type NavItemWithLink = {
   text: string
   link: string
+  icon?: string
 
   /**
    * `activeMatch` is expected to be a regex string. We can't use actual
@@ -13,11 +14,13 @@ export type NavItemWithLink = {
 
 export type NavItemChildren = {
   text?: string
+  icon?: string
   items: NavItemWithLink[]
 }
 
 export interface NavItemWithChildren {
   text?: string
+  icon?: string
   items: (NavItemChildren | NavItemWithLink)[]
 
   /**
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7e514d92..df6d0ccd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -295,6 +295,7 @@ importers:
       '@vuepress-plume/vuepress-plugin-blog-data': workspace:*
       '@vuepress-plume/vuepress-plugin-caniuse': workspace:*
       '@vuepress-plume/vuepress-plugin-copy-code': workspace:*
+      '@vuepress-plume/vuepress-plugin-iconify': workspace:*
       '@vuepress-plume/vuepress-plugin-notes-data': workspace:*
       '@vuepress/client': 2.0.0-beta.60
       '@vuepress/core': 2.0.0-beta.60
@@ -333,6 +334,7 @@ importers:
       '@vuepress-plume/vuepress-plugin-blog-data': link:../plugin-blog-data
       '@vuepress-plume/vuepress-plugin-caniuse': link:../plugin-caniuse
       '@vuepress-plume/vuepress-plugin-copy-code': link:../plugin-copy-code
+      '@vuepress-plume/vuepress-plugin-iconify': link:../plugin-iconify
       '@vuepress-plume/vuepress-plugin-notes-data': link:../plugin-notes-data
       '@vuepress/client': 2.0.0-beta.60
       '@vuepress/core': 2.0.0-beta.60