diff --git a/app/.vitepress/src/assets/style/theme/icon.scss b/app/.vitepress/src/assets/style/theme/icon.scss
new file mode 100644
index 0000000000000000000000000000000000000000..780b2b37759c33798e18488c4209a27279285769
--- /dev/null
+++ b/app/.vitepress/src/assets/style/theme/icon.scss
@@ -0,0 +1,7 @@
+.o-icon {
+  svg {
+    width: 1em;
+    height: 1em;
+  }
+}
+
diff --git a/app/.vitepress/src/assets/style/theme/index.scss b/app/.vitepress/src/assets/style/theme/index.scss
index 424bea698da2c6e531e0be3c5cd157af94a7e4fa..8c939e640f3c471a5a90bb4308867ab22a563623 100644
--- a/app/.vitepress/src/assets/style/theme/index.scss
+++ b/app/.vitepress/src/assets/style/theme/index.scss
@@ -15,3 +15,4 @@
 @use './textarea.scss' as *;
 @use './link.scss' as *;
 @use './breadcrumb.scss' as *;
+@use './icon.scss' as *;
diff --git a/app/.vitepress/src/components/FloatingButton.vue b/app/.vitepress/src/components/FloatingButton.vue
index bd9942d4b126eebc4349d58707cffe6b1ad8a158..942be7c77adee5f3bdeeb95950036be92c4cf0af 100644
--- a/app/.vitepress/src/components/FloatingButton.vue
+++ b/app/.vitepress/src/components/FloatingButton.vue
@@ -93,7 +93,7 @@ onMounted(() => {
       :visible="dialogVisible"
       :phone-half-full="true"
       :style="{ '--dlg-head-padding': '16px 24px 0', '--dlg-body-padding': '24px 24px 16px', '--dlg-padding-body-top': '12px', '--dlg-radius': '4px 4px 0 0' }"
-      class="feedback-mb-dialog"
+      :scroller="false"
       @change="change"
     >
       <FeedbackSlider :show="isShow" @close="change" />
diff --git a/app/.vitepress/src/components/FloatingButtonDocs.vue b/app/.vitepress/src/components/FloatingButtonDocs.vue
index 61f6f1fed70f8be7f493ae282e45bbf99a4c12a9..0d835c01cf46e1c39ce35bf4d13b05afbd5b4c3b 100644
--- a/app/.vitepress/src/components/FloatingButtonDocs.vue
+++ b/app/.vitepress/src/components/FloatingButtonDocs.vue
@@ -443,6 +443,9 @@ const submitArticleFeedback = () => {
 }
 </style>
 <style lang="scss" scoped>
+.o-icon {
+  font-size: 24px;
+}
 .feedback {
   position: fixed;
   bottom: 200px;
@@ -557,6 +560,7 @@ const submitArticleFeedback = () => {
       right: 12px;
       color: var(--o-color-info2);
       cursor: pointer;
+      font-size: 24px;
 
       @include h4;
       transition: all var(--o-duration-m1) var(--o-easing-standard-in);
diff --git a/app/.vitepress/src/components/GiteeViewSource.vue b/app/.vitepress/src/components/GiteeViewSource.vue
index a6f70fd6db467f5f4890ce4dde60afc63c6fa422..7db022e6d7a2076401cbea1f769ce0424d23e156 100644
--- a/app/.vitepress/src/components/GiteeViewSource.vue
+++ b/app/.vitepress/src/components/GiteeViewSource.vue
@@ -81,7 +81,7 @@ watch(isPhone, () => {
   <div class="gitee-view-source">
     <a class="link" :href="giteeUrl" target="_blank" rel="noopener noreferrer">
       <span class="title">{{ t('docs.viewGiteeSource') }}</span>
-      <OIcon><IconOutLink /></OIcon>
+      <OIcon class="icon"><IconOutLink /></OIcon>
     </a>
   </div>
 </template>
@@ -99,8 +99,7 @@ watch(isPhone, () => {
 
     svg {
       color: var(--o-color-link1);
-      width: 16px;
-      height: 16px;
+      font-size: 16px;
       margin-left: 4px;
     }
   }
@@ -124,10 +123,9 @@ watch(isPhone, () => {
     align-items: center;
   }
 
-  svg {
-    width: 16px;
-    height: 16px;
+  .icon {
     margin-left: 8px;
+    font-size: 16px;
   }
 
   @include respond-to('phone') {
diff --git a/app/.vitepress/src/components/doc/DocType.vue b/app/.vitepress/src/components/doc/DocType.vue
index 4f70d233407809b6a37b23dbd2158cd5620366a2..d950e9868b16685f53817d7d87a2155333c19878 100644
--- a/app/.vitepress/src/components/doc/DocType.vue
+++ b/app/.vitepress/src/components/doc/DocType.vue
@@ -148,6 +148,10 @@ const reportDocTypeClick = () => {
   }
 }
 
+.icon {
+  font-size: 24px;
+}
+
 .doc-type {
   max-width: 240px;
   margin-right: 8px;
diff --git a/app/.vitepress/src/components/doc/DocTypeMobile.vue b/app/.vitepress/src/components/doc/DocTypeMobile.vue
index 62352e62078309f2052f7bc30949fea7890f37f1..22b392fb6c1b24249ab67b133f530775fe932af9 100644
--- a/app/.vitepress/src/components/doc/DocTypeMobile.vue
+++ b/app/.vitepress/src/components/doc/DocTypeMobile.vue
@@ -159,6 +159,7 @@ const onClickItem = async (href: string) => {
 
 .icon {
   margin-left: 8px;
+  font-size: 24px;
 }
 
 .doc-type-small-title-mb {
diff --git a/app/.vitepress/src/components/doc/DocVersion.vue b/app/.vitepress/src/components/doc/DocVersion.vue
index bf6b7031beca14eec4cf15f8bf276d86db34b6f9..ee578e34cf8a513b9d74761e548fa4dd941ca35b 100644
--- a/app/.vitepress/src/components/doc/DocVersion.vue
+++ b/app/.vitepress/src/components/doc/DocVersion.vue
@@ -68,6 +68,10 @@ const changeVersion = async (item: { value: string; href?: string }) => {
 </template>
 
 <style lang="scss" scoped>
+.icon {
+  font-size: 24px;
+}
+
 .version-wrap {
   height: 100%;
   display: flex;
diff --git a/app/.vitepress/src/components/doc/DocVersionMobile.vue b/app/.vitepress/src/components/doc/DocVersionMobile.vue
index 916e0f6d30465890c4959826076366e1d8d614b9..e8c75719e4f0464b55ff9dbd55756f84991b7588 100644
--- a/app/.vitepress/src/components/doc/DocVersionMobile.vue
+++ b/app/.vitepress/src/components/doc/DocVersionMobile.vue
@@ -98,6 +98,10 @@ const resetVersion = () => {
 </template>
 
 <style lang="scss" scoped>
+.icon {
+  font-size: 24px;
+}
+
 .version-wrap {
   height: 100%;
   display: flex;
diff --git a/app/.vitepress/src/components/feedback/FloatingButtonHome.vue b/app/.vitepress/src/components/feedback/FloatingButtonHome.vue
index 0bbe74f83965efc54f9433d582ed65ffca493449..93ffee00579a29b77891a10857fc62dd16ec12d7 100644
--- a/app/.vitepress/src/components/feedback/FloatingButtonHome.vue
+++ b/app/.vitepress/src/components/feedback/FloatingButtonHome.vue
@@ -127,6 +127,9 @@ const floatData = ref([
 </template>
 
 <style lang="scss" scoped>
+.o-icon {
+  font-size: 24px;
+}
 .nav-box {
   display: flex;
   flex-direction: column;
diff --git a/app/.vitepress/src/components/header/HeaderCode.vue b/app/.vitepress/src/components/header/HeaderCode.vue
index d2ed7e483986e1a8a0c877e87f74d595a37550f1..06378aa1106c36dc163e99624dda9771e80d775c 100644
--- a/app/.vitepress/src/components/header/HeaderCode.vue
+++ b/app/.vitepress/src/components/header/HeaderCode.vue
@@ -38,10 +38,7 @@ const itemChange = (data: any) => {
 
 <style lang="scss" scoped>
 .icon {
-  svg {
-    width: 16px;
-    height: 16px;
-  }
+  font-size: 16px;
   margin-left: var(--o-gap-1);
 }
 
diff --git a/app/.vitepress/src/components/header/HeaderLanguage.vue b/app/.vitepress/src/components/header/HeaderLanguage.vue
index 53ca4c1c1e8ee94fec8626ca5ed87d2b822d82c9..b9b3a1a6e1151bb7d1e6bb61592396664bc1c284 100644
--- a/app/.vitepress/src/components/header/HeaderLanguage.vue
+++ b/app/.vitepress/src/components/header/HeaderLanguage.vue
@@ -104,10 +104,7 @@ const getLang = (lang: string) => {
 
 <style lang="scss" scoped>
 .icon {
-  svg {
-    width: 16px;
-    height: 16px;
-  }
+  font-size: 16px;
   margin-left: var(--o-gap-1);
 }
 
diff --git a/app/.vitepress/src/components/header/HeaderLogin.vue b/app/.vitepress/src/components/header/HeaderLogin.vue
index 2262f514fb3eb0304e9ab9658524c34f49529ea1..e01d9307a498843f5910ff5930697f61f8df434d 100644
--- a/app/.vitepress/src/components/header/HeaderLogin.vue
+++ b/app/.vitepress/src/components/header/HeaderLogin.vue
@@ -60,16 +60,16 @@ onMounted(async () => {
       </div>
       <template #dropdown>
         <ODropdownItem>
-          <div class="header-user-menu-item" @click="jumpToUserZone">{{ t('header.USER_CENTER') }}</div>
+          <div class="header-user-menu-item" :class="{ 'item-en': locale === 'en' }" @click="jumpToUserZone">{{ t('header.USER_CENTER') }}</div>
         </ODropdownItem>
         <ODropdownItem>
-          <div class="header-user-menu-item" @click="jumpToMsgCenter">
+          <div class="header-user-menu-item" :class="{ 'item-en': locale === 'en' }" @click="jumpToMsgCenter">
             <OBadge v-if="unreadMsgCount" :value="unreadMsgCount" color="danger">{{ t('header.MESSAGE_CENTER') }}</OBadge>
             <span v-else>{{ t('header.MESSAGE_CENTER') }}</span>
           </div>
         </ODropdownItem>
         <ODropdownItem>
-          <div class="header-user-menu-item" @click="logout">{{ t('header.LOGOUT') }}</div>
+          <div class="header-user-menu-item" :class="{ 'item-en': locale === 'en' }" @click="logout">{{ t('header.LOGOUT') }}</div>
         </ODropdownItem>
       </template>
     </ODropdown>
@@ -120,6 +120,10 @@ onMounted(async () => {
   text-align: center;
 }
 
+.header-user-menu-item.item-en {
+  min-width: 188px;
+}
+
 .user-dropdown {
   .o-dropdown-item {
     --dropdown-item-padding: 8px 0;
@@ -128,10 +132,7 @@ onMounted(async () => {
 
 .login-btn {
   color: var(--o-color-info1);
+  font-size: var(--o-icon_size-s);
   cursor: pointer;
-  svg {
-    width: var(--o-icon_size-s);
-    height: var(--o-icon_size-s);
-  }
 }
 </style>
diff --git a/app/.vitepress/src/components/header/HeaderNav.vue b/app/.vitepress/src/components/header/HeaderNav.vue
index f70173a5b3de0b09d6e91a9cd7e8cb3e8620b76a..cfb4ab41e08842e2754dd869dbe8f1fac6954ead 100644
--- a/app/.vitepress/src/components/header/HeaderNav.vue
+++ b/app/.vitepress/src/components/header/HeaderNav.vue
@@ -442,8 +442,7 @@ const reportNavClick = (path: string[]) => {
       }
 
       .icon {
-        height: 16px;
-        width: 16px;
+        font-size: 16px;
         padding-left: 6px;
       }
     }
diff --git a/app/.vitepress/src/components/header/HeaderNavMoblie.vue b/app/.vitepress/src/components/header/HeaderNavMoblie.vue
index 8dced3fc8dc5b342e99ef30c7b636c37d5521d75..604ae8560f3001e965a90505cfd9e7786870e46c 100644
--- a/app/.vitepress/src/components/header/HeaderNavMoblie.vue
+++ b/app/.vitepress/src/components/header/HeaderNavMoblie.vue
@@ -319,8 +319,7 @@ const linkClick = () => {
         margin: var(--o-gap-4) 0;
 
         .icon {
-          height: 16px;
-          width: 16px;
+          font-size: 16px;
           margin-left: var(--o-gap-2);
         }
       }
@@ -337,7 +336,7 @@ const linkClick = () => {
       }
 
       .icon {
-        width: 16px;
+        font-size: 16px;
         margin-left: var(--o-gap-2);
       }
     }
diff --git a/app/.vitepress/src/components/header/HeaderTheme.vue b/app/.vitepress/src/components/header/HeaderTheme.vue
index b4644a02ab6225b26db17fd22a958aaa424f5d31..907619b7dfafcca436ecbb4c5a5c871db3b16c01 100644
--- a/app/.vitepress/src/components/header/HeaderTheme.vue
+++ b/app/.vitepress/src/components/header/HeaderTheme.vue
@@ -86,9 +86,8 @@ watch(
   align-items: center;
   cursor: pointer;
   color: var(--o-color-info1);
-  .icon svg {
-    width: var(--o-icon_size-s);
-    height: var(--o-icon_size-s);
+  .icon {
+    font-size: 20px;
   }
   @include respond-to('<=pad_v') {
     display: none;
diff --git a/app/.vitepress/src/components/header/NavContent.vue b/app/.vitepress/src/components/header/NavContent.vue
index e4eff7c132db74a3c19f969c61582c478eb9ca28..9701b659312d57f31221b1170e7345cb69cdaca6 100644
--- a/app/.vitepress/src/components/header/NavContent.vue
+++ b/app/.vitepress/src/components/header/NavContent.vue
@@ -55,8 +55,8 @@ const onClickNavLink = (item?: any) => {
         @link-click="linkClick"
       >
         {{ subItem.NAME }}
-        <OIcon v-if="subItem.ICON">
-          <component :is="subItem.ICON" class="icon" />
+        <OIcon v-if="subItem.ICON" class="icon">
+          <component :is="subItem.ICON" />
         </OIcon>
         <OTag
           v-if="subItem.TAG"
@@ -78,8 +78,8 @@ const onClickNavLink = (item?: any) => {
           @link-click="linkClick"
         >
           {{ system.NAME }}
-          <OIcon v-if="system.ICON">
-            <component :is="system.ICON" class="icon" />
+          <OIcon v-if="system.ICON" class="icon">
+            <component :is="system.ICON" />
           </OIcon>
         </NavLink>
       </div>
@@ -101,8 +101,8 @@ const onClickNavLink = (item?: any) => {
           @link-click="linkClick"
         >
           {{ subItem.NAME }}
-          <OIcon v-if="subItem.ICON">
-            <component :is="subItem.ICON" class="icon" />
+          <OIcon v-if="subItem.ICON" class="icon">
+            <component :is="subItem.ICON" />
           </OIcon>
           <OTag
             v-if="subItem.TAG"
@@ -133,8 +133,8 @@ const onClickNavLink = (item?: any) => {
           @link-click="linkClick"
         >
           {{ system.NAME }}
-          <OIcon v-if="system.ICON">
-            <component :is="system.ICON" class="icon" />
+          <OIcon v-if="system.ICON" class="icon">
+            <component :is="system.ICON" />
           </OIcon>
         </NavLink>
       </div>
@@ -153,7 +153,7 @@ const onClickNavLink = (item?: any) => {
 }
 
 .icon {
-  width: var(--o-icon_size-xs);
+  font-size: var(--o-icon_size-xs);
   margin-left: var(--o-gap-2);
 }
 
diff --git a/app/.vitepress/src/components/markdown/MarkdownImage.vue b/app/.vitepress/src/components/markdown/MarkdownImage.vue
index 801159fa371f6d77e7f82c0611174085a678b3af..72a978b7f0c4f54650332a7e5ddd2ea30ff93b58 100644
--- a/app/.vitepress/src/components/markdown/MarkdownImage.vue
+++ b/app/.vitepress/src/components/markdown/MarkdownImage.vue
@@ -136,20 +136,23 @@ const onCloseZoom = () => {
 }
 
 .close-btn {
+  z-index: 2;
   position: absolute;
+  top: 12px;
+  right: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 32px;
   height: 32px;
   background-color: rgba(var(--o-black), 0.4);
   border: 1px solid rgba(var(--o-black), 0.1);
   border-radius: var(--o-radius-xs);
-  z-index: 2;
-  top: 12px;
-  right: 12px;
   cursor: pointer;
+  
   .icon {
     color: var(--o-color-white);
-    margin-top: 3px;
-    margin-left: 3px;
+    font-size: 24px;
   }
 
   @include respond-to('phone') {
diff --git a/app/.vitepress/src/components/markdown/MarkdownTitle.vue b/app/.vitepress/src/components/markdown/MarkdownTitle.vue
index c3fbe265c00873616c5dab64e94786684e073a1f..1e260d1fd4b7a1f3808159359271b0e89f10a0f0 100644
--- a/app/.vitepress/src/components/markdown/MarkdownTitle.vue
+++ b/app/.vitepress/src/components/markdown/MarkdownTitle.vue
@@ -98,30 +98,8 @@ const onClickCopyLink = (e: MouseEvent) => {
     display: inline-flex;
   }
 
-  .o-icon {
+  .pin, .link {
     @include h2;
-
-    svg {
-      width: 24px;
-      height: 24px;
-
-      @include respond-to('laptop') {
-        width: 20px;
-        height: 20px;
-      }
-      @include respond-to('pad_h') {
-        width: 18px;
-        height: 18px;
-      }
-      @include respond-to('pad_v') {
-        width: 18px;
-        height: 18px;
-      }
-      @include respond-to('phone') {
-        width: 16px;
-        height: 16px;
-      }
-    }
   }
 
   .link {
diff --git a/app/.vitepress/src/layouts/LayoutDoc.vue b/app/.vitepress/src/layouts/LayoutDoc.vue
index b4b512806d63fcd3a31a520ca06ad6de030ea8b1..5c209e830f529f6f368b419c5e12bb2ac9e8753d 100644
--- a/app/.vitepress/src/layouts/LayoutDoc.vue
+++ b/app/.vitepress/src/layouts/LayoutDoc.vue
@@ -412,7 +412,7 @@ onUnmounted(() => {
       <div v-if="isPhone" class="doc-sidebar-mb">
         <div class="sidebar-top">
           <div class="menu-opener-mb" :class="{ 'menu-opener-mb-active': !isSidebarHidden }">
-            <OIcon @click="switchMenu"><IconExpand /></OIcon>
+            <OIcon class="icon-expand" @click="switchMenu"><IconExpand /></OIcon>
             <DocTypeMobile :version="version" @refresh="onPageChange" />
           </div>
           <DocVersionMobile v-if="!viewStore.isCommonView" :version="version" />
@@ -622,8 +622,8 @@ onUnmounted(() => {
   align-items: center;
   color: var(--o-color-info1);
 
-  .o-icon svg {
-    width: var(--o-icon_size-m);
+  .icon-expand {
+    font-size: 24px;
   }
 }
 .menu-opener-mb-active {
diff --git a/app/.vitepress/src/views/home/TheHome.vue b/app/.vitepress/src/views/home/TheHome.vue
index 17ca607424fb848b970534a5db36b11984e677a3..c68a93512b8400c4dea18e03c34875f6f73f8e22 100644
--- a/app/.vitepress/src/views/home/TheHome.vue
+++ b/app/.vitepress/src/views/home/TheHome.vue
@@ -189,7 +189,7 @@ const getBannerCardBg = (item: HomeBannerItemT) => {
           class="search"
         >
           <template #prefix>
-            <OIcon><IconSearch /></OIcon>
+            <OIcon class="icon-search"><IconSearch /></OIcon>
           </template>
         </OInput>
 
@@ -279,6 +279,9 @@ const getBannerCardBg = (item: HomeBannerItemT) => {
 .banner-search {
   margin-top: 16px;
 }
+.icon-search {
+  font-size: 24px;
+}
 .search {
   width: 660px;
   --input-height: 40px;
diff --git a/app/.vitepress/src/views/home/components/HomeSectionCard.vue b/app/.vitepress/src/views/home/components/HomeSectionCard.vue
index ca09a78c116a5c230d570b5be83d2eb3d32b0712..75395d7b5af24e0c659e3107ffffbffe65028f69 100644
--- a/app/.vitepress/src/views/home/components/HomeSectionCard.vue
+++ b/app/.vitepress/src/views/home/components/HomeSectionCard.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { OCard } from '@opensig/opendesign';
+import { onMounted, ref } from 'vue';
+import { OIcon, OCard } from '@opensig/opendesign';
+import { request } from '@/shared/axios';
 
-defineProps({
+const props = defineProps({
   title: {
     type: String,
     default: '',
@@ -23,6 +25,23 @@ defineProps({
     default: '',
   },
 });
+
+const svg = ref('');
+
+const getSvg = async () => {
+  try {
+    const res = await request.get(props.icon);
+    svg.value = res.data;
+  } catch {
+    // nothing
+  }
+};
+
+onMounted(() => {
+  if (props.icon) {
+    getSvg();
+  }
+});
 </script>
 
 <template>
@@ -37,7 +56,7 @@ defineProps({
     rel="noopener noreferrer"
   >
     <template #header>
-      <img v-if="icon" class="section-icon" :src="icon" />
+      <OIcon v-if="svg" class="section-icon" v-dompurify-html="svg" />
       <div class="section-title" :class="{ 'section-no-icon': !icon }">{{ title }}</div>
     </template>
 
@@ -70,10 +89,10 @@ defineProps({
 }
 
 .section-icon {
-  width: 40px;
+  font-size: 40px;
 
   @include respond-to('<=laptop') {
-    width: 32px;
+    font-size: 32px;
   }
 }