diff --git a/docs/.vuepress/components/VPAutoLink.vue b/docs/.vuepress/components/VPAutoLink.vue
new file mode 100644
index 0000000000..90165853cb
--- /dev/null
+++ b/docs/.vuepress/components/VPAutoLink.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { VNode } from 'vue'
+import type { AutoLinkConfig } from 'vuepress/client'
+import { AutoLink } from 'vuepress/client'
+
+export interface AutoLinkConfigWithIcon extends AutoLinkConfig {
+  icon?: string
+}
+
+defineProps<{
+  /**
+   * The auto link config
+   */
+  config: AutoLinkConfigWithIcon
+}>()
+
+defineSlots<{
+  default?: (config: AutoLinkConfigWithIcon) => VNode | VNode[]
+  before?: (config: AutoLinkConfigWithIcon) => VNode | VNode[] | null
+  after?: (config: AutoLinkConfigWithIcon) => VNode | VNode[] | null
+}>()
+</script>
+
+<template>
+  <AutoLink :config="config">
+    <template v-if="$slots.default" #default>
+      <slot v-bind="config" />
+    </template>
+    <template #before>
+      <slot name="before" v-bind="config">
+        <VPIcon v-if="config.icon" class="auto-link-icon" :icon="config.icon" />
+      </slot>
+    </template>
+    <template #after>
+      <slot name="after" v-bind="config" />
+    </template>
+  </AutoLink>
+</template>
+
+<style>
+.auto-link-icon {
+  margin-inline-end: 0.25em;
+}
+</style>
diff --git a/docs/.vuepress/components/VPNavbarDropdown.vue b/docs/.vuepress/components/VPNavbarDropdown.vue
new file mode 100644
index 0000000000..b46a7bc4af
--- /dev/null
+++ b/docs/.vuepress/components/VPNavbarDropdown.vue
@@ -0,0 +1,349 @@
+<script setup lang="ts">
+import VPAutoLink from '@theme/VPAutoLink.vue'
+import VPDropdownTransition from '@theme/VPDropdownTransition.vue'
+import type { AutoLinkOptions, NavGroup } from '@vuepress/theme-default/client'
+import { useToggle } from '@vueuse/core'
+import { computed, toRefs, watch } from 'vue'
+import { useRoute } from 'vuepress/client'
+
+const props = defineProps<{
+  /** dropdown config */
+  config: NavGroup<AutoLinkOptions | NavGroup<AutoLinkOptions>>
+}>()
+
+const { config } = toRefs(props)
+const route = useRoute()
+
+const [open, toggleOpen] = useToggle(false)
+
+const dropdownAriaLabel = computed(
+  () => config.value.ariaLabel || config.value.text,
+)
+
+const isLastItemOfArray = (arrayItem: unknown, array: unknown[]): boolean =>
+  array[array.length - 1] === arrayItem
+
+/**
+ * Open the dropdown when user tab and click from keyboard.
+ *
+ * Use event.detail to detect tab and click from keyboard.
+ * The Tab + Click is UIEvent > KeyboardEvent, so the detail is 0.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
+ */
+const handleDropdown = (e: UIEvent): void => {
+  if (e.detail === 0) toggleOpen()
+  else toggleOpen(false)
+}
+
+watch(
+  () => route.path,
+  () => {
+    toggleOpen(false)
+  },
+)
+</script>
+
+<template>
+  <div class="vp-navbar-dropdown-wrapper" :class="{ open }">
+    <button
+      class="vp-navbar-dropdown-title"
+      type="button"
+      :aria-label="dropdownAriaLabel"
+      @click="handleDropdown"
+    >
+      <VPIcon v-if="config.icon" :icon="config.icon" />
+      <span class="title">{{ config.text }}</span>
+      <span class="arrow down" />
+    </button>
+
+    <button
+      class="vp-navbar-dropdown-title-mobile"
+      type="button"
+      :aria-label="dropdownAriaLabel"
+      @click="() => toggleOpen()"
+    >
+      <VPIcon v-if="config.icon" :icon="config.icon" />
+      <span class="title">{{ config.text }}</span>
+      <span class="arrow" :class="open ? 'down' : 'right'" />
+    </button>
+
+    <VPDropdownTransition>
+      <ul v-show="open" class="vp-navbar-dropdown">
+        <li
+          v-for="child in config.children"
+          :key="child.text"
+          class="vp-navbar-dropdown-item"
+        >
+          <template v-if="'children' in child">
+            <h4 class="vp-navbar-dropdown-subtitle">
+              <VPAutoLink
+                v-if="child.link"
+                :config="child"
+                @focusout="
+                  () => {
+                    if (
+                      isLastItemOfArray(child, config.children) &&
+                      child.children.length === 0
+                    ) {
+                      open = false
+                    }
+                  }
+                "
+              />
+
+              <span v-else
+                ><VPIcon v-if="config.icon" :icon="config.icon" />{{
+                  child.text
+                }}</span
+              >
+            </h4>
+
+            <ul class="vp-navbar-dropdown-subitem-wrapper">
+              <li
+                v-for="grandchild in child.children"
+                :key="grandchild.link"
+                class="vp-navbar-dropdown-subitem"
+              >
+                <VPAutoLink
+                  :config="grandchild"
+                  @focusout="
+                    () => {
+                      if (
+                        isLastItemOfArray(grandchild, child.children) &&
+                        isLastItemOfArray(child, config.children)
+                      ) {
+                        toggleOpen(false)
+                      }
+                    }
+                  "
+                />
+              </li>
+            </ul>
+          </template>
+
+          <template v-else>
+            <VPAutoLink
+              :config="child"
+              @focusout="
+                () => {
+                  if (isLastItemOfArray(child, config.children)) {
+                    toggleOpen(false)
+                  }
+                }
+              "
+            />
+          </template>
+        </li>
+      </ul>
+    </VPDropdownTransition>
+  </div>
+</template>
+
+<style lang="scss">
+@use '@vuepress/theme-default/styles/mixins';
+@use '@vuepress/theme-default/styles/variables' as *;
+
+.vp-navbar-dropdown-wrapper {
+  cursor: pointer;
+
+  &:not(.mobile) {
+    height: 1.8rem;
+
+    &:hover,
+    &.open {
+      .vp-navbar-dropdown {
+        // override the inline style.
+        display: block !important;
+      }
+    }
+  }
+}
+
+.vp-navbar-dropdown {
+  .vp-navbar-dropdown-wrapper.mobile & {
+    @include mixins.dropdown-wrapper;
+
+    padding-top: 0.5rem;
+  }
+
+  .vp-navbar-dropdown-wrapper:not(.mobile) & {
+    position: absolute;
+    top: 100%;
+    right: 0;
+
+    display: none;
+
+    overflow-y: auto;
+
+    box-sizing: border-box;
+
+    // Avoid height shake by clicking
+    height: auto !important;
+    max-height: calc(100vh - 2.7rem);
+    margin: 0;
+    padding: 0.6rem 0;
+    border: 1px solid var(--vp-c-gutter);
+    border-radius: 0.5rem;
+
+    background-color: var(--vp-c-bg-elv);
+
+    text-align: left;
+    white-space: nowrap;
+  }
+}
+
+.vp-navbar-dropdown-title {
+  display: block;
+
+  padding: inherit;
+  border: none;
+
+  background: transparent;
+  color: var(--vp-c-text);
+
+  font-weight: 500;
+  font-size: 0.9rem;
+  font-family: inherit;
+  line-height: 1.4rem;
+
+  cursor: inherit;
+
+  .vp-navbar-dropdown-wrapper.mobile & {
+    display: none;
+  }
+
+  &:hover {
+    border-color: transparent;
+  }
+
+  .vp-icon {
+    margin-inline-end: 0.25em;
+  }
+}
+
+.vp-navbar-dropdown-title-mobile {
+  display: none;
+
+  padding: inherit;
+  border: none;
+
+  background: transparent;
+  color: var(--vp-c-text);
+
+  font-weight: 600;
+  font-size: inherit;
+  font-family: inherit;
+  line-height: 1.4rem;
+
+  cursor: inherit;
+
+  .vp-navbar-dropdown-wrapper.mobile & {
+    display: block;
+  }
+
+  &:hover {
+    color: var(--vp-c-accent);
+  }
+
+  .vp-icon {
+    margin-inline-end: 0.25em;
+  }
+}
+
+.vp-navbar-dropdown-item {
+  color: inherit;
+  line-height: 1.7rem;
+
+  a {
+    position: relative;
+
+    display: block;
+
+    margin-bottom: 0;
+    padding: 0 1.5rem 0 1.25rem;
+    border-bottom: none;
+
+    font-weight: 400;
+    line-height: 1.7rem;
+
+    &:hover {
+      color: var(--vp-c-accent);
+    }
+
+    &.route-link-active {
+      color: var(--vp-c-accent);
+
+      &::after {
+        content: '';
+
+        position: absolute;
+        top: calc(50% - 2px);
+        left: 9px;
+
+        width: 0;
+        height: 0;
+        border-top: 3px solid transparent;
+        border-bottom: 3px solid transparent;
+        border-left: 5px solid var(--vp-c-accent);
+      }
+    }
+  }
+
+  .vp-navbar-dropdown-wrapper.mobile & > a {
+    font-size: 15px;
+    line-height: 2rem;
+  }
+}
+
+.vp-navbar-dropdown-subtitle {
+  margin: 0.45rem 0 0;
+  padding: 1rem 0 0.45rem;
+  border-top: 1px solid var(--vp-c-gutter);
+  font-size: 0.9rem;
+
+  .vp-navbar-dropdown-wrapper.mobile & {
+    margin-top: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    border-top: 0;
+
+    font-size: 15px;
+    line-height: 2rem;
+  }
+
+  .vp-navbar-dropdown-item:first-child & {
+    margin-top: 0;
+    padding-top: 0;
+    border-top: 0;
+  }
+
+  > span {
+    padding: 0 1.5rem 0 1.25rem;
+  }
+
+  > a {
+    font-weight: inherit;
+
+    &.route-link-active {
+      &::after {
+        display: none;
+      }
+    }
+  }
+}
+
+.vp-navbar-dropdown-subitem-wrapper {
+  padding: 0;
+  list-style: none;
+}
+
+.vp-navbar-dropdown-subitem {
+  font-size: 0.9em;
+
+  .vp-navbar-dropdown-wrapper.mobile & {
+    padding-left: 1rem;
+    font-size: 14px;
+  }
+}
+</style>
diff --git a/docs/.vuepress/components/VPSidebarItem.vue b/docs/.vuepress/components/VPSidebarItem.vue
new file mode 100644
index 0000000000..c49564fdcc
--- /dev/null
+++ b/docs/.vuepress/components/VPSidebarItem.vue
@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import VPAutoLink from '@theme/VPAutoLink.vue'
+import VPDropdownTransition from '@theme/VPDropdownTransition.vue'
+import { isActiveSidebarItem } from '@theme/isActiveSidebarItem'
+import type { SidebarItem } from '@vuepress/theme-default/client'
+import { useToggle } from '@vueuse/core'
+import { computed, nextTick, onBeforeUnmount, toRefs } from 'vue'
+import { useRoute, useRouter } from 'vuepress/client'
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * The sidebar item to be rendered
+     */
+    item: SidebarItem
+    /**
+     * The depth of the current sidebar item
+     */
+    depth?: number
+  }>(),
+  { depth: 0 },
+)
+
+const { item, depth } = toRefs(props)
+const route = useRoute()
+const router = useRouter()
+
+const collapsible = computed(
+  () => 'collapsible' in item.value && item.value.collapsible,
+)
+const isActive = computed(() => isActiveSidebarItem(item.value, route))
+const itemClass = computed(() => ({
+  'vp-sidebar-item': true,
+  'vp-sidebar-heading': depth.value === 0,
+  'active': isActive.value,
+  'collapsible': collapsible.value,
+}))
+
+const isOpenDefault = computed(() =>
+  collapsible.value ? isActive.value : true,
+)
+// eslint-disable-next-line vue/no-ref-object-reactivity-loss
+const [isOpen, toggleIsOpen] = useToggle(isOpenDefault.value)
+const onClick = (e: Event): void => {
+  if (collapsible.value) {
+    e.preventDefault()
+    // toggle open status on click
+    toggleIsOpen()
+  }
+}
+
+// reset open status after navigation
+const unregisterRouterHook = router.afterEach(() => {
+  void nextTick(() => {
+    isOpen.value = isOpenDefault.value
+  })
+})
+onBeforeUnmount(() => {
+  unregisterRouterHook()
+})
+</script>
+
+<template>
+  <li>
+    <VPAutoLink v-if="item.link" :class="itemClass" :config="item" />
+    <p
+      v-else
+      tabindex="0"
+      :class="itemClass"
+      @click="onClick"
+      @keydown.enter="onClick"
+    >
+      <VPIcon v-if="item.icon" :icon="item.icon" />
+      {{ item.text }}
+      <span
+        v-if="collapsible"
+        class="arrow"
+        :class="isOpen ? 'down' : 'right'"
+      />
+    </p>
+
+    <VPDropdownTransition v-if="'children' in item && item.children.length">
+      <ul v-show="isOpen" class="vp-sidebar-children">
+        <VPSidebarItem
+          v-for="child in item.children"
+          :key="`${depth}${child.text}${child.link}`"
+          :item="child"
+          :depth="depth + 1"
+        />
+      </ul>
+    </VPDropdownTransition>
+  </li>
+</template>
+
+<style lang="scss">
+@use '@vuepress/theme-default/styles/mixins';
+@use '@vuepress/theme-default/styles/variables' as *;
+
+.vp-sidebar-item {
+  border-left: 0.25rem solid transparent;
+  color: var(--vp-c-text);
+  cursor: default;
+
+  &:focus-visible {
+    outline-width: 1px;
+    outline-offset: -1px;
+  }
+
+  &.vp-sidebar-heading {
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0;
+    padding: 0.35rem 1.5rem 0.35rem 1.25rem;
+
+    font-weight: bold;
+    font-size: 1.1em;
+
+    transition: color 0.15s ease;
+
+    + .vp-sidebar-children {
+      @include mixins.dropdown-wrapper;
+
+      margin-bottom: 0.75rem;
+    }
+  }
+
+  &.collapsible {
+    cursor: pointer;
+  }
+
+  &:not(.vp-sidebar-heading) {
+    display: inline-block;
+
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0;
+    padding: 0.35rem 1rem 0.35rem 2rem;
+
+    font-weight: 400;
+    font-size: 1em;
+    line-height: 1.4;
+
+    + .vp-sidebar-children {
+      padding-left: 1rem;
+      font-size: 0.95em;
+    }
+
+    .vp-sidebar-children .vp-sidebar-children & {
+      padding: 0.25rem 1rem 0.25rem 1.75rem;
+
+      &.active {
+        border-left-color: transparent;
+        font-weight: 500;
+      }
+    }
+
+    a.vp-sidebar-heading + .vp-sidebar-children &.active {
+      border-left-color: transparent;
+    }
+  }
+
+  &.active:not(p.vp-sidebar-heading) {
+    border-left-color: var(--vp-c-accent);
+    color: var(--vp-c-accent);
+    font-weight: 600;
+  }
+
+  .vp-icon {
+    margin-inline-end: 0.25em;
+  }
+}
+
+a.vp-sidebar-item {
+  cursor: pointer;
+
+  &:hover {
+    color: var(--vp-c-accent);
+  }
+}
+</style>
diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts
index e0e23dd99d..959fd6d9c0 100644
--- a/docs/.vuepress/config.ts
+++ b/docs/.vuepress/config.ts
@@ -17,6 +17,8 @@ import { redirectPlugin } from '@vuepress/plugin-redirect'
 import { registerComponentsPlugin } from '@vuepress/plugin-register-components'
 import { revealJsPlugin } from '@vuepress/plugin-revealjs'
 import { shikiPlugin } from '@vuepress/plugin-shiki'
+import type { DefaultThemePageData } from '@vuepress/theme-default/lib/shared/page.js'
+import type { Page } from 'vuepress'
 import { defineUserConfig } from 'vuepress'
 import { getDirname, path } from 'vuepress/utils'
 import { head } from './configs/index.js'
@@ -86,7 +88,9 @@ export default defineUserConfig({
       json: true,
       rss: true,
     }),
-    iconPlugin(),
+    iconPlugin({
+      prefix: 'lucide:',
+    }),
     markdownExtPlugin({
       gfm: true,
       component: true,
@@ -186,4 +190,32 @@ export default defineUserConfig({
   ],
 
   pagePatterns: ['**/*.md', '!**/*.snippet.md', '!.vuepress', '!node_modules'],
+
+  alias: {
+    '@theme/VPAutoLink.vue': path.resolve(
+      __dirname,
+      './components/VPAutoLink.vue',
+    ),
+    '@theme/VPNavbarDropdown.vue': path.resolve(
+      __dirname,
+      './components/VPNavbarDropdown.vue',
+    ),
+    '@theme/VPSidebarItem.vue': path.resolve(
+      __dirname,
+      './components/VPSidebarItem.vue',
+    ),
+    '@theme/resolveAutoLink': path.resolve(
+      __dirname,
+      './utils/resolveAutoLink.ts',
+    ),
+  },
+
+  extendsPage: (page: Page<Partial<DefaultThemePageData>>) => {
+    const { icon } = page.frontmatter
+
+    // save icon into route meta
+    if (icon) {
+      page.routeMeta.icon = icon
+    }
+  },
 })
diff --git a/docs/.vuepress/configs/navbar/en.ts b/docs/.vuepress/configs/navbar/en.ts
index 37e4ea548f..4af8cb3b5d 100644
--- a/docs/.vuepress/configs/navbar/en.ts
+++ b/docs/.vuepress/configs/navbar/en.ts
@@ -4,69 +4,41 @@ export const navbarEn: NavbarOptions = [
   {
     text: 'Themes',
     prefix: '/themes/',
+    icon: 'palette',
     children: [
-      {
-        text: 'Theme Guidelines',
-        link: 'guidelines',
-      },
-      {
-        text: 'Default Theme',
-        link: 'default/',
-      },
+      'guidelines',
+      'default/',
       {
         text: 'Hope Theme',
+        icon: 'https://theme-hope-assets.vuejs.press/logo.svg',
         link: 'https://theme-hope.vuejs.press',
       },
       {
         text: 'Plume Theme',
+        icon: 'https://theme-plume.vuejs.press/favicon.ico',
         link: 'https://theme-plume.vuejs.press',
       },
       {
         text: 'Reco Theme',
+        icon: 'https://theme-reco.vuejs.press/favicon.ico',
         link: 'https://theme-reco.vuejs.press/en',
       },
     ],
   },
   {
     text: 'Plugins',
+    icon: 'unplug',
     prefix: '/plugins/',
     children: [
-      {
-        text: 'Common Features',
-        link: 'features/',
-      },
-      {
-        text: 'Markdown',
-        link: 'markdown/',
-      },
-      {
-        text: 'Search',
-        link: 'search/',
-      },
-      {
-        text: 'Blogging',
-        link: 'blog/',
-      },
-      {
-        text: 'PWA',
-        link: 'pwa/',
-      },
-      {
-        text: 'Analytics',
-        link: 'analytics/',
-      },
-      {
-        text: 'SEO',
-        link: 'seo/',
-      },
-      {
-        text: 'Theme Development',
-        link: 'development/',
-      },
-      {
-        text: 'Tools',
-        link: 'tools/',
-      },
+      'features/',
+      'markdown/',
+      'search/',
+      'blog/',
+      'pwa/',
+      'analytics/',
+      'seo/',
+      'development/',
+      'tools/',
     ],
   },
   {
diff --git a/docs/.vuepress/configs/navbar/zh.ts b/docs/.vuepress/configs/navbar/zh.ts
index d7f10106e6..65f00df04c 100644
--- a/docs/.vuepress/configs/navbar/zh.ts
+++ b/docs/.vuepress/configs/navbar/zh.ts
@@ -4,69 +4,41 @@ export const navbarZh: NavbarOptions = [
   {
     text: '主题',
     prefix: '/zh/themes/',
+    icon: 'palette',
     children: [
-      {
-        text: '主题指南',
-        link: 'guidelines',
-      },
-      {
-        text: '默认主题',
-        link: 'default/',
-      },
+      'guidelines',
+      'default/',
       {
         text: 'Hope 主题',
+        icon: 'https://theme-hope-assets.vuejs.press/logo.svg',
         link: 'https://theme-hope.vuejs.press/zh/',
       },
       {
         text: 'Plume 主题',
+        icon: 'https://theme-plume.vuejs.press/favicon.ico',
         link: 'https://theme-plume.vuejs.press',
       },
       {
         text: 'Reco 主题',
+        icon: 'https://theme-reco.vuejs.press/favicon.ico',
         link: 'https://theme-reco.vuejs.press',
       },
     ],
   },
   {
     text: '插件',
+    icon: 'unplug',
     prefix: '/zh/plugins/',
     children: [
-      {
-        text: '常用功能',
-        link: 'features/',
-      },
-      {
-        text: 'Markdown',
-        link: 'markdown/',
-      },
-      {
-        text: '搜索',
-        link: 'search/',
-      },
-      {
-        text: '博客',
-        link: 'blog/',
-      },
-      {
-        text: 'PWA',
-        link: 'pwa/',
-      },
-      {
-        text: '统计分析',
-        link: 'analytics/',
-      },
-      {
-        text: '搜索引擎增强',
-        link: 'seo/',
-      },
-      {
-        text: '主题开发',
-        link: 'development/',
-      },
-      {
-        text: '工具',
-        link: 'tools/',
-      },
+      'features/',
+      'markdown/',
+      'search/',
+      'blog/',
+      'pwa/',
+      'analytics/',
+      'seo/',
+      'development/',
+      'tools/',
     ],
   },
   {
diff --git a/docs/.vuepress/configs/sidebar/en.ts b/docs/.vuepress/configs/sidebar/en.ts
index 3baa3b554b..a472dcdbf3 100644
--- a/docs/.vuepress/configs/sidebar/en.ts
+++ b/docs/.vuepress/configs/sidebar/en.ts
@@ -50,18 +50,21 @@ export const sidebarEn: SidebarOptions = {
   '/plugins/blog/': [
     {
       text: 'Blog',
+      icon: 'la:blog',
       prefix: 'blog/',
       link: 'blog/',
       children: ['guide', 'config'],
     },
     {
       text: 'Comment',
+      icon: 'message-circle-more',
       prefix: 'comment/',
       link: 'comment/',
       children: ['guide', 'giscus/', 'waline/', 'artalk/', 'twikoo/'],
     },
     {
       text: 'Feed',
+      icon: 'rss',
       prefix: 'feed/',
       link: 'feed/',
       children: ['guide', 'config', 'frontmatter', 'channel', 'getter'],
@@ -111,6 +114,7 @@ export const sidebarEn: SidebarOptions = {
     'prismjs',
     {
       text: 'revealjs',
+      icon: 'presentation',
       prefix: 'revealjs/',
       link: 'revealjs/',
       children: ['', 'demo', 'themes'],
@@ -156,6 +160,7 @@ export const sidebarEn: SidebarOptions = {
     'guidelines',
     {
       text: 'Default Theme',
+      icon: 'palette',
       prefix: 'default/',
       link: 'default/',
       children: [
@@ -169,6 +174,21 @@ export const sidebarEn: SidebarOptions = {
         'extending',
       ],
     },
+    {
+      text: 'Hope Theme',
+      icon: 'https://theme-hope-assets.vuejs.press/logo.svg',
+      link: 'https://theme-hope.vuejs.press',
+    },
+    {
+      text: 'Plume Theme',
+      icon: 'https://theme-plume.vuejs.press/favicon.ico',
+      link: 'https://theme-plume.vuejs.press',
+    },
+    {
+      text: 'Reco Theme',
+      icon: 'https://theme-reco.vuejs.press/favicon.ico',
+      link: 'https://theme-reco.vuejs.press/en',
+    },
   ],
 
   '/tools/': [
diff --git a/docs/.vuepress/configs/sidebar/zh.ts b/docs/.vuepress/configs/sidebar/zh.ts
index 3eff93e299..f9f6c4987c 100644
--- a/docs/.vuepress/configs/sidebar/zh.ts
+++ b/docs/.vuepress/configs/sidebar/zh.ts
@@ -50,18 +50,21 @@ export const sidebarZh: SidebarOptions = {
   '/zh/plugins/blog/': [
     {
       text: '博客',
+      icon: 'la:blog',
       prefix: 'blog/',
       link: 'blog/',
       children: ['guide', 'config'],
     },
     {
       text: '评论',
+      icon: 'message-circle-more',
       prefix: 'comment/',
       link: 'comment/',
       children: ['guide', 'giscus/', 'waline/', 'artalk/', 'twikoo/'],
     },
     {
       text: 'Feed',
+      icon: 'rss',
       prefix: 'feed/',
       link: 'feed/',
       children: ['guide', 'config', 'frontmatter', 'channel', 'getter'],
@@ -111,6 +114,7 @@ export const sidebarZh: SidebarOptions = {
     'prismjs',
     {
       text: 'revealjs',
+      icon: 'presentation',
       prefix: 'revealjs/',
       link: 'revealjs/',
       children: ['', 'demo', 'themes'],
@@ -156,6 +160,7 @@ export const sidebarZh: SidebarOptions = {
     'guidelines',
     {
       text: '默认主题',
+      icon: 'palette',
       prefix: 'default/',
       link: 'default/',
       children: [
@@ -169,6 +174,21 @@ export const sidebarZh: SidebarOptions = {
         'extending',
       ],
     },
+    {
+      text: 'Hope 主题',
+      icon: 'https://theme-hope-assets.vuejs.press/logo.svg',
+      link: 'https://theme-hope.vuejs.press/zh/',
+    },
+    {
+      text: 'Plume 主题',
+      icon: 'https://theme-plume.vuejs.press/favicon.ico',
+      link: 'https://theme-plume.vuejs.press',
+    },
+    {
+      text: 'Reco 主题',
+      icon: 'https://theme-reco.vuejs.press/favicon.ico',
+      link: 'https://theme-reco.vuejs.press',
+    },
   ],
 
   '/zh/tools/': [
diff --git a/docs/.vuepress/shims.d.ts b/docs/.vuepress/shims.d.ts
new file mode 100644
index 0000000000..d627d43453
--- /dev/null
+++ b/docs/.vuepress/shims.d.ts
@@ -0,0 +1,7 @@
+declare module '@vuepress/theme-default' {
+  interface NavItemOptions {
+    icon?: string
+  }
+}
+
+export {}
diff --git a/docs/.vuepress/utils/resolveAutoLink.ts b/docs/.vuepress/utils/resolveAutoLink.ts
new file mode 100644
index 0000000000..d51c364d1f
--- /dev/null
+++ b/docs/.vuepress/utils/resolveAutoLink.ts
@@ -0,0 +1,27 @@
+import type { AutoLinkOptions } from '@vuepress/theme-default/client'
+import { resolveRoute } from 'vuepress/client'
+
+/**
+ * Resolve AutoLink props from string
+ *
+ * @example
+ * - Input: '/README.md'
+ * - Output: { text: 'Home', icon: 'home', link: '/' }
+ */
+export const resolveAutoLink = (
+  config: string,
+  currentPath?: string,
+): AutoLinkOptions => {
+  const { notFound, meta, path } = resolveRoute<{
+    title?: string
+    icon?: string
+  }>(config, currentPath)
+
+  return notFound
+    ? { text: path, link: path }
+    : {
+        text: meta.title || path,
+        ...(meta.icon ? { icon: meta.icon } : {}),
+        link: path,
+      }
+}
diff --git a/docs/README.md b/docs/README.md
index 42d26fac41..df250af434 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,13 +1,16 @@
 ---
 home: true
 title: Home
+icon: home
 heroImage: /images/hero.png
 actions:
   - text: Themes
+    icon: palette
     link: ./themes/
     type: primary
 
   - text: Plugins
+    icon: unplug
     link: ./plugins/
     type: primary
 
diff --git a/docs/package.json b/docs/package.json
index aed56aa332..929a4a3109 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -36,6 +36,7 @@
     "@vuepress/plugin-search": "workspace:*",
     "@vuepress/plugin-shiki": "workspace:*",
     "@vuepress/theme-default": "workspace:*",
+    "@vueuse/core": "^12.3.0",
     "katex": "0.16.19",
     "mathjax-full": "3.2.2",
     "sass-embedded": "^1.83.1",
diff --git a/docs/plugins/README.md b/docs/plugins/README.md
index 357366d9c5..68eebd7575 100644
--- a/docs/plugins/README.md
+++ b/docs/plugins/README.md
@@ -1,3 +1,7 @@
+---
+icon: unplug
+---
+
 # Plugins
 
 <Catalog :level="2" hideHeading />
diff --git a/docs/plugins/analytics/README.md b/docs/plugins/analytics/README.md
index 341eeb0e8d..638b4defe8 100644
--- a/docs/plugins/analytics/README.md
+++ b/docs/plugins/analytics/README.md
@@ -1,3 +1,7 @@
+---
+icon: chart-no-axes-combined
+---
+
 # Analytics Plugins
 
 <Catalog :level="1" />
diff --git a/docs/plugins/analytics/baidu-analytics.md b/docs/plugins/analytics/baidu-analytics.md
index 565771de03..68172a468a 100644
--- a/docs/plugins/analytics/baidu-analytics.md
+++ b/docs/plugins/analytics/baidu-analytics.md
@@ -1,3 +1,7 @@
+---
+icon: chart-no-axes-combined
+---
+
 # baidu-analytics
 
 <NpmBadge package="@vuepress/plugin-baidu-analytics" />
diff --git a/docs/plugins/analytics/google-analytics.md b/docs/plugins/analytics/google-analytics.md
index 168bc5b798..35b7cd61f2 100644
--- a/docs/plugins/analytics/google-analytics.md
+++ b/docs/plugins/analytics/google-analytics.md
@@ -1,3 +1,7 @@
+---
+icon: chart-no-axes-combined
+---
+
 # google-analytics
 
 <NpmBadge package="@vuepress/plugin-google-analytics" />
diff --git a/docs/plugins/analytics/umami-analytics.md b/docs/plugins/analytics/umami-analytics.md
index 70f317561b..ae7366fd35 100644
--- a/docs/plugins/analytics/umami-analytics.md
+++ b/docs/plugins/analytics/umami-analytics.md
@@ -1,3 +1,7 @@
+---
+icon: chart-no-axes-combined
+---
+
 # umami-analytics
 
 <NpmBadge package="@vuepress/plugin-umami-analytics" />
diff --git a/docs/plugins/blog/README.md b/docs/plugins/blog/README.md
index 5072d7899a..dc8d0b90f5 100644
--- a/docs/plugins/blog/README.md
+++ b/docs/plugins/blog/README.md
@@ -1,3 +1,7 @@
+---
+icon: la:blog
+---
+
 # Blog Plugins
 
 <Catalog :level="1" />
diff --git a/docs/plugins/blog/blog/README.md b/docs/plugins/blog/blog/README.md
index a7d9894727..2274a3a176 100644
--- a/docs/plugins/blog/blog/README.md
+++ b/docs/plugins/blog/blog/README.md
@@ -1,3 +1,7 @@
+---
+icon: la:blog
+---
+
 # blog
 
 <NpmBadge package="@vuepress/plugin-blog" />
diff --git a/docs/plugins/blog/blog/config.md b/docs/plugins/blog/blog/config.md
index 1bfc50c0eb..2ff6753b28 100644
--- a/docs/plugins/blog/blog/config.md
+++ b/docs/plugins/blog/blog/config.md
@@ -1,3 +1,7 @@
+---
+icon: settings-2
+---
+
 # Config
 
 ## Plugin Options
diff --git a/docs/plugins/blog/blog/guide.md b/docs/plugins/blog/blog/guide.md
index fbfeac161f..64ca24943f 100644
--- a/docs/plugins/blog/blog/guide.md
+++ b/docs/plugins/blog/blog/guide.md
@@ -1,8 +1,9 @@
 ---
-title: Guide
 icon: lightbulb
 ---
 
+# Guide
+
 With `@vuepress/plugin-blog`, you can easily bring blog feature into your theme.
 
 ## Collecting Articles
diff --git a/docs/plugins/blog/comment/README.md b/docs/plugins/blog/comment/README.md
index 3971c65072..326d606fc8 100644
--- a/docs/plugins/blog/comment/README.md
+++ b/docs/plugins/blog/comment/README.md
@@ -1,3 +1,7 @@
+---
+icon: message-circle-more
+---
+
 # comment
 
 <NpmBadge package="@vuepress/plugin-comment" />
diff --git a/docs/plugins/blog/comment/guide.md b/docs/plugins/blog/comment/guide.md
index f46ac3dcba..2ed68d06e9 100644
--- a/docs/plugins/blog/comment/guide.md
+++ b/docs/plugins/blog/comment/guide.md
@@ -1,4 +1,5 @@
 ---
+icon: lightbulb
 layout: CommentPage
 ---
 
diff --git a/docs/plugins/blog/feed/README.md b/docs/plugins/blog/feed/README.md
index 3a2e0f56c6..46611a65d1 100644
--- a/docs/plugins/blog/feed/README.md
+++ b/docs/plugins/blog/feed/README.md
@@ -1,3 +1,7 @@
+---
+icon: rss
+---
+
 # feed
 
 <NpmBadge package="@vuepress/plugin-feed" />
diff --git a/docs/plugins/blog/feed/channel.md b/docs/plugins/blog/feed/channel.md
index 2081055072..3385dadc5c 100644
--- a/docs/plugins/blog/feed/channel.md
+++ b/docs/plugins/blog/feed/channel.md
@@ -1,3 +1,7 @@
+---
+icon: tv
+---
+
 # Channel Config
 
 The channel plugin option is used to config the feed channel.
diff --git a/docs/plugins/blog/feed/config.md b/docs/plugins/blog/feed/config.md
index 60a9e94234..3ee57937fe 100644
--- a/docs/plugins/blog/feed/config.md
+++ b/docs/plugins/blog/feed/config.md
@@ -1,3 +1,7 @@
+---
+icon: settings-2
+---
+
 # Plugin Config
 
 ## hostname
diff --git a/docs/plugins/blog/feed/frontmatter.md b/docs/plugins/blog/feed/frontmatter.md
index 971d906c71..c88a656f5e 100644
--- a/docs/plugins/blog/feed/frontmatter.md
+++ b/docs/plugins/blog/feed/frontmatter.md
@@ -1,3 +1,7 @@
+---
+icon: captions
+---
+
 # Frontmatter Config
 
 You can control each feed item generation by setting page frontmatter.
diff --git a/docs/plugins/blog/feed/getter.md b/docs/plugins/blog/feed/getter.md
index 1ee93e30f5..55d6a97037 100644
--- a/docs/plugins/blog/feed/getter.md
+++ b/docs/plugins/blog/feed/getter.md
@@ -1,3 +1,7 @@
+---
+icon: arrow-up-from-line
+---
+
 # Feed Getter
 
 You can take full control of feed items generation by setting `getter` in the plugin options.
diff --git a/docs/plugins/blog/feed/guide.md b/docs/plugins/blog/feed/guide.md
index bff5166712..3cf3212595 100644
--- a/docs/plugins/blog/feed/guide.md
+++ b/docs/plugins/blog/feed/guide.md
@@ -1,3 +1,7 @@
+---
+icon: lightbulb
+---
+
 # Guide
 
 ## Usage
diff --git a/docs/plugins/features/README.md b/docs/plugins/features/README.md
index d432cb4d53..d78c9eebe1 100644
--- a/docs/plugins/features/README.md
+++ b/docs/plugins/features/README.md
@@ -1,3 +1,7 @@
-# New Feature Plugins
+---
+icon: sparkles
+---
+
+# Feature Plugins
 
 <Catalog :level="1" />
diff --git a/docs/plugins/features/back-to-top.md b/docs/plugins/features/back-to-top.md
index db945a8713..7ae169f9ff 100644
--- a/docs/plugins/features/back-to-top.md
+++ b/docs/plugins/features/back-to-top.md
@@ -1,3 +1,7 @@
+---
+icon: arrow-up-to-line
+---
+
 # back-to-top
 
 <NpmBadge package="@vuepress/plugin-back-to-top" />
diff --git a/docs/plugins/features/catalog.md b/docs/plugins/features/catalog.md
index 4273167aa3..c737a38802 100644
--- a/docs/plugins/features/catalog.md
+++ b/docs/plugins/features/catalog.md
@@ -1,3 +1,7 @@
+---
+icon: list-tree
+---
+
 # catalog
 
 <NpmBadge package="@vuepress/plugin-catalog" />
diff --git a/docs/plugins/features/copy-code.md b/docs/plugins/features/copy-code.md
index e49e531e13..e2211a909b 100644
--- a/docs/plugins/features/copy-code.md
+++ b/docs/plugins/features/copy-code.md
@@ -1,3 +1,7 @@
+---
+icon: clipboard-copy
+---
+
 # copy-code
 
 <NpmBadge package="@vuepress/plugin-copy-code" />
diff --git a/docs/plugins/features/copyright.md b/docs/plugins/features/copyright.md
index df2678ff36..271a726c03 100644
--- a/docs/plugins/features/copyright.md
+++ b/docs/plugins/features/copyright.md
@@ -1,3 +1,7 @@
+---
+icon: fa-regular:copyright
+---
+
 # copyright
 
 <NpmBadge package="@vuepress/plugin-copyright" />
diff --git a/docs/plugins/features/icon.md b/docs/plugins/features/icon.md
index df5572a6f1..d55a6afef3 100644
--- a/docs/plugins/features/icon.md
+++ b/docs/plugins/features/icon.md
@@ -1,3 +1,7 @@
+---
+icon: fa6-solid:icons
+---
+
 # icon
 
 <NpmBadge package="@vuepress/plugin-icon" />
diff --git a/docs/plugins/features/medium-zoom.md b/docs/plugins/features/medium-zoom.md
index dffe922f3a..4fa14e1648 100644
--- a/docs/plugins/features/medium-zoom.md
+++ b/docs/plugins/features/medium-zoom.md
@@ -1,3 +1,7 @@
+---
+icon: fullscreen
+---
+
 # medium-zoom
 
 <NpmBadge package="@vuepress/plugin-medium-zoom" />
diff --git a/docs/plugins/features/notice.md b/docs/plugins/features/notice.md
index b27aaec66f..dd1c63a290 100644
--- a/docs/plugins/features/notice.md
+++ b/docs/plugins/features/notice.md
@@ -1,3 +1,7 @@
+---
+icon: bell
+---
+
 # notice
 
 <NpmBadge package="@vuepress/plugin-notice" />
diff --git a/docs/plugins/features/nprogress.md b/docs/plugins/features/nprogress.md
index 6e4f6874fa..3ae94ebd1d 100644
--- a/docs/plugins/features/nprogress.md
+++ b/docs/plugins/features/nprogress.md
@@ -1,3 +1,7 @@
+---
+icon: pajamas:progress
+---
+
 # nprogress {#nprogress-plugin}
 
 <NpmBadge package="@vuepress/plugin-nprogress" />
diff --git a/docs/plugins/features/photo-swipe.md b/docs/plugins/features/photo-swipe.md
index ef0e674124..9fe3d78bf5 100644
--- a/docs/plugins/features/photo-swipe.md
+++ b/docs/plugins/features/photo-swipe.md
@@ -1,3 +1,7 @@
+---
+icon: image-play
+---
+
 # photo-swipe
 
 <NpmBadge package="@vuepress/plugin-photo-swipe" />
diff --git a/docs/plugins/features/watermark.md b/docs/plugins/features/watermark.md
index 4f24569c50..7c1e233164 100644
--- a/docs/plugins/features/watermark.md
+++ b/docs/plugins/features/watermark.md
@@ -1,3 +1,7 @@
+---
+icon: droplet
+---
+
 # watermark
 
 <NpmBadge package="@vuepress/plugin-watermark" />
diff --git a/docs/plugins/markdown/README.md b/docs/plugins/markdown/README.md
index 35d79123a4..6ce3bdcaf7 100644
--- a/docs/plugins/markdown/README.md
+++ b/docs/plugins/markdown/README.md
@@ -1,3 +1,7 @@
+---
+icon: octicon:markdown-16
+---
+
 # Markdown Plugins
 
 <Catalog :level="1" />
diff --git a/docs/plugins/markdown/append-date.md b/docs/plugins/markdown/append-date.md
index b8a2410dd9..573846209d 100644
--- a/docs/plugins/markdown/append-date.md
+++ b/docs/plugins/markdown/append-date.md
@@ -1,3 +1,7 @@
+---
+icon: calendar
+---
+
 # append-date
 
 <NpmBadge package="@vuepress/plugin-append-date" />
diff --git a/docs/plugins/markdown/links-check.md b/docs/plugins/markdown/links-check.md
index 47d7bcdfee..32de317731 100644
--- a/docs/plugins/markdown/links-check.md
+++ b/docs/plugins/markdown/links-check.md
@@ -1,3 +1,7 @@
+---
+icon: list-checks
+---
+
 # links-check
 
 <NpmBadge package="@vuepress/plugin-links-check" />
diff --git a/docs/plugins/markdown/markdown-container.md b/docs/plugins/markdown/markdown-container.md
index 9c830c7363..b225afff7c 100644
--- a/docs/plugins/markdown/markdown-container.md
+++ b/docs/plugins/markdown/markdown-container.md
@@ -1,3 +1,7 @@
+---
+icon: package
+---
+
 # markdown-container
 
 <NpmBadge package="@vuepress/plugin-markdown-container" />
diff --git a/docs/plugins/markdown/markdown-ext.md b/docs/plugins/markdown/markdown-ext.md
index 58f1f70206..614d361912 100644
--- a/docs/plugins/markdown/markdown-ext.md
+++ b/docs/plugins/markdown/markdown-ext.md
@@ -1,3 +1,7 @@
+---
+icon: split
+---
+
 # markdown-ext
 
 <NpmBadge package="@vuepress/plugin-markdown-ext" />
diff --git a/docs/plugins/markdown/markdown-hint.md b/docs/plugins/markdown/markdown-hint.md
index 8cc84fa4c4..4ec3101588 100644
--- a/docs/plugins/markdown/markdown-hint.md
+++ b/docs/plugins/markdown/markdown-hint.md
@@ -1,3 +1,7 @@
+---
+icon: siren
+---
+
 # markdown-hint
 
 <NpmBadge package="@vuepress/plugin-markdown-hint" />
diff --git a/docs/plugins/markdown/markdown-image.md b/docs/plugins/markdown/markdown-image.md
index 1174fec763..cbe5323bf5 100644
--- a/docs/plugins/markdown/markdown-image.md
+++ b/docs/plugins/markdown/markdown-image.md
@@ -1,3 +1,7 @@
+---
+icon: image
+---
+
 # markdown-image
 
 <NpmBadge package="@vuepress/plugin-markdown-image" />
diff --git a/docs/plugins/markdown/markdown-include.md b/docs/plugins/markdown/markdown-include.md
index 85b9cdd9bc..bdab9572d6 100644
--- a/docs/plugins/markdown/markdown-include.md
+++ b/docs/plugins/markdown/markdown-include.md
@@ -1,3 +1,7 @@
+---
+icon: between-horizontal-end
+---
+
 # markdown-include
 
 <NpmBadge package="@vuepress/plugin-markdown-include" />
diff --git a/docs/plugins/markdown/markdown-math.md b/docs/plugins/markdown/markdown-math.md
index 4bd337bb43..e4650da7c6 100644
--- a/docs/plugins/markdown/markdown-math.md
+++ b/docs/plugins/markdown/markdown-math.md
@@ -1,3 +1,7 @@
+---
+icon: sigma
+---
+
 # markdown-math
 
 <NpmBadge package="@vuepress/plugin-markdown-math" />
diff --git a/docs/plugins/markdown/markdown-stylize.md b/docs/plugins/markdown/markdown-stylize.md
index 447f4b3992..de02f7fcc6 100644
--- a/docs/plugins/markdown/markdown-stylize.md
+++ b/docs/plugins/markdown/markdown-stylize.md
@@ -1,3 +1,7 @@
+---
+icon: paint-bucket
+---
+
 # markdown-stylize
 
 <NpmBadge package="@vuepress/plugin-markdown-stylize" />
diff --git a/docs/plugins/markdown/markdown-tab.md b/docs/plugins/markdown/markdown-tab.md
index cbb17547c1..3e6b975ed2 100644
--- a/docs/plugins/markdown/markdown-tab.md
+++ b/docs/plugins/markdown/markdown-tab.md
@@ -1,3 +1,7 @@
+---
+icon: columns-2
+---
+
 # markdown-tab
 
 <NpmBadge package="@vuepress/plugin-markdown-tab" />
diff --git a/docs/plugins/markdown/prismjs.md b/docs/plugins/markdown/prismjs.md
index 426efddaf0..78f06260bf 100644
--- a/docs/plugins/markdown/prismjs.md
+++ b/docs/plugins/markdown/prismjs.md
@@ -1,3 +1,7 @@
+---
+icon: pyramid
+---
+
 # prismjs
 
 <NpmBadge package="@vuepress/plugin-prismjs" />
diff --git a/docs/plugins/markdown/revealjs/README.md b/docs/plugins/markdown/revealjs/README.md
index 5d2f876c3b..f2743e1d56 100644
--- a/docs/plugins/markdown/revealjs/README.md
+++ b/docs/plugins/markdown/revealjs/README.md
@@ -1,3 +1,7 @@
+---
+icon: presentation
+---
+
 # revealjs
 
 <NpmBadge package="@vuepress/plugin-revealjs" />
diff --git a/docs/plugins/markdown/revealjs/demo.md b/docs/plugins/markdown/revealjs/demo.md
index 1738d63a25..8ae74e494b 100644
--- a/docs/plugins/markdown/revealjs/demo.md
+++ b/docs/plugins/markdown/revealjs/demo.md
@@ -1,5 +1,6 @@
 ---
 title: Slide Demo
+icon: presentation
 layout: SlidePage
 ---
 
diff --git a/docs/plugins/markdown/revealjs/themes.md b/docs/plugins/markdown/revealjs/themes.md
index dc5237b0a3..37edb5d855 100644
--- a/docs/plugins/markdown/revealjs/themes.md
+++ b/docs/plugins/markdown/revealjs/themes.md
@@ -1,3 +1,7 @@
+---
+icon: palette
+---
+
 # Reveal.js Themes
 
 ## `auto`
diff --git a/docs/plugins/markdown/shiki.md b/docs/plugins/markdown/shiki.md
index 59feca984f..c4ac32bd11 100644
--- a/docs/plugins/markdown/shiki.md
+++ b/docs/plugins/markdown/shiki.md
@@ -1,3 +1,7 @@
+---
+icon: highlighter
+---
+
 # shiki
 
 <NpmBadge package="@vuepress/plugin-shiki" />
diff --git a/docs/plugins/pwa/README.md b/docs/plugins/pwa/README.md
index 0fcfa5b659..6255a2c097 100644
--- a/docs/plugins/pwa/README.md
+++ b/docs/plugins/pwa/README.md
@@ -1,3 +1,7 @@
+---
+icon: layout-grid
+---
+
 # PWA Plugins
 
 <Catalog :level="1" />
diff --git a/docs/plugins/pwa/pwa/README.md b/docs/plugins/pwa/pwa/README.md
index 47595d43e9..0a289778e0 100644
--- a/docs/plugins/pwa/pwa/README.md
+++ b/docs/plugins/pwa/pwa/README.md
@@ -1,3 +1,7 @@
+---
+icon: layout-grid
+---
+
 # pwa
 
 <NpmBadge package="@vuepress/plugin-pwa" />
diff --git a/docs/plugins/pwa/pwa/config.md b/docs/plugins/pwa/pwa/config.md
index 61d01f34b0..bd92442227 100644
--- a/docs/plugins/pwa/pwa/config.md
+++ b/docs/plugins/pwa/pwa/config.md
@@ -1,3 +1,7 @@
+---
+icon: settings-2
+---
+
 # Config
 
 ## Options
diff --git a/docs/plugins/pwa/pwa/guide.md b/docs/plugins/pwa/pwa/guide.md
index e39a628da0..421d9229dc 100644
--- a/docs/plugins/pwa/pwa/guide.md
+++ b/docs/plugins/pwa/pwa/guide.md
@@ -1,3 +1,7 @@
+---
+icon: lightbulb
+---
+
 # Guide
 
 ## Intro
diff --git a/docs/plugins/pwa/remove-pwa.md b/docs/plugins/pwa/remove-pwa.md
index b6fba249db..9d1ccce965 100644
--- a/docs/plugins/pwa/remove-pwa.md
+++ b/docs/plugins/pwa/remove-pwa.md
@@ -1,3 +1,7 @@
+---
+icon: trash-2
+---
+
 # remove-pwa
 
 <NpmBadge package="@vuepress/plugin-remove-pwa" />
diff --git a/docs/plugins/search/README.md b/docs/plugins/search/README.md
new file mode 100644
index 0000000000..9c4959dd43
--- /dev/null
+++ b/docs/plugins/search/README.md
@@ -0,0 +1,7 @@
+---
+icon: search
+---
+
+# Search Plugins
+
+<Catalog :level="1" />
diff --git a/docs/plugins/search/docsearch.md b/docs/plugins/search/docsearch.md
index 2229d53095..4376840d1b 100644
--- a/docs/plugins/search/docsearch.md
+++ b/docs/plugins/search/docsearch.md
@@ -1,3 +1,7 @@
+---
+icon: search
+---
+
 # docsearch
 
 <NpmBadge package="@vuepress/plugin-docsearch" />
diff --git a/docs/plugins/search/guidelines.md b/docs/plugins/search/guidelines.md
index aa6a2864a0..357728485f 100644
--- a/docs/plugins/search/guidelines.md
+++ b/docs/plugins/search/guidelines.md
@@ -1,3 +1,7 @@
+---
+icon: signpost
+---
+
 # Search Plugin Guidelines
 
 To make VuePress theme support search plugins out of box, we have a set of guidelines that should be followed when creating a search plugin.
diff --git a/docs/plugins/search/search.md b/docs/plugins/search/search.md
index a4eca355f3..81d0da6297 100644
--- a/docs/plugins/search/search.md
+++ b/docs/plugins/search/search.md
@@ -1,3 +1,7 @@
+---
+icon: search
+---
+
 # search
 
 <NpmBadge package="@vuepress/plugin-search" />
diff --git a/docs/plugins/search/slimsearch.md b/docs/plugins/search/slimsearch.md
index 664d2057a0..f169f6d822 100644
--- a/docs/plugins/search/slimsearch.md
+++ b/docs/plugins/search/slimsearch.md
@@ -1,3 +1,7 @@
+---
+icon: search
+---
+
 # slimsearch
 
 <NpmBadge package="@vuepress/plugin-slimsearch" />
diff --git a/docs/themes/README.md b/docs/themes/README.md
index 396781cf1e..4030f8126f 100644
--- a/docs/themes/README.md
+++ b/docs/themes/README.md
@@ -1,3 +1,7 @@
+---
+icon: palette
+---
+
 # Themes
 
 <Catalog :level="1" />
diff --git a/docs/themes/default/README.md b/docs/themes/default/README.md
index 1c80f4a933..3a49f3ee6a 100644
--- a/docs/themes/default/README.md
+++ b/docs/themes/default/README.md
@@ -1,3 +1,7 @@
+---
+icon: palette
+---
+
 # theme-default
 
 <NpmBadge package="@vuepress/theme-default" />
diff --git a/docs/themes/default/components.md b/docs/themes/default/components.md
index 25796ce21b..27477e7e1e 100644
--- a/docs/themes/default/components.md
+++ b/docs/themes/default/components.md
@@ -1,3 +1,7 @@
+---
+icon: puzzle
+---
+
 # Built-in Components
 
 <NpmBadge package="@vuepress/theme-default" />
diff --git a/docs/themes/default/config.md b/docs/themes/default/config.md
index 28b224a051..4d22715e82 100644
--- a/docs/themes/default/config.md
+++ b/docs/themes/default/config.md
@@ -1,3 +1,7 @@
+---
+icon: settings-2
+---
+
 # Config
 
 ## Basic Config
diff --git a/docs/themes/default/extending.md b/docs/themes/default/extending.md
index 857d3ae34a..bc2e6bce24 100644
--- a/docs/themes/default/extending.md
+++ b/docs/themes/default/extending.md
@@ -1,3 +1,7 @@
+---
+icon: cable
+---
+
 # Extending
 
 VuePress default theme is widely used by users, so it is designed to be extendable, allowing users to make their own customization with ease.
diff --git a/docs/themes/default/frontmatter.md b/docs/themes/default/frontmatter.md
index 27c1c3c449..e7c8715db8 100644
--- a/docs/themes/default/frontmatter.md
+++ b/docs/themes/default/frontmatter.md
@@ -1,3 +1,7 @@
+---
+icon: captions
+---
+
 # Frontmatter
 
 <NpmBadge package="@vuepress/theme-default" />
diff --git a/docs/themes/default/locale.md b/docs/themes/default/locale.md
index e52375d872..7130ae6461 100644
--- a/docs/themes/default/locale.md
+++ b/docs/themes/default/locale.md
@@ -1,3 +1,7 @@
+---
+icon: languages
+---
+
 # Locale Config
 
 These options configure locale-related texts.
diff --git a/docs/themes/default/markdown.md b/docs/themes/default/markdown.md
index 88235b4dd9..23721a694f 100644
--- a/docs/themes/default/markdown.md
+++ b/docs/themes/default/markdown.md
@@ -1,3 +1,7 @@
+---
+icon: octicon:markdown-16
+---
+
 # Markdown
 
 <NpmBadge package="@vuepress/theme-default" />
diff --git a/docs/themes/default/plugin.md b/docs/themes/default/plugin.md
index 026ddf8ca7..b311e862e2 100644
--- a/docs/themes/default/plugin.md
+++ b/docs/themes/default/plugin.md
@@ -1,3 +1,7 @@
+---
+icon: unplug
+---
+
 # Plugins Config
 
 You can configure the plugins that used by default theme with `themePlugins`.
diff --git a/docs/themes/default/styles.md b/docs/themes/default/styles.md
index 02cce4931b..3a4127ff78 100644
--- a/docs/themes/default/styles.md
+++ b/docs/themes/default/styles.md
@@ -1,3 +1,7 @@
+---
+icon: paintbrush-vertical
+---
+
 # Styles
 
 <NpmBadge package="@vuepress/theme-default" />
diff --git a/docs/themes/guidelines.md b/docs/themes/guidelines.md
index f639add180..b6a2eebb9e 100644
--- a/docs/themes/guidelines.md
+++ b/docs/themes/guidelines.md
@@ -1,3 +1,7 @@
+---
+icon: signpost
+---
+
 # Theme Guidelines
 
 To avoid theme developers and users setting unneeded options, we have a set of guidelines that should be followed when creating a theme.
diff --git a/docs/zh/README.md b/docs/zh/README.md
index 7b4fd86e01..cf2a495753 100644
--- a/docs/zh/README.md
+++ b/docs/zh/README.md
@@ -1,13 +1,16 @@
 ---
 home: true
 title: 首页
+icon: home
 heroImage: /images/hero.png
 actions:
   - text: 主题
+    icon: palette
     link: ./themes/
     type: primary
 
   - text: 插件
+    icon: unplug
     link: ./plugins/
     type: primary
 
diff --git a/docs/zh/plugins/README.md b/docs/zh/plugins/README.md
index 7d01d6f43a..5cbaef8a73 100644
--- a/docs/zh/plugins/README.md
+++ b/docs/zh/plugins/README.md
@@ -1,3 +1,7 @@
+---
+icon: unplug
+---
+
 # 插件
 
 <Catalog :level="2" hideHeading />
diff --git a/docs/zh/plugins/analytics/README.md b/docs/zh/plugins/analytics/README.md
index 57ba9d775f..2919067f2a 100644
--- a/docs/zh/plugins/analytics/README.md
+++ b/docs/zh/plugins/analytics/README.md
@@ -1,3 +1,7 @@
+---
+icon: chart-no-axes-combined
+---
+
 # 统计分析插件
 
 <Catalog :level="1" />
diff --git a/docs/zh/plugins/analytics/baidu-analytics.md b/docs/zh/plugins/analytics/baidu-analytics.md
index dc709452e4..98f9a69250 100644
--- a/docs/zh/plugins/analytics/baidu-analytics.md
+++ b/docs/zh/plugins/analytics/baidu-analytics.md
@@ -1,3 +1,7 @@
+---
+icon: chart-no-axes-combined
+---
+
 # baidu-analytics
 
 <NpmBadge package="@vuepress/plugin-baidu-analytics" />
diff --git a/docs/zh/plugins/analytics/google-analytics.md b/docs/zh/plugins/analytics/google-analytics.md
index cf26060848..0f16df42f3 100644
--- a/docs/zh/plugins/analytics/google-analytics.md
+++ b/docs/zh/plugins/analytics/google-analytics.md
@@ -1,3 +1,7 @@
+---
+icon: chart-no-axes-combined
+---
+
 # google-analytics
 
 <NpmBadge package="@vuepress/plugin-google-analytics" />
diff --git a/docs/zh/plugins/analytics/umami-analytics.md b/docs/zh/plugins/analytics/umami-analytics.md
index a59cb6ec5f..7cc2da619e 100644
--- a/docs/zh/plugins/analytics/umami-analytics.md
+++ b/docs/zh/plugins/analytics/umami-analytics.md
@@ -1,3 +1,7 @@
+---
+icon: chart-no-axes-combined
+---
+
 # umami-analytics
 
 <NpmBadge package="@vuepress/plugin-umami-analytics" />
diff --git a/docs/zh/plugins/blog/README.md b/docs/zh/plugins/blog/README.md
index a0b65fb777..a503e572c7 100644
--- a/docs/zh/plugins/blog/README.md
+++ b/docs/zh/plugins/blog/README.md
@@ -1,3 +1,7 @@
+---
+icon: la:blog
+---
+
 # 博客插件
 
 <Catalog :level="1" />
diff --git a/docs/zh/plugins/blog/blog/README.md b/docs/zh/plugins/blog/blog/README.md
index 5bb3e5e457..a7d746e090 100644
--- a/docs/zh/plugins/blog/blog/README.md
+++ b/docs/zh/plugins/blog/blog/README.md
@@ -1,3 +1,7 @@
+---
+icon: la:blog
+---
+
 # blog
 
 <NpmBadge package="@vuepress/plugin-blog" />
diff --git a/docs/zh/plugins/blog/blog/config.md b/docs/zh/plugins/blog/blog/config.md
index 48d528f877..9bbdbcd1c4 100644
--- a/docs/zh/plugins/blog/blog/config.md
+++ b/docs/zh/plugins/blog/blog/config.md
@@ -1,3 +1,7 @@
+---
+icon: settings-2
+---
+
 # 配置
 
 ## 插件选项
diff --git a/docs/zh/plugins/blog/blog/guide.md b/docs/zh/plugins/blog/blog/guide.md
index ad029d9d5a..92843c2164 100644
--- a/docs/zh/plugins/blog/blog/guide.md
+++ b/docs/zh/plugins/blog/blog/guide.md
@@ -1,8 +1,9 @@
 ---
-title: 指南
 icon: lightbulb
 ---
 
+# 指南
+
 使用 `@vuepress/plugin-blog`，你可以轻松地将博客功能引入主题。
 
 ## 收集文章并生成信息
diff --git a/docs/zh/plugins/blog/comment/guide.md b/docs/zh/plugins/blog/comment/guide.md
index 750a51659d..6cf55c40a7 100644
--- a/docs/zh/plugins/blog/comment/guide.md
+++ b/docs/zh/plugins/blog/comment/guide.md
@@ -1,4 +1,5 @@
 ---
+icon: lightbulb
 layout: CommentPage
 ---
 
diff --git a/docs/zh/plugins/blog/feed/README.md b/docs/zh/plugins/blog/feed/README.md
index 7f4b0b4c19..4932fad6f9 100644
--- a/docs/zh/plugins/blog/feed/README.md
+++ b/docs/zh/plugins/blog/feed/README.md
@@ -1,3 +1,7 @@
+---
+icon: rss
+---
+
 # feed
 
 <NpmBadge package="@vuepress/plugin-feed" />
diff --git a/docs/zh/plugins/blog/feed/channel.md b/docs/zh/plugins/blog/feed/channel.md
index 09497d62f7..33dc8bd386 100644
--- a/docs/zh/plugins/blog/feed/channel.md
+++ b/docs/zh/plugins/blog/feed/channel.md
@@ -1,3 +1,7 @@
+---
+icon: tv
+---
+
 # 频道设置
 
 `channel` 插件选项用于配置 feed 的频道。
diff --git a/docs/zh/plugins/blog/feed/config.md b/docs/zh/plugins/blog/feed/config.md
index 3f791db917..dced1e476a 100644
--- a/docs/zh/plugins/blog/feed/config.md
+++ b/docs/zh/plugins/blog/feed/config.md
@@ -1,3 +1,7 @@
+---
+icon: settings-2
+---
+
 # 插件配置
 
 ## hostname
diff --git a/docs/zh/plugins/blog/feed/frontmatter.md b/docs/zh/plugins/blog/feed/frontmatter.md
index 982e69d2b0..303193b3e3 100644
--- a/docs/zh/plugins/blog/feed/frontmatter.md
+++ b/docs/zh/plugins/blog/feed/frontmatter.md
@@ -1,3 +1,7 @@
+---
+icon: captions
+---
+
 # Frontmatter 配置
 
 你可以通过配置每个页面的 Frontmatter，来对每个 Feed 项目生成进行单独的控制。
diff --git a/docs/zh/plugins/blog/feed/getter.md b/docs/zh/plugins/blog/feed/getter.md
index 3d1812418d..2c15d6114a 100644
--- a/docs/zh/plugins/blog/feed/getter.md
+++ b/docs/zh/plugins/blog/feed/getter.md
@@ -1,3 +1,7 @@
+---
+icon: arrow-up-from-line
+---
+
 # Feed 获取器
 
 你可以通过控制插件选项中的 `getter` 来完全控制 Feed 项目的生成。
diff --git a/docs/zh/plugins/blog/feed/guide.md b/docs/zh/plugins/blog/feed/guide.md
index df6ae764ae..247312469d 100644
--- a/docs/zh/plugins/blog/feed/guide.md
+++ b/docs/zh/plugins/blog/feed/guide.md
@@ -1,3 +1,7 @@
+---
+icon: lightbulb
+---
+
 # 指南
 
 ## 使用
diff --git a/docs/zh/plugins/features/README.md b/docs/zh/plugins/features/README.md
index ca60e45d9d..e85b9b9a4b 100644
--- a/docs/zh/plugins/features/README.md
+++ b/docs/zh/plugins/features/README.md
@@ -1,3 +1,7 @@
-# 新功能插件
+---
+icon: sparkles
+---
+
+# 功能插件
 
 <Catalog :level="1" />
diff --git a/docs/zh/plugins/features/back-to-top.md b/docs/zh/plugins/features/back-to-top.md
index 03b6156a92..27617ed1a4 100644
--- a/docs/zh/plugins/features/back-to-top.md
+++ b/docs/zh/plugins/features/back-to-top.md
@@ -1,3 +1,7 @@
+---
+icon: arrow-up-to-line
+---
+
 # back-to-top
 
 <NpmBadge package="@vuepress/plugin-back-to-top" />
diff --git a/docs/zh/plugins/features/catalog.md b/docs/zh/plugins/features/catalog.md
index a1839fb08f..0b21ee11fe 100644
--- a/docs/zh/plugins/features/catalog.md
+++ b/docs/zh/plugins/features/catalog.md
@@ -1,3 +1,7 @@
+---
+icon: list-tree
+---
+
 # catalog
 
 <NpmBadge package="@vuepress/plugin-catalog" />
diff --git a/docs/zh/plugins/features/copy-code.md b/docs/zh/plugins/features/copy-code.md
index 436ffb092f..3f3c331c16 100644
--- a/docs/zh/plugins/features/copy-code.md
+++ b/docs/zh/plugins/features/copy-code.md
@@ -1,3 +1,7 @@
+---
+icon: clipboard-copy
+---
+
 # copy-code
 
 <NpmBadge package="@vuepress/plugin-copy-code" />
diff --git a/docs/zh/plugins/features/copyright.md b/docs/zh/plugins/features/copyright.md
index 67cbe76e81..8bbf2f5a53 100644
--- a/docs/zh/plugins/features/copyright.md
+++ b/docs/zh/plugins/features/copyright.md
@@ -1,3 +1,7 @@
+---
+icon: fa-regular:copyright
+---
+
 # copyright
 
 <NpmBadge package="@vuepress/plugin-copyright" />
diff --git a/docs/zh/plugins/features/icon.md b/docs/zh/plugins/features/icon.md
index a21f1d4ddf..b6ee394156 100644
--- a/docs/zh/plugins/features/icon.md
+++ b/docs/zh/plugins/features/icon.md
@@ -1,3 +1,7 @@
+---
+icon: fa6-solid:icons
+---
+
 # icon
 
 <NpmBadge package="@vuepress/plugin-icon" />
diff --git a/docs/zh/plugins/features/medium-zoom.md b/docs/zh/plugins/features/medium-zoom.md
index 4d94946933..59614f47c2 100644
--- a/docs/zh/plugins/features/medium-zoom.md
+++ b/docs/zh/plugins/features/medium-zoom.md
@@ -1,3 +1,7 @@
+---
+icon: fullscreen
+---
+
 # medium-zoom
 
 <NpmBadge package="@vuepress/plugin-medium-zoom" />
diff --git a/docs/zh/plugins/features/notice.md b/docs/zh/plugins/features/notice.md
index d8334ef205..941829b133 100644
--- a/docs/zh/plugins/features/notice.md
+++ b/docs/zh/plugins/features/notice.md
@@ -1,3 +1,7 @@
+---
+icon: bell
+---
+
 # notice
 
 <NpmBadge package="@vuepress/plugin-notice" />
diff --git a/docs/zh/plugins/features/nprogress.md b/docs/zh/plugins/features/nprogress.md
index 2e1a600bf9..12a17f6586 100644
--- a/docs/zh/plugins/features/nprogress.md
+++ b/docs/zh/plugins/features/nprogress.md
@@ -1,12 +1,8 @@
 ---
-title: nprogress
+icon: pajamas:progress
 ---
 
-<!-- `# nprogress` 会被渲染成 `<h1 id="nprogress">` ，导致 id 和 nprogress 进度条冲突 （有点蠢） -->
-
-<!-- 所以我们在 h1 标题后添加一个 '插件' 后缀，然后通过 title frontmatter 来设置页面标题 -->
-
-# nprogress 插件
+# nprogress {#nprogress-plugin}
 
 <NpmBadge package="@vuepress/plugin-nprogress" />
 
diff --git a/docs/zh/plugins/features/photo-swipe.md b/docs/zh/plugins/features/photo-swipe.md
index b97921f552..95aa6085bf 100644
--- a/docs/zh/plugins/features/photo-swipe.md
+++ b/docs/zh/plugins/features/photo-swipe.md
@@ -1,3 +1,7 @@
+---
+icon: image-play
+---
+
 # photo-swipe
 
 <NpmBadge package="@vuepress/plugin-photo-swipe" />
diff --git a/docs/zh/plugins/features/watermark.md b/docs/zh/plugins/features/watermark.md
index a5ceb2e373..7534e66531 100644
--- a/docs/zh/plugins/features/watermark.md
+++ b/docs/zh/plugins/features/watermark.md
@@ -1,3 +1,7 @@
+---
+icon: droplet
+---
+
 # watermark
 
 <NpmBadge package="@vuepress/plugin-watermark" />
diff --git a/docs/zh/plugins/markdown/README.md b/docs/zh/plugins/markdown/README.md
index 9ecb1d688c..f4cffc6f40 100644
--- a/docs/zh/plugins/markdown/README.md
+++ b/docs/zh/plugins/markdown/README.md
@@ -1,3 +1,7 @@
+---
+icon: octicon:markdown-16
+---
+
 # Markdown 插件
 
 <Catalog :level="1" />
diff --git a/docs/zh/plugins/markdown/append-date.md b/docs/zh/plugins/markdown/append-date.md
index fab5bd20f4..8f092ccb65 100644
--- a/docs/zh/plugins/markdown/append-date.md
+++ b/docs/zh/plugins/markdown/append-date.md
@@ -1,3 +1,7 @@
+---
+icon: calendar
+---
+
 # append-date
 
 <NpmBadge package="@vuepress/plugin-append-date" />
diff --git a/docs/zh/plugins/markdown/links-check.md b/docs/zh/plugins/markdown/links-check.md
index 19054f3dba..0b98af0761 100644
--- a/docs/zh/plugins/markdown/links-check.md
+++ b/docs/zh/plugins/markdown/links-check.md
@@ -1,3 +1,7 @@
+---
+icon: list-checks
+---
+
 # links-check
 
 <NpmBadge package="@vuepress/plugin-links-check" />
diff --git a/docs/zh/plugins/markdown/markdown-container.md b/docs/zh/plugins/markdown/markdown-container.md
index 232e01fb4b..367de3974e 100644
--- a/docs/zh/plugins/markdown/markdown-container.md
+++ b/docs/zh/plugins/markdown/markdown-container.md
@@ -1,3 +1,7 @@
+---
+icon: package
+---
+
 # markdown-container
 
 <NpmBadge package="@vuepress/plugin-markdown-container" />
diff --git a/docs/zh/plugins/markdown/markdown-ext.md b/docs/zh/plugins/markdown/markdown-ext.md
index abb45707dc..2a74ead3cf 100644
--- a/docs/zh/plugins/markdown/markdown-ext.md
+++ b/docs/zh/plugins/markdown/markdown-ext.md
@@ -1,3 +1,7 @@
+---
+icon: split
+---
+
 # markdown-ext
 
 <NpmBadge package="@vuepress/plugin-markdown-ext" />
diff --git a/docs/zh/plugins/markdown/markdown-hint.md b/docs/zh/plugins/markdown/markdown-hint.md
index 0c84405b7b..7abf137065 100644
--- a/docs/zh/plugins/markdown/markdown-hint.md
+++ b/docs/zh/plugins/markdown/markdown-hint.md
@@ -1,3 +1,7 @@
+---
+icon: siren
+---
+
 # markdown-hint
 
 <NpmBadge package="@vuepress/plugin-markdown-hint" />
diff --git a/docs/zh/plugins/markdown/markdown-image.md b/docs/zh/plugins/markdown/markdown-image.md
index 2ada97415a..bec272d5e9 100644
--- a/docs/zh/plugins/markdown/markdown-image.md
+++ b/docs/zh/plugins/markdown/markdown-image.md
@@ -1,3 +1,7 @@
+---
+icon: image
+---
+
 # markdown-image
 
 <NpmBadge package="@vuepress/plugin-markdown-image" />
diff --git a/docs/zh/plugins/markdown/markdown-include.md b/docs/zh/plugins/markdown/markdown-include.md
index a5c93b5c9c..4822366947 100644
--- a/docs/zh/plugins/markdown/markdown-include.md
+++ b/docs/zh/plugins/markdown/markdown-include.md
@@ -1,3 +1,7 @@
+---
+icon: between-horizontal-end
+---
+
 # markdown-include
 
 <NpmBadge package="@vuepress/plugin-markdown-include" />
diff --git a/docs/zh/plugins/markdown/markdown-math.md b/docs/zh/plugins/markdown/markdown-math.md
index a0bd2c4670..91a66d5861 100644
--- a/docs/zh/plugins/markdown/markdown-math.md
+++ b/docs/zh/plugins/markdown/markdown-math.md
@@ -1,3 +1,7 @@
+---
+icon: sigma
+---
+
 # markdown-math
 
 <NpmBadge package="@vuepress/plugin-markdown-math" />
diff --git a/docs/zh/plugins/markdown/markdown-stylize.md b/docs/zh/plugins/markdown/markdown-stylize.md
index c2ae4254c8..0c618f0b8e 100644
--- a/docs/zh/plugins/markdown/markdown-stylize.md
+++ b/docs/zh/plugins/markdown/markdown-stylize.md
@@ -1,3 +1,7 @@
+---
+icon: paint-bucket
+---
+
 # markdown-stylize
 
 <NpmBadge package="@vuepress/plugin-markdown-stylize" />
diff --git a/docs/zh/plugins/markdown/markdown-tab.md b/docs/zh/plugins/markdown/markdown-tab.md
index f8755a5abf..4de892c1cc 100644
--- a/docs/zh/plugins/markdown/markdown-tab.md
+++ b/docs/zh/plugins/markdown/markdown-tab.md
@@ -1,3 +1,7 @@
+---
+icon: columns-2
+---
+
 # markdown-tab
 
 <NpmBadge package="@vuepress/plugin-markdown-tab" />
diff --git a/docs/zh/plugins/markdown/prismjs.md b/docs/zh/plugins/markdown/prismjs.md
index 8fefeee04f..1948971302 100644
--- a/docs/zh/plugins/markdown/prismjs.md
+++ b/docs/zh/plugins/markdown/prismjs.md
@@ -1,3 +1,7 @@
+---
+icon: pyramid
+---
+
 # prismjs
 
 <NpmBadge package="@vuepress/plugin-prismjs" />
diff --git a/docs/zh/plugins/markdown/revealjs/README.md b/docs/zh/plugins/markdown/revealjs/README.md
index fee170e3de..97bf8a7a4b 100644
--- a/docs/zh/plugins/markdown/revealjs/README.md
+++ b/docs/zh/plugins/markdown/revealjs/README.md
@@ -1,3 +1,7 @@
+---
+icon: presentation
+---
+
 # revealjs
 
 <NpmBadge package="@vuepress/plugin-revealjs" />
diff --git a/docs/zh/plugins/markdown/revealjs/demo.md b/docs/zh/plugins/markdown/revealjs/demo.md
index 8508f38ec4..dcf43b6ea5 100644
--- a/docs/zh/plugins/markdown/revealjs/demo.md
+++ b/docs/zh/plugins/markdown/revealjs/demo.md
@@ -1,5 +1,6 @@
 ---
 title: 幻灯片演示
+icon: presentation
 layout: SlidePage
 ---
 
diff --git a/docs/zh/plugins/markdown/revealjs/themes.md b/docs/zh/plugins/markdown/revealjs/themes.md
index 50c9f8ad17..2875dd8f31 100644
--- a/docs/zh/plugins/markdown/revealjs/themes.md
+++ b/docs/zh/plugins/markdown/revealjs/themes.md
@@ -1,3 +1,7 @@
+---
+icon: palette
+---
+
 # 幻灯片主题
 
 ## `auto`
diff --git a/docs/zh/plugins/markdown/shiki.md b/docs/zh/plugins/markdown/shiki.md
index fcd6b8b0bf..413af3d65d 100644
--- a/docs/zh/plugins/markdown/shiki.md
+++ b/docs/zh/plugins/markdown/shiki.md
@@ -1,3 +1,7 @@
+---
+icon: highlighter
+---
+
 # shiki
 
 <NpmBadge package="@vuepress/plugin-shiki" />
diff --git a/docs/zh/plugins/pwa/README.md b/docs/zh/plugins/pwa/README.md
index 664c195d22..87e699efda 100644
--- a/docs/zh/plugins/pwa/README.md
+++ b/docs/zh/plugins/pwa/README.md
@@ -1,3 +1,7 @@
+---
+icon: layout-grid
+---
+
 # 渐进式应用插件
 
 <Catalog :level="1" />
diff --git a/docs/zh/plugins/pwa/pwa/README.md b/docs/zh/plugins/pwa/pwa/README.md
index f4076da622..a4c0e8c107 100644
--- a/docs/zh/plugins/pwa/pwa/README.md
+++ b/docs/zh/plugins/pwa/pwa/README.md
@@ -1,3 +1,7 @@
+---
+icon: layout-grid
+---
+
 # pwa
 
 <NpmBadge package="@vuepress/plugin-pwa" />
diff --git a/docs/zh/plugins/pwa/pwa/config.md b/docs/zh/plugins/pwa/pwa/config.md
index 5e9bd5ac5b..e602a1868c 100644
--- a/docs/zh/plugins/pwa/pwa/config.md
+++ b/docs/zh/plugins/pwa/pwa/config.md
@@ -1,3 +1,7 @@
+---
+icon: settings-2
+---
+
 # 配置
 
 ## 选项
diff --git a/docs/zh/plugins/pwa/pwa/guide.md b/docs/zh/plugins/pwa/pwa/guide.md
index 8d625db491..0ca6f6208b 100644
--- a/docs/zh/plugins/pwa/pwa/guide.md
+++ b/docs/zh/plugins/pwa/pwa/guide.md
@@ -1,3 +1,7 @@
+---
+icon: lightbulb
+---
+
 # 指南
 
 ## 介绍
diff --git a/docs/zh/plugins/pwa/remove-pwa.md b/docs/zh/plugins/pwa/remove-pwa.md
index 0532edad6b..ec3f10fb56 100644
--- a/docs/zh/plugins/pwa/remove-pwa.md
+++ b/docs/zh/plugins/pwa/remove-pwa.md
@@ -1,3 +1,7 @@
+---
+icon: trash-2
+---
+
 # remove-pwa
 
 <NpmBadge package="@vuepress/plugin-remove-pwa" />
diff --git a/docs/zh/plugins/search/README.md b/docs/zh/plugins/search/README.md
index 2a4b232ded..de52eab522 100644
--- a/docs/zh/plugins/search/README.md
+++ b/docs/zh/plugins/search/README.md
@@ -1,3 +1,7 @@
+---
+icon: search
+---
+
 # 搜索插件
 
 <Catalog :level="1" />
diff --git a/docs/zh/plugins/search/docsearch.md b/docs/zh/plugins/search/docsearch.md
index c7ca5622ba..5e5c4beb74 100644
--- a/docs/zh/plugins/search/docsearch.md
+++ b/docs/zh/plugins/search/docsearch.md
@@ -1,3 +1,7 @@
+---
+icon: search
+---
+
 # docsearch
 
 <NpmBadge package="@vuepress/plugin-docsearch" />
diff --git a/docs/zh/plugins/search/guidelines.md b/docs/zh/plugins/search/guidelines.md
index 9db70de162..176b159af9 100644
--- a/docs/zh/plugins/search/guidelines.md
+++ b/docs/zh/plugins/search/guidelines.md
@@ -1,3 +1,7 @@
+---
+icon: signpost
+---
+
 # 搜索插件指南
 
 为了使 VuePress 主题开箱即用地支持搜索插件，我们有一套创建搜索插件时应遵循的指南。
diff --git a/docs/zh/plugins/search/search.md b/docs/zh/plugins/search/search.md
index dce8c03cab..d5468cb5d5 100644
--- a/docs/zh/plugins/search/search.md
+++ b/docs/zh/plugins/search/search.md
@@ -1,3 +1,7 @@
+---
+icon: search
+---
+
 # search
 
 <NpmBadge package="@vuepress/plugin-search" />
diff --git a/docs/zh/plugins/search/slimsearch.md b/docs/zh/plugins/search/slimsearch.md
index adb8f2be57..7c0a692f52 100644
--- a/docs/zh/plugins/search/slimsearch.md
+++ b/docs/zh/plugins/search/slimsearch.md
@@ -1,3 +1,7 @@
+---
+icon: search
+---
+
 # slimsearch
 
 <NpmBadge package="@vuepress/plugin-slimsearch" />
diff --git a/docs/zh/themes/README.md b/docs/zh/themes/README.md
index 753366a863..143dafd294 100644
--- a/docs/zh/themes/README.md
+++ b/docs/zh/themes/README.md
@@ -1,3 +1,7 @@
+---
+icon: palette
+---
+
 # 主题
 
 <Catalog :level="1" />
diff --git a/docs/zh/themes/default/README.md b/docs/zh/themes/default/README.md
index cde86449fe..7f836fa6e8 100644
--- a/docs/zh/themes/default/README.md
+++ b/docs/zh/themes/default/README.md
@@ -1,3 +1,7 @@
+---
+icon: palette
+---
+
 # 默认主题
 
 <NpmBadge package="@vuepress/theme-default" />
diff --git a/docs/zh/themes/default/components.md b/docs/zh/themes/default/components.md
index bcd4f3de1c..7ef25f2c0b 100644
--- a/docs/zh/themes/default/components.md
+++ b/docs/zh/themes/default/components.md
@@ -1,3 +1,7 @@
+---
+icon: puzzle
+---
+
 # 内置组件
 
 <NpmBadge package="@vuepress/theme-default" />
diff --git a/docs/zh/themes/default/config.md b/docs/zh/themes/default/config.md
index a63d65ad65..82621e6b96 100644
--- a/docs/zh/themes/default/config.md
+++ b/docs/zh/themes/default/config.md
@@ -1,3 +1,7 @@
+---
+icon: settings-2
+---
+
 # 配置
 
 ## 基础配置
diff --git a/docs/zh/themes/default/extending.md b/docs/zh/themes/default/extending.md
index 1228ef1a66..c7b965c662 100644
--- a/docs/zh/themes/default/extending.md
+++ b/docs/zh/themes/default/extending.md
@@ -1,3 +1,7 @@
+---
+icon: cable
+---
+
 # 继承
 
 VuePress 默认主题有着大量的用户，因此我们对它进行了一些便于继承的设计，以便用户轻松进行定制化。
diff --git a/docs/zh/themes/default/frontmatter.md b/docs/zh/themes/default/frontmatter.md
index b427d200d6..ba43829f1f 100644
--- a/docs/zh/themes/default/frontmatter.md
+++ b/docs/zh/themes/default/frontmatter.md
@@ -1,3 +1,7 @@
+---
+icon: captions
+---
+
 # Frontmatter
 
 <NpmBadge package="@vuepress/theme-default" />
diff --git a/docs/zh/themes/default/locale.md b/docs/zh/themes/default/locale.md
index fa934dcc26..b756b4920a 100644
--- a/docs/zh/themes/default/locale.md
+++ b/docs/zh/themes/default/locale.md
@@ -1,3 +1,7 @@
+---
+icon: languages
+---
+
 # 语言配置
 
 这些选项用于配置与语言相关的文本。
diff --git a/docs/zh/themes/default/markdown.md b/docs/zh/themes/default/markdown.md
index f6d693a745..a9aeca73d5 100644
--- a/docs/zh/themes/default/markdown.md
+++ b/docs/zh/themes/default/markdown.md
@@ -1,3 +1,7 @@
+---
+icon: octicon:markdown-16
+---
+
 # Markdown
 
 <NpmBadge package="@vuepress/theme-default" />
diff --git a/docs/zh/themes/default/plugin.md b/docs/zh/themes/default/plugin.md
index f8ed385b34..a67d190db5 100644
--- a/docs/zh/themes/default/plugin.md
+++ b/docs/zh/themes/default/plugin.md
@@ -1,3 +1,7 @@
+---
+icon: unplug
+---
+
 # 插件配置
 
 你可以通过 `themePlugins` 设置默认主题使用的插件。
diff --git a/docs/zh/themes/default/styles.md b/docs/zh/themes/default/styles.md
index 9de408a6db..f4beec03b4 100644
--- a/docs/zh/themes/default/styles.md
+++ b/docs/zh/themes/default/styles.md
@@ -1,3 +1,7 @@
+---
+icon: paintbrush-vertical
+---
+
 # 样式
 
 <NpmBadge package="@vuepress/theme-default" />
diff --git a/docs/zh/themes/guidelines.md b/docs/zh/themes/guidelines.md
index 716a35ecb7..49a3c3624d 100644
--- a/docs/zh/themes/guidelines.md
+++ b/docs/zh/themes/guidelines.md
@@ -1,3 +1,7 @@
+---
+icon: signpost
+---
+
 # 主题指南
 
 为了避免主题开发者和用户设置不必要的选项，我们制定了一套主题创建时应遵循的指南。
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ab687b25fc..2bcda5c1c5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -205,6 +205,9 @@ importers:
       '@vuepress/theme-default':
         specifier: workspace:*
         version: link:../themes/theme-default
+      '@vueuse/core':
+        specifier: ^12.3.0
+        version: 12.3.0(typescript@5.7.2)
       katex:
         specifier: 0.16.19
         version: 0.16.19