diff --git a/plugins/plugin-md-power/src/client/components/CodeTabs.vue b/plugins/plugin-md-power/src/client/components/CodeTabs.vue
index 847b83a4..b9f60611 100644
--- a/plugins/plugin-md-power/src/client/components/CodeTabs.vue
+++ b/plugins/plugin-md-power/src/client/components/CodeTabs.vue
@@ -157,6 +157,9 @@ function onTabNavClick(index: number): void {
 
 .vp-code-tab-nav {
   position: relative;
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
   padding: 0 12px;
   font-size: 14px;
   font-weight: 500;
@@ -202,7 +205,7 @@ function onTabNavClick(index: number): void {
 .vp-code-tab-nav .vp-icon {
   width: 18px;
   height: 18px;
-  margin-left: 0;
+  margin: 0;
 }
 
 .vp-code-tab-nav span {
diff --git a/plugins/plugin-md-power/src/shared/icon.ts b/plugins/plugin-md-power/src/shared/icon.ts
index 475bb8cf..70d0bad9 100644
--- a/plugins/plugin-md-power/src/shared/icon.ts
+++ b/plugins/plugin-md-power/src/shared/icon.ts
@@ -62,6 +62,21 @@ export interface IconifyProvider extends IconProviderBase {
    * @default ''
    */
   prefix?: LiteralUnion<IconifyPrefix>
+
+  /**
+   * preload iconify icons
+   *
+   * 预加载 iconify 图标，
+   *
+   *
+   * - `string[]` 需要预加载的图标名称，`collect:name` 格式
+   * - `Record<collect, name[]>` 以 collect 为 key, value 为需要预加载的图标 `name`
+   *    其中，如果 key 为 `preflight` 时，value 为预加载图标的 `collect:name` 格式
+   *
+   * 此配置主要用于开发组件时，在组件中直接使用 `<VPIcon name="xx" />` 时无法触发
+   * 主题的图标本地资源分析功能，通过预加载的方式直接预设为本地资源图标。
+   */
+  preload?: string[] | Record<LiteralUnion<IconifyPrefix | 'preflight'>, string[]>
 }
 
 export type FontAwesomeAssetBuiltIn = 'fontawesome' | 'fontawesome-with-brands'
diff --git a/theme/src/client/components/VPIconify.vue b/theme/src/client/components/VPIconify.vue
index dbbc95d8..247b1973 100644
--- a/theme/src/client/components/VPIconify.vue
+++ b/theme/src/client/components/VPIconify.vue
@@ -26,16 +26,14 @@ const iconName = computed(() => {
   return prefix ? `${prefix}:${name}` : name
 })
 
-const localIconName = computed(() => normalizeIconClassname(iconName.value))
+const classname = computed(() => normalizeIconClassname(iconName.value))
 
 async function loadRemoteIcon() {
-  if (icon.value)
+  if (classname.value || icon.value)
     return
 
-  if (!localIconName.value) {
-    loaded.value = false
-    icon.value = await loadIcon(name)
-  }
+  loaded.value = false
+  icon.value = await loadIcon(name)
   loaded.value = true
 }
 
@@ -45,8 +43,8 @@ if (!__VUEPRESS_SSR__)
 
 <template>
   <span
-    v-if="localIconName"
-    class="vp-icon" :class="[localIconName, extra]"
+    v-if="classname"
+    class="vp-icon" :class="[classname, extra]"
     :style="{ color, ...size }"
     aria-hidden
     data-provider="iconify"
diff --git a/theme/src/client/composables/icons.ts b/theme/src/client/composables/icons.ts
index fd7c6356..d8a43243 100644
--- a/theme/src/client/composables/icons.ts
+++ b/theme/src/client/composables/icons.ts
@@ -2,16 +2,26 @@ import type { Ref } from 'vue'
 import { icons } from '@internal/iconify'
 import { ref } from 'vue'
 
-type NeedBackgroundIcons = string[]
-type IconsDataRef = Ref<NeedBackgroundIcons>
+interface IconsRawData {
+  co: string[]
+  bg: Record<number, string[]>
+  mask: Record<number, string[]>
+}
 
-const iconsData: IconsDataRef = ref(icons)
+interface IconsData {
+  bg: string[]
+  mask: string[]
+}
+
+type IconsDataRef = Ref<IconsData>
+
+const iconsData: IconsDataRef = ref(resolveIconsData(icons))
 
 export const useIconsData = (): IconsDataRef => iconsData
 
 if (__VUEPRESS_DEV__ && (import.meta.webpackHot || import.meta.hot)) {
-  __VUE_HMR_RUNTIME__.updateIcons = (data: NeedBackgroundIcons) => {
-    iconsData.value = data
+  __VUE_HMR_RUNTIME__.updateIcons = (data: IconsRawData) => {
+    iconsData.value = resolveIconsData(data)
   }
 }
 
@@ -21,7 +31,29 @@ export const socialFallbacks: Record<string, string> = {
   weibo: 'sinaweibo',
 }
 
+export function resolveIconsData({ co, bg, mask }: IconsRawData): IconsData {
+  return {
+    bg: processIcons(co, bg),
+    mask: processIcons(co, mask),
+  }
+}
+
 export function normalizeIconClassname(icon: string): string {
   const [collect, name] = icon.split(':')
-  return `vpi-${collect}-${name}${iconsData.value.includes(icon) ? ' bg' : ''}`
+  const iconName = `vpi-${collect}-${name}`
+  if (iconsData.value.bg.includes(icon))
+    return `${iconName} bg`
+  if (iconsData.value.mask.includes(icon))
+    return iconName
+  return ''
+}
+
+function processIcons(collects: string[], raw: Record<number, string[]>): string[] {
+  const data: string[] = []
+  for (const [key, list] of Object.entries(raw)) {
+    const collect = collects[Number(key)]
+    if (collect)
+      data.push(...list.map(icon => `${collect}:${icon}`))
+  }
+  return data
 }
diff --git a/theme/src/client/index.ts b/theme/src/client/index.ts
index 6e994684..a86ddc92 100644
--- a/theme/src/client/index.ts
+++ b/theme/src/client/index.ts
@@ -11,6 +11,7 @@ export { default as VPHomeHero } from './components/Home/VPHomeHero.vue'
 export { default as VPHomeProfile } from './components/Home/VPHomeProfile.vue'
 export { default as VPHomeTextImage } from './components/Home/VPHomeTextImage.vue'
 export { default as VPButton } from './components/VPButton.vue'
+export { default as VPIcon } from './components/VPIcon.vue'
 export { default as VPImage } from './components/VPImage.vue'
 export { default as VPLink } from './components/VPLink.vue'
 
diff --git a/theme/src/client/shim.d.ts b/theme/src/client/shim.d.ts
index ee4f03c1..f1ecf1f9 100644
--- a/theme/src/client/shim.d.ts
+++ b/theme/src/client/shim.d.ts
@@ -74,7 +74,11 @@ declare module '@internal/encrypt' {
 }
 
 declare module '@internal/iconify' {
-  const icons: string[]
+  const icons: {
+    co: string[]
+    bg: Record<number, string[]>
+    mask: Record<number, string[]>
+  }
   export {
     icons,
   }
diff --git a/theme/src/client/styles/social-icons.css b/theme/src/client/styles/social-icons.css
deleted file mode 100644
index e3006005..00000000
--- a/theme/src/client/styles/social-icons.css
+++ /dev/null
@@ -1,89 +0,0 @@
-/* social icons - used under CC0 1.0 from https://simpleicons.org/ */
-.vpi-social-discord {
-  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418Z'/%3E%3C/svg%3E");
-}
-
-.vpi-social-telegram {
-  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z'/%3E%3C/svg%3E");
-}
-
-.vpi-social-facebook {
-  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z'/%3E%3C/svg%3E");
-}
-
-.vpi-social-github {
-  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
-}
-
-.vpi-social-instagram {
-  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.03.084c-1.277.06-2.149.264-2.91.563a5.874 5.874 0 0 0-2.124 1.388 5.878 5.878 0 0 0-1.38 2.127C.321 4.926.12 5.8.064 7.076.008 8.354-.005 8.764.001 12.023c.007 3.259.021 3.667.083 4.947.061 1.277.264 2.149.563 2.911.308.789.72 1.457 1.388 2.123a5.872 5.872 0 0 0 2.129 1.38c.763.295 1.636.496 2.913.552 1.278.056 1.689.069 4.947.063 3.257-.007 3.668-.021 4.947-.082 1.28-.06 2.147-.265 2.91-.563a5.881 5.881 0 0 0 2.123-1.388 5.881 5.881 0 0 0 1.38-2.129c.295-.763.496-1.636.551-2.912.056-1.28.07-1.69.063-4.948-.006-3.258-.02-3.667-.081-4.947-.06-1.28-.264-2.148-.564-2.911a5.892 5.892 0 0 0-1.387-2.123 5.857 5.857 0 0 0-2.128-1.38C19.074.322 18.202.12 16.924.066 15.647.009 15.236-.006 11.977 0 8.718.008 8.31.021 7.03.084m.14 21.693c-1.17-.05-1.805-.245-2.228-.408a3.736 3.736 0 0 1-1.382-.895 3.695 3.695 0 0 1-.9-1.378c-.165-.423-.363-1.058-.417-2.228-.06-1.264-.072-1.644-.08-4.848-.006-3.204.006-3.583.061-4.848.05-1.169.246-1.805.408-2.228.216-.561.477-.96.895-1.382a3.705 3.705 0 0 1 1.379-.9c.423-.165 1.057-.361 2.227-.417 1.265-.06 1.644-.072 4.848-.08 3.203-.006 3.583.006 4.85.062 1.168.05 1.804.244 2.227.408.56.216.96.475 1.382.895.421.42.681.817.9 1.378.165.422.362 1.056.417 2.227.06 1.265.074 1.645.08 4.848.005 3.203-.006 3.583-.061 4.848-.051 1.17-.245 1.805-.408 2.23-.216.56-.477.96-.896 1.38a3.705 3.705 0 0 1-1.378.9c-.422.165-1.058.362-2.226.418-1.266.06-1.645.072-4.85.079-3.204.007-3.582-.006-4.848-.06m9.783-16.192a1.44 1.44 0 1 0 1.437-1.442 1.44 1.44 0 0 0-1.437 1.442M5.839 12.012a6.161 6.161 0 1 0 12.323-.024 6.162 6.162 0 0 0-12.323.024M8 12.008A4 4 0 1 1 12.008 16 4 4 0 0 1 8 12.008'/%3E%3C/svg%3E");
-}
-
-.vpi-social-linkedin {
-  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E");
-}
-
-.vpi-social-mastodon {
-  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z'/%3E%3C/svg%3E");
-}
-
-.vpi-social-npm {
-  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z'/%3E%3C/svg%3E");
-}
-
-.vpi-social-slack {
-  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zm10.122 2.521a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zm-1.268 0a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zm-2.523 10.122a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zm0-1.268a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z'/%3E%3C/svg%3E");
-}
-
-.vpi-social-twitter,
-.vpi-social-x {
-  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'/%3E%3C/svg%3E");
-}
-
-.vpi-social-youtube {
-  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
-}
-
-.vpi-social-qq {
-  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='currentColor' d='M29.11 26.278c-.72.087-2.804-3.296-2.804-3.296c0 1.959-1.009 4.515-3.191 6.362c1.052.325 3.428 1.198 2.863 2.151c-.457.772-7.844.493-9.977.252c-2.133.24-9.52.519-9.977-.252c-.565-.953 1.807-1.826 2.861-2.151c-2.182-1.846-3.191-4.403-3.191-6.362c0 0-2.083 3.384-2.804 3.296c-.335-.041-.776-1.853.584-6.231c.641-2.064 1.375-3.78 2.509-6.611C5.792 6.13 8.811.001 15.999.001c7.109.001 10.197 6.008 10.017 13.435c1.132 2.826 1.869 4.553 2.509 6.611c1.361 4.379.92 6.191.584 6.231z'/%3E%3C/svg%3E");
-}
-
-.vpi-social-weibo {
-  --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M17.525 11.378c1.263.392 2.669 1.336 2.669 3.004c0 2.763-3.98 6.239-9.964 6.239c-4.565 0-9.23-2.213-9.23-5.852c0-1.902 1.204-4.102 3.277-6.177c2.773-2.77 6.004-4.033 7.219-2.816c.537.537.588 1.464.244 2.572c-.178.557.525.25.525.25c2.24-.938 4.196-.994 4.909.027c.38.543.343 1.306-.008 2.19c-.163.407.048.471.36.563zm-7.282 7.939c3.641-.362 6.401-2.592 6.167-4.983c-.237-2.391-3.382-4.038-7.023-3.677c-3.64.36-6.403 2.59-6.167 4.98c.237 2.394 3.382 4.039 7.023 3.68zM6.16 14.438c.754-1.527 2.712-2.39 4.446-1.94c1.793.463 2.707 2.154 1.976 3.8c-.744 1.682-2.882 2.578-4.695 1.993c-1.752-.566-2.493-2.294-1.727-3.853zm1.446 2.587c.568.257 1.325.013 1.676-.55c.346-.568.163-1.217-.407-1.459c-.563-.237-1.291.008-1.64.553c-.354.547-.189 1.202.371 1.456zm2.206-1.808c.219.092.501-.012.628-.231c.123-.22.044-.466-.178-.548c-.216-.084-.486.018-.613.232c-.123.214-.054.458.163.547zM19.873 9.5a.725.725 0 1 1-1.378-.451a1.38 1.38 0 0 0-.288-1.357a1.395 1.395 0 0 0-1.321-.425a.723.723 0 1 1-.303-1.416a2.836 2.836 0 0 1 3.29 3.649zm-3.916-6.575A5.831 5.831 0 0 1 21.5 4.72a5.836 5.836 0 0 1 1.22 5.704a.838.838 0 0 1-1.06.54a.844.844 0 0 1-.542-1.062a4.143 4.143 0 0 0-4.807-5.327a.845.845 0 0 1-.354-1.65z'/%3E%3C/svg%3E");
-}
-
-.vpi-social-bilibili {
-  --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 10a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v6a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4v-6zm5-7l2 3m6-3l-2 3m-7 6l3-1m4 0l3 1m-8 3a1.625 1.625 0 0 0 3 0a1.625 1.625 0 0 0 3 0'/%3E%3C/svg%3E");
-}
-
-.vpi-social-gitlab {
-  --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M105.2 24.9c-3.1-8.9-15.7-8.9-18.9 0L29.8 199.7h132c-.1 0-56.6-174.8-56.6-174.8M.9 287.7c-2.6 8 .3 16.9 7.1 22l247.9 184l-226.2-294zm160.8-88l94.3 294l94.3-294zm349.4 88l-28.8-88l-226.3 294l247.9-184c6.9-5.1 9.7-14 7.2-22M425.7 24.9c-3.1-8.9-15.7-8.9-18.9 0l-56.6 174.8h132z'/%3E%3C/svg%3E");
-}
-
-.vpi-social-docker {
-  --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.983 11.078h2.119a.186.186 0 00.186-.185V9.006a.186.186 0 00-.186-.186h-2.119a.185.185 0 00-.185.185v1.888c0 .102.083.185.185.185m-2.954-5.43h2.118a.186.186 0 00.186-.186V3.574a.186.186 0 00-.186-.185h-2.118a.185.185 0 00-.185.185v1.888c0 .102.082.185.185.185m0 2.716h2.118a.187.187 0 00.186-.186V6.29a.186.186 0 00-.186-.185h-2.118a.185.185 0 00-.185.185v1.887c0 .102.082.185.185.186m-2.93 0h2.12a.186.186 0 00.184-.186V6.29a.185.185 0 00-.185-.185H8.1a.185.185 0 00-.185.185v1.887c0 .102.083.185.185.186m-2.964 0h2.119a.186.186 0 00.185-.186V6.29a.185.185 0 00-.185-.185H5.136a.186.186 0 00-.186.185v1.887c0 .102.084.185.186.186m5.893 2.715h2.118a.186.186 0 00.186-.185V9.006a.186.186 0 00-.186-.186h-2.118a.185.185 0 00-.185.185v1.888c0 .102.082.185.185.185m-2.93 0h2.12a.185.185 0 00.184-.185V9.006a.185.185 0 00-.184-.186h-2.12a.185.185 0 00-.184.185v1.888c0 .102.083.185.185.185m-2.964 0h2.119a.185.185 0 00.185-.185V9.006a.185.185 0 00-.184-.186h-2.12a.186.186 0 00-.186.186v1.887c0 .102.084.185.186.185m-2.92 0h2.12a.185.185 0 00.184-.185V9.006a.185.185 0 00-.184-.186h-2.12a.185.185 0 00-.184.185v1.888c0 .102.082.185.185.185M23.763 9.89c-.065-.051-.672-.51-1.954-.51-.338.001-.676.03-1.01.087-.248-1.7-1.653-2.53-1.716-2.566l-.344-.199-.226.327c-.284.438-.49.922-.612 1.43-.23.97-.09 1.882.403 2.661-.595.332-1.55.413-1.744.42H.751a.751.751 0 00-.75.748 11.376 11.376 0 00.692 4.062c.545 1.428 1.355 2.48 2.41 3.124 1.18.723 3.1 1.137 5.275 1.137.983.003 1.963-.086 2.93-.266a12.248 12.248 0 003.823-1.389c.98-.567 1.86-1.288 2.61-2.136 1.252-1.418 1.998-2.997 2.553-4.4h.221c1.372 0 2.215-.549 2.68-1.009.309-.293.55-.65.707-1.046l.098-.288Z'/%3E%3C/svg%3E");
-}
-
-.vpi-social-juejin {
-  --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='m12 14.316l7.454-5.88l-2.022-1.625L12 11.1l-.004.003l-5.432-4.288l-2.02 1.624l7.452 5.88Zm0-7.247l2.89-2.298L12 2.453l-.004-.005l-2.884 2.318l2.884 2.3Zm0 11.266l-.005.002l-9.975-7.87L0 12.088l.194.156l11.803 9.308l7.463-5.885L24 12.085l-2.023-1.624Z'/%3E%3C/svg%3E");
-}
-
-.vpi-social-zhihu {
-  --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M5.721 0C2.251 0 0 2.25 0 5.719V18.28C0 21.751 2.252 24 5.721 24h12.56C21.751 24 24 21.75 24 18.281V5.72C24 2.249 21.75 0 18.281 0zm1.964 4.078c-.271.73-.5 1.434-.68 2.11h4.587c.545-.006.445 1.168.445 1.171H9.384a58.104 58.104 0 0 1-.112 3.797h2.712c.388.023.393 1.251.393 1.266H9.183a9.223 9.223 0 0 1-.408 2.102l.757-.604c.452.456 1.512 1.712 1.906 2.177c.473.681.063 2.081.063 2.081l-2.794-3.382c-.653 2.518-1.845 3.607-1.845 3.607c-.523.468-1.58.82-2.64.516c2.218-1.73 3.44-3.917 3.667-6.497H4.491c0-.015.197-1.243.806-1.266h2.71c.024-.32.086-3.254.086-3.797H6.598c-.136.406-.158.447-.268.753c-.594 1.095-1.603 1.122-1.907 1.155c.906-1.821 1.416-3.6 1.591-4.064c.425-1.124 1.671-1.125 1.671-1.125M13.078 6h6.377v11.33h-2.573l-2.184 1.373l-.401-1.373h-1.219zm1.313 1.219v8.86h.623l.263.937l1.455-.938h1.456v-8.86z'/%3E%3C/svg%3E");
-}
-
-.vpi-social-douban {
-  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 20h16M5 4h14M8 8h8a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2m8 6l-2 6m-6-3l1 3'/%3E%3C/svg%3E");
-}
-
-.vpi-social-steam {
-  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='currentColor' d='M15.974 0C7.573 0 .682 6.479.031 14.714l8.573 3.547a4.521 4.521 0 0 1 2.552-.786c.083 0 .167.005.25.005l3.813-5.521v-.078c0-3.328 2.703-6.031 6.031-6.031s6.036 2.708 6.036 6.036a6.039 6.039 0 0 1-6.036 6.031h-.135l-5.438 3.88c0 .073.005.141.005.214c0 2.5-2.021 4.526-4.521 4.526c-2.177 0-4.021-1.563-4.443-3.635L.583 20.36c1.901 6.719 8.063 11.641 15.391 11.641c8.833 0 15.995-7.161 15.995-16s-7.161-16-15.995-16zm-5.922 24.281l-1.964-.813a3.413 3.413 0 0 0 1.755 1.667a3.404 3.404 0 0 0 4.443-1.833a3.38 3.38 0 0 0 .005-2.599a3.36 3.36 0 0 0-1.839-1.844a3.38 3.38 0 0 0-2.5-.042l2.026.839c1.276.536 1.88 2 1.349 3.276s-2 1.88-3.276 1.349zm15.219-12.406a4.025 4.025 0 0 0-4.016-4.021a4.02 4.02 0 1 0 0 8.042a4.022 4.022 0 0 0 4.016-4.021m-7.026-.005c0-1.672 1.349-3.021 3.016-3.021s3.026 1.349 3.026 3.021c0 1.667-1.359 3.021-3.026 3.021s-3.016-1.354-3.016-3.021'/%3E%3C/svg%3E");
-}
-
-.vpi-social-stackoverflow {
-  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='currentColor' d='M25.312 29.151v-8.536h2.849V32H2.458V20.615h2.839v8.536zM8.145 26.307h14.324v-2.848H8.145zm.35-6.468l13.975 2.916l.599-2.76L9.1 17.083zm1.812-6.74l12.939 6.037l1.203-2.6l-12.937-6.041l-1.204 2.584zm3.62-6.38L24.88 15.86l1.813-2.163L15.74 4.562l-1.803 2.151zM21 0l-2.328 1.724l8.541 11.473l2.328-1.724z'/%3E%3C/svg%3E");
-}
-
-.vpi-social-xbox {
-  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='currentColor' d='M5.469 28.041A15.907 15.907 0 0 0 16 32c4.036 0 7.719-1.489 10.536-3.959c2.5-2.547-5.755-11.609-10.536-15.219c-4.776 3.609-13.036 12.672-10.531 15.219m14.88-19.202c3.333 3.948 9.979 13.749 8.104 17.213A15.924 15.924 0 0 0 32 16.005c0-4.453-1.817-8.484-4.76-11.38c0 0-.037-.032-.109-.057a1.056 1.056 0 0 0-.376-.057c-.785 0-2.645.577-6.405 4.328zM4.869 4.568c-.072.025-.109.057-.115.057a15.933 15.933 0 0 0-4.755 11.38c0 3.807 1.328 7.297 3.547 10.041c-1.864-3.468 4.771-13.265 8.109-17.208C7.895 5.082 6.03 4.51 5.244 4.51a.901.901 0 0 0-.376.063zM16 4.735s-3.927-2.297-6.995-2.407c-1.203-.041-1.937.391-2.027.453C9.838.86 12.879 0 15.978 0h.021c3.115 0 6.14.86 9.021 2.781c-.089-.063-.819-.495-2.027-.453c-3.068.109-6.995 2.401-6.995 2.401z'/%3E%3C/svg%3E");
-}
diff --git a/theme/src/node/prepare/prepareIcons.ts b/theme/src/node/prepare/prepareIcons.ts
index b2b40f10..cb51aae0 100644
--- a/theme/src/node/prepare/prepareIcons.ts
+++ b/theme/src/node/prepare/prepareIcons.ts
@@ -1,5 +1,5 @@
 import type { App, Page } from 'vuepress'
-import type { IconOptions } from 'vuepress-plugin-md-power'
+import type { IconifyProvider, IconOptions } from 'vuepress-plugin-md-power'
 import type { FriendGroup, FriendsItem, SocialLink, ThemeHomeConfig, ThemeNavItem, ThemeOptions, ThemeSidebar } from '../../shared/index.js'
 import type { FsCache } from '../utils/index.js'
 import { getIconContentCSS, getIconData } from '@iconify/utils'
@@ -14,6 +14,14 @@ interface IconData {
   className: string
   background?: boolean
   content: string
+  collect: string
+  name: string
+}
+
+interface UsageIcons {
+  co: string[]
+  bg: Record<number, string[]>
+  mask: Record<number, string[]>
 }
 
 type CollectMap = Record<string, string[]>
@@ -43,8 +51,9 @@ const socialFallbacks: Record<string, string> = {
 export async function prepareIcons(app: App): Promise<void> {
   perf.mark('prepare:icons:total')
   const options = getThemeConfig()
+  const icons: UsageIcons = { co: [], bg: {}, mask: {} }
   if (!isInstalled) {
-    await writeTemp(app, JS_FILENAME, resolveContent(app, { name: 'icons', content: '[]' }))
+    await writeTemp(app, JS_FILENAME, resolveContent(app, { name: 'icons', content: icons }))
     return
   }
   if (!fsCache && app.env.isDev) {
@@ -54,8 +63,22 @@ export async function prepareIcons(app: App): Promise<void> {
 
   perf.mark('prepare:pages:icons')
 
-  const iconOptions = options.markdown?.icon || {}
+  const iconOptions = (options.markdown?.icon || {}) as IconifyProvider
   const iconList: string[] = []
+
+  // 预加载的图标
+  const preload = iconOptions.preload
+  if (isArray(preload)) {
+    iconList.push(...preload)
+  }
+  else if (isPlainObject(preload)) {
+    const { preflight = [], ...rest } = preload
+    iconList.push(...preflight)
+    for (const [collect, names] of entries(rest)) {
+      iconList.push(...names.map(name => `${collect}:${name}`))
+    }
+  }
+
   app.pages.forEach(page => iconList.push(...getIconsWithPage(page, iconOptions)))
   iconList.push(...getIconWithThemeConfig(options, iconOptions))
 
@@ -92,10 +115,14 @@ export async function prepareIcons(app: App): Promise<void> {
   perf.log('prepare:icons:imports')
 
   let cssCode = ''
-  const shouldBackground: string[] = []
-  for (const [iconName, { className, content, background }] of entries(cache)) {
-    if (background)
-      shouldBackground.push(iconName)
+  for (const [, { className, content, background, collect, name }] of entries(cache)) {
+    if (!icons.co.includes(collect))
+      icons.co.push(collect)
+    const index = icons.co.indexOf(collect)
+    const key = background ? 'bg' : 'mask'
+    icons[key][index] ??= []
+    icons[key][index].push(name)
+
     cssCode += `.${className} {\n  --icon: ${content};\n}\n`
   }
 
@@ -103,7 +130,7 @@ export async function prepareIcons(app: App): Promise<void> {
     writeTemp(app, CSS_FILENAME, cssCode),
     writeTemp(app, JS_FILENAME, resolveContent(app, {
       name: 'icons',
-      content: shouldBackground,
+      content: icons,
       before: `import './iconify.css'`,
     })),
   ])
@@ -299,6 +326,8 @@ async function resolveCollect(collect: string, names: string[]) {
         className: normalizeClassname(icon),
         background,
         content: matched,
+        collect,
+        name,
       }
     }
   }