diff --git a/fonts/gaia-icons.ttf b/fonts/gaia-icons.ttf
deleted file mode 100644
index 76c2dc4..0000000
Binary files a/fonts/gaia-icons.ttf and /dev/null differ
diff --git a/src/components/base/auto-px-style.ts b/src/components/base/auto-px-style.ts
index 6795789..42457c9 100644
--- a/src/components/base/auto-px-style.ts
+++ b/src/components/base/auto-px-style.ts
@@ -4,6 +4,8 @@ export const autoPxStyle: CSSResult = css`
   :root {
     --hostDevicePixelRatio: var(--devicePixelRatio, 1);
     --auto-1px: calc(1px / var(--hostDevicePixelRatio));
+    --auto-2px: calc(2px / var(--hostDevicePixelRatio));
+    --auto-4px: calc(4px / var(--hostDevicePixelRatio));
     --auto-6px: calc(6px / var(--hostDevicePixelRatio));
     --auto-8px: calc(9px / var(--hostDevicePixelRatio));
     --auto-9px: calc(9px / var(--hostDevicePixelRatio));
diff --git a/src/components/base/star-base-element.ts b/src/components/base/star-base-element.ts
index 6173922..618b7e0 100644
--- a/src/components/base/star-base-element.ts
+++ b/src/components/base/star-base-element.ts
@@ -6,6 +6,7 @@ import GestureDetector, {
 import {autoPxStyle} from './auto-px-style.js'
 import {globalStyles} from './global-style.js'
 import {l10nHelper} from './custome_element_l10n.js'
+import starIcons from '../fonts/star-icons.css.js'
 
 declare global {
   var loadStarMixin: boolean
@@ -110,6 +111,7 @@ export function StarMixin<T extends Constructor<ReactiveElement>>(
 
     // 填充全局所需基础样式变量, 只添加一次
     const style = document.createElement('style')
+    const starIconsString = starIcons.toString()
     const globalStylesString = globalStyles
       .join(' ')
       .toString()
@@ -118,7 +120,7 @@ export function StarMixin<T extends Constructor<ReactiveElement>>(
         return s1 + computeNeededDevicePixelRatio()
       })
     const autoPxStyleString = autoPxStyle.toString()
-    style.innerHTML = globalStylesString + autoPxStyleString
+    style.innerHTML = starIconsString + globalStylesString + autoPxStyleString
     document.head.appendChild(style)
 
     window.loadStarMixin = true
diff --git a/src/components/base/tsconfig.json b/src/components/base/tsconfig.json
index 8b6101d..7fc55ab 100644
--- a/src/components/base/tsconfig.json
+++ b/src/components/base/tsconfig.json
@@ -6,6 +6,7 @@
   },
   "include": [
     "*.ts",
+    "../fonts/*.ts",
     "../../lib/gesture/gesture-detector.ts",
     "../../../../typings/"
   ]
diff --git a/src/components/button/button.css.ts b/src/components/button/button.css.ts
index 310d2bb..83e9c5b 100644
--- a/src/components/button/button.css.ts
+++ b/src/components/button/button.css.ts
@@ -158,6 +158,23 @@ export default [
       padding-inline-start: var(--auto-48px);
       padding-inline-end: var(--auto-48px);
     }
+    :host([type='pure']) button::before,
+    :host([type='icon']) button::before,
+    :host([type='ghost']) button[data-icon]::before,
+    :host([type='special']) button[data-icon]::before {
+      font-family: 'star-icons';
+      content: attr(data-icon);
+      text-align: center;
+    }
+    :host([type='pure'][label]) button,
+    :host([type='icon']) button,
+    :host([type='ghost']) button,
+    :host([type='special'][special='corner-marker']) button {
+      /* 使得::before和文字保持垂直居中 */
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
 
     /* normal 类型按钮 */
     :host([type='normal']),
@@ -196,10 +213,31 @@ export default [
     /* pure 类型按钮 */
     :host([type='pure']) {
       border-radius: 50%;
-      font-size: var(--auto-28px);
+      font-size: var(--auto-26px);
       color: var(--color-btn-pure);
       background-color: var(--bgc-btn-pure);
     }
+    :host([type='pure'][label]) button div {
+      /* 包裹带省略符的文本的标签必须使用 display: block */
+      display: block;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    /* pure中的图标大小 */
+    :host([type='pure']) button::before,
+    :host([type='pure'][size='middle']) button::before {
+      font-size: var(--auto-36px);
+    }
+    :host([type='pure'][size='middle']) button::before {
+      font-size: var(--auto-48px);
+    }
+    :host([type='pure'][size='large']) button::before {
+      font-size: var(--auto-56px);
+    }
+    :host([type='pure'][size='extralarge']) button::before {
+      font-size: var(--auto-80px);
+    }
     /* 只针对label */
     :host([type='pure'][label]:not([icon])) button {
       display: inline-flex;
@@ -217,12 +255,14 @@ export default [
       min-width: var(--auto-260px);
       min-height: var(--auto-80px);
       max-height: var(--auto-80px);
+      font-size: var(--auto-32px);
       border-radius: var(--auto-40px);
     }
     :host([type='pure'][label][size='large']) {
       min-width: var(--auto-320px);
       min-height: var(--auto-96px);
       max-height: var(--auto-96px);
+      font-size: var(--auto-38px);
       border-radius: var(--auto-48px);
     }
     :host([type='pure'][variant='establish']) {
@@ -230,37 +270,33 @@ export default [
       background-color: var(--theme-blue);
     }
     /* 只针对icon */
-    :host([type='pure']:not([label])[size='small']) {
+    :host([type='pure']:not([label])) {
       width: var(--auto-64px);
       height: var(--auto-64px);
-      font-size: var(--auto-25_6px);
     }
     :host([type='pure']:not([label])[size='middle']) {
       width: var(--auto-80px);
       height: var(--auto-80px);
-      font-size: var(--auto-32px);
     }
     :host([type='pure']:not([label])[size='large']) {
       width: var(--auto-96px);
       height: var(--auto-96px);
-      font-size: var(--auto-38_4px);
     }
     :host([type='pure']:not([label])[size='extralarge']) {
       width: var(--auto-152px);
       height: var(--auto-152px);
-      font-size: var(--auto-44_8px);
       color: var(--color-btn-pure-default);
       background-color: var(--bgc-btn-pure-default);
     }
     /* 图标与文字之间的间隙 */
     :host([type='pure'][label]) button::before {
-      padding-right: var(--auto-9px);
+      padding-right: var(--auto-2px);
     }
     :host([type='pure'][label]) button.middle::before {
-      padding-right: var(--auto-14px);
+      padding-right: var(--auto-4px);
     }
     :host([type='pure'][label]) button.large::before {
-      padding-right: var(--auto-16px);
+      padding-right: var(--auto-6px);
     }
 
     /* text 类型按钮 */
@@ -332,6 +368,7 @@ export default [
       width: var(--auto-48px);
       height: var(--auto-48px);
       border-radius: 50%;
+      font-size: var(--auto-48px);
       color: var(--bgc-btn-special-delete-icon);
       background-color: var(--bgc-btn-special-delete);
     }
@@ -367,10 +404,9 @@ export default [
       font-size: var(--auto-36px);
       color: var(--color-btn-special-go-back);
     }
-    :host([type='special']) button.go-back #goback {
-      max-width: var(--auto-48px);
-      max-height: var(--auto-48px);
-      margin: auto var(--auto-6px) auto 0;
+    :host([type='special']) button.go-back::before {
+      font-size: var(--auto-48px);
+      margin-right: var(--auto-6px);
     }
     :host([type='special']) button.go-back span {
       margin: auto;
@@ -416,18 +452,6 @@ export default [
       margin: auto;
     }
 
-    /* 共性-icon */
-    :host([type='pure']) button[data-icon]::before,
-    :host([type='icon']) button[data-icon]::before,
-    :host([type='ghost']) button[data-icon]::before,
-    :host([type='special'])
-      button[data-icon]:not(.go-back, .corner-marker)::before {
-      font-family: 'gaia-icons';
-      font-size: inherit;
-      content: attr(data-icon);
-      text-align: center;
-    }
-
     /***********************dark theme*****************************/
     :host([type='normal'][variant='default'][theme='dark']) {
       color: var(--color-btn-normal-default-dm);
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index f7944f8..ef2de7d 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -221,7 +221,7 @@ export class StarButton extends StarBaseElement {
         ? nothing
         : html`<slot name="asset"></slot>`}${this.hasLabel
         // ? html`<span>${this.label}</span>`
-        ? html`${this.label}`
+        ? html`<div>${this.label}</div>`
         : nothing}`
     /* prettier-ignore */
     return html`
@@ -278,11 +278,11 @@ export class StarButton extends StarBaseElement {
     switch (this.special) {
       case ButtonSpecial.CORNERMARKER:
         return html`
-          <button class="${this.special}">
-            <star-svg-icon
+          <button class="${this.special}" data-icon="delete-corner">
+            <!-- <star-svg-icon
               id="deletecorner"
               symbol="deletecorner"
-            ></star-svg-icon>
+            ></star-svg-icon> -->
           </button>
         `
       case ButtonSpecial.HANGUP:
@@ -311,8 +311,8 @@ export class StarButton extends StarBaseElement {
         `
       case ButtonSpecial.GOBACK:
         return html`
-          <button class="${this.special}">
-            <star-svg-icon id="goback" symbol="goback"></star-svg-icon>
+          <button class="${this.special}" data-icon="left-arrow">
+            <!-- <star-svg-icon id="goback" symbol="goback"></star-svg-icon> -->
             <span>返回</span>
           </button>
         `
diff --git a/src/components/fonts/star-icons.css.ts b/src/components/fonts/star-icons.css.ts
new file mode 100644
index 0000000..488cf96
--- /dev/null
+++ b/src/components/fonts/star-icons.css.ts
@@ -0,0 +1,25 @@
+import {css, unsafeCSS} from 'lit'
+
+const ttfUrl = unsafeCSS(new URL('./star-icons.ttf', import.meta.url).href)
+
+export default css`
+  @font-face {
+    font-family: 'star-icons';
+    src: url(${ttfUrl}) format('truetype');
+    font-weight: 400;
+    font-style: normal;
+  }
+
+  [data-icon]:before {
+    font-family: 'star-icons';
+    content: attr(data-icon);
+    display: inline-block;
+    font-weight: 400;
+    font-style: normal;
+    text-decoration: inherit;
+    text-transform: none;
+    text-rendering: optimizeLegibility;
+    font-size: 30px;
+    -webkit-font-smoothing: antialiased;
+  }
+`
diff --git a/src/components/fonts/star-icons.ttf b/src/components/fonts/star-icons.ttf
new file mode 100644
index 0000000..9392e25
Binary files /dev/null and b/src/components/fonts/star-icons.ttf differ
diff --git a/src/test/panels/button/button.ts b/src/test/panels/button/button.ts
index 8541382..f7ad88a 100644
--- a/src/test/panels/button/button.ts
+++ b/src/test/panels/button/button.ts
@@ -147,36 +147,36 @@ export class PanelButton extends LitElement {
           <star-button type="pure" variant="primary" size="small" icon="bug" label="添加" disabled></star-button>
         </star-li>
         <star-li type="base">
-          <star-button type="pure" variant="primary" size="small" icon="bug" label="添加组件"></star-button>
-          <star-button type="pure" variant="primary" size="small" icon="bug" label="添加组件" disabled></star-button>
+          <star-button type="pure" variant="primary" size="small" icon="add" label="添加组件"></star-button>
+          <star-button type="pure" variant="primary" size="small" icon="add" label="添加组件" disabled></star-button>
         </star-li>
         <star-li type="base">
-          <star-button type="pure" variant="establish" size="small" icon="bug" label="添加组件"></star-button>
-          <star-button type="pure" variant="establish" size="small" icon="bug" label="添加组件" disabled></star-button>
+          <star-button type="pure" variant="establish" size="small" icon="add" label="添加组件"></star-button>
+          <star-button type="pure" variant="establish" size="small" icon="add" label="添加组件" disabled></star-button>
         </star-li>
         <star-li type="base">
           <star-button type="pure" variant="primary" size="small" icon="bug" label="很长名字的组件"></star-button>
           <star-button type="pure" variant="primary" size="small" icon="bug" label="很长名字的组件" disabled></star-button>
         </star-li>
         <star-li type="base">
-          <star-button type="pure" variant="primary" size="middle" icon="bug" label="添加组件"></star-button>
-          <star-button type="pure" variant="primary" size="middle" icon="bug" label="添加组件" disabled></star-button>
+          <star-button type="pure" variant="primary" size="middle" icon="add" label="添加组件"></star-button>
+          <star-button type="pure" variant="primary" size="middle" icon="add" label="添加组件" disabled></star-button>
         </star-li>
         <star-li type="base">
-          <star-button type="pure" variant="establish" size="middle" icon="bug" label="添加组件"></star-button>
-          <star-button type="pure" variant="establish" size="middle" icon="bug" label="添加组件" disabled></star-button>
+          <star-button type="pure" variant="establish" size="middle" icon="add" label="添加组件"></star-button>
+          <star-button type="pure" variant="establish" size="middle" icon="add" label="添加组件" disabled></star-button>
         </star-li>
         <star-li type="base">
-          <star-button type="pure" variant="primary" size="large" icon="bug" label="添加组件"></star-button>
-          <star-button type="pure" variant="primary" size="large" icon="bug" label="添加组件" disabled></star-button>
+          <star-button type="pure" variant="primary" size="large" icon="add" label="添加组件"></star-button>
+          <star-button type="pure" variant="primary" size="large" icon="add" label="添加组件" disabled></star-button>
         </star-li>
         <star-li type="base">
-          <star-button type="pure" variant="establish" size="large" icon="bug" label="添加组件"></star-button>
-          <star-button type="pure" variant="establish" size="large" icon="bug" label="添加组件" disabled></star-button>
+          <star-button type="pure" variant="establish" size="large" icon="add" label="添加组件"></star-button>
+          <star-button type="pure" variant="establish" size="large" icon="add" label="添加组件" disabled></star-button>
         </star-li>
         <star-li type="base">
-          <star-button type="pure" theme="dark" variant="primary" size="large" icon="bug" label="添加组件"></star-button>
-          <star-button type="pure" theme="dark" variant="primary" size="large" icon="bug" label="添加组件" disabled></star-button>
+          <star-button type="pure" theme="dark" variant="primary" size="large" icon="add" label="添加组件"></star-button>
+          <star-button type="pure" theme="dark" variant="primary" size="large" icon="add" label="添加组件" disabled></star-button>
         </star-li>
         <star-li type="base">
           <star-button type="pure" icon="bug" size="small" label="最短"></star-button>
@@ -193,6 +193,23 @@ export class PanelButton extends LitElement {
           <star-button type="pure" icon="bug" style="width:400px" size="middle" label="自定义长度400px"></star-button>
           <star-button type="pure" icon="bug" style="width:600px" size="large" label="自定义长度600px(最长为520px)"></star-button>
         </star-li>
+        <star-li type="base">
+          <star-button type="pure" icon="reboot" variant="primary" size="small"></star-button>
+          <star-button type="pure" icon="reboot" variant="primary" size="middle"></star-button>
+          <star-button type="pure" icon="reboot" variant="primary" size="large"></star-button>
+          <star-button type="pure" icon="reboot" variant="default" size="extralarge"></star-button>
+        </star-li>
+        <star-li type="base">
+          <star-button type="pure" icon="shutdown" variant="primary" size="small"></star-button>
+          <star-button type="pure" icon="shutdown" variant="primary" size="middle"></star-button>
+          <star-button type="pure" icon="shutdown" variant="primary" size="large"></star-button>
+          <star-button type="pure" icon="shutdown" variant="default" size="extralarge"></star-button>
+        </star-li>
+        <star-li type="base">
+          <star-button type="pure" icon="add" size="small" label="添加组件"></star-button>
+          <star-button type="pure" icon="add" size="middle" label="添加组件"></star-button>
+          <star-button type="pure" icon="add" size="large" label="添加组件"></star-button>
+        </star-li>
       </star-ul>
 
       <h3>使用场景:对话框底部按钮</h3>
@@ -232,12 +249,12 @@ export class PanelButton extends LitElement {
       <h3>Icon类型按钮使用场景:在base色纯背景上的裸图标按钮</h3>
       <star-ul type="onlyheader" title="Icon类型2种大小的按钮及禁用按钮">
         <star-li type="base">
-          <star-button type="icon" icon="bug" size="small"></star-button>
-          <star-button type="icon" icon="bug" size="small" disabled></star-button>
+          <star-button type="icon" icon="add" size="small"></star-button>
+          <star-button type="icon" icon="add" size="small" disabled></star-button>
         </star-li>
         <star-li type="base">
-          <star-button type="icon" icon="bug" size="middle"></star-button>
-          <star-button type="icon" icon="bug" size="middle" disabled></star-button>
+          <star-button type="icon" icon="minus" size="middle"></star-button>
+          <star-button type="icon" icon="minus" size="middle" disabled></star-button>
         </star-li>
         <star-li type="base">
           <star-button type="icon" theme="dark" icon="bug" size="middle"></star-button>
@@ -248,20 +265,20 @@ export class PanelButton extends LitElement {
       <h3>Ghost类型按钮使用场景:拍照、摄像应用，多端协同拍照控制界面</h3>
       <star-ul type="onlyheader" title="Ghost类型提供3种大小的按钮">
         <star-li type="base">
-          <star-button type="ghost" icon="bug" size="small"></star-button>
-          <star-button type="ghost" icon="bug" size="small" disabled></star-button>
+          <star-button type="ghost" icon="switch-camera" size="small"></star-button>
+          <star-button type="ghost" icon="switch-camera" size="small" disabled></star-button>
         </star-li>
         <star-li type="base">
-          <star-button type="ghost" icon="bug" size="middle"></star-button>
-          <star-button type="ghost" icon="bug" size="middle" disabled></star-button>
+          <star-button type="ghost" icon="switch-camera" size="middle"></star-button>
+          <star-button type="ghost" icon="switch-camera" size="middle" disabled></star-button>
         </star-li>
         <star-li type="base">
-          <star-button type="ghost" icon="bug" size="large"></star-button>
-          <star-button type="ghost" icon="bug" size="large" disabled></star-button>
+          <star-button type="ghost" icon="switch-camera" size="large"></star-button>
+          <star-button type="ghost" icon="switch-camera" size="large" disabled></star-button>
         </star-li>
         <star-li type="base">
-          <star-button type="ghost" theme="dark" icon="bug" size="large"></star-button>
-          <star-button type="ghost" theme="dark" icon="bug" size="large" disabled></star-button>
+          <star-button type="ghost" theme="dark" icon="switch-camera" size="large"></star-button>
+          <star-button type="ghost" theme="dark" icon="switch-camera" size="large" disabled></star-button>
         </star-li>
       </star-ul>
 
@@ -298,16 +315,16 @@ export class PanelButton extends LitElement {
 
       <star-ul type="onlyheader" title="插入静态图标的Pure、Icon、Ghost按钮">
         <star-li type="base">
-          <star-button type="pure" variant="default" size="small">${staticSvg}</star-button>
-          <star-button type="pure" variant="default" size="middle">${staticSvg}</star-button>
-          <star-button type="pure" variant="default" size="large">${staticSvg}</star-button>
-          <star-button type="pure" variant="default" size="extralarge">${staticSvg}</star-button>
+          <star-button type="pure" icon="reboot" variant="primary" size="small"></star-button>
+          <star-button type="pure" icon="reboot" variant="primary" size="middle"></star-button>
+          <star-button type="pure" icon="reboot" variant="primary" size="large"></star-button>
+          <star-button type="pure" icon="reboot" variant="default" size="extralarge"></star-button>
         </star-li>
         <star-li type="base">
-          <star-button type="pure" variant="default" size="small">${staticPowerSvg}</star-button>
-          <star-button type="pure" variant="default" size="middle">${staticPowerSvg}</star-button>
-          <star-button type="pure" variant="default" size="large">${staticPowerSvg}</star-button>
-          <star-button type="pure" variant="default" size="extralarge">${staticPowerSvg}</star-button>
+          <star-button type="pure" icon="shutdown" variant="primary" size="small"></star-button>
+          <star-button type="pure" icon="shutdown" variant="primary" size="middle"></star-button>
+          <star-button type="pure" icon="shutdown" variant="primary" size="large"></star-button>
+          <star-button type="pure" icon="shutdown" variant="default" size="extralarge"></star-button>
         </star-li>
         <star-li type="base">
           <star-button type="pure" size="small" label="添加组件">${staticSvg}</star-button>
diff --git a/src/test/panels/fonts/gaia-icons.ts b/src/test/panels/fonts/gaia-icons.ts
new file mode 100644
index 0000000..70c683f
--- /dev/null
+++ b/src/test/panels/fonts/gaia-icons.ts
@@ -0,0 +1,299 @@
+import {css, html, LitElement} from 'lit'
+import {customElement} from 'lit/decorators.js'
+import {map} from 'lit/directives/map.js'
+
+@customElement('panel-fonts-gaia-icons')
+export class PanelFontsGaiaIcons extends LitElement {
+  icons = [
+    '2g',
+    '3g',
+    '4g',
+
+    'accessibility',
+    'achievement',
+    'add-contact',
+    'add',
+    'addons',
+
+    'airplane',
+    'alarm-clock',
+    'alarm-stop',
+    'alarm',
+
+    'album',
+    'all-day',
+    'arrow-left',
+    'arrow-right',
+    'artist',
+    'attachment',
+    'battery-0',
+    'battery-1',
+    'battery-2',
+    'battery-3',
+    'battery-4',
+    'battery-5',
+    'battery-6',
+    'battery-7',
+    'battery-8',
+    'battery-9',
+    'battery-10',
+    'battery-charging',
+    'battery-unknown',
+
+    'bluetooth-a2dp',
+    'bluetooth-circle',
+    'bluetooth-transfer-circle',
+    'bluetooth-transfer',
+    'bluetooth',
+
+    'brightness',
+    'browsing',
+    'bug',
+
+    'calendar',
+    'call-bluetooth',
+    'call-emergency',
+    'call-forwarding',
+    'call-hang-up',
+    'call-hold',
+    'call-incoming',
+    'call-merge',
+    'call-missed',
+    'call-outgoing',
+    'call-reversed',
+    'call-ringing',
+    'call',
+    'callback-emergency',
+
+    'camera',
+    'change-wallpaper',
+    'clear-input-left',
+    'clear-input-right',
+
+    'close',
+    'compose',
+    'contact-find',
+    'contacts',
+    'crashed',
+    'crop',
+
+    'data',
+    'delete',
+    'developer',
+    'device-info',
+    'dismiss-keyboard',
+    'do-not-track',
+    'download-circle',
+    'download',
+
+    'edge',
+    'edit-contact',
+    'edit-image',
+    'edit',
+    'effects',
+    'email-forward',
+    'email-mark-read',
+    'email-mark-unread',
+    'email-move',
+    'email-reply',
+    'email',
+
+    'exclamation',
+    'expand-left',
+    'expand-right',
+    'facebook',
+    'feedback',
+    'find',
+    'firefox',
+    'flag',
+    'flash-auto',
+    'flash-off',
+    'flash-on',
+    'focus-locked',
+    'focus-locking',
+
+    'gesture',
+    'gmail',
+    'grid-circular',
+    'grid',
+    'gsm',
+
+    'hdr-boxed',
+    'hdr',
+    'headphones',
+    'help',
+    'homescreen',
+    'hspa-plus',
+    'hspa',
+
+    'import-memorycard-circle',
+    'incoming-sms',
+    'info',
+
+    'keyboard-circle',
+    'keyboard',
+
+    'languages',
+    'left-light',
+    'left',
+    'link',
+    'location',
+    'lock',
+
+    'media-storage',
+    'menu',
+    'messages',
+    'mic',
+    'minus',
+    'moon',
+    'more',
+    'mute',
+
+    'nfc',
+    'no-sim',
+    'notifications',
+
+    'o',
+    'outgoing-sms',
+    'outlook',
+
+    'pause',
+    'picture-size',
+    'play',
+    'play-circle',
+    'playlist',
+    'privacy',
+
+    'recent-calls',
+    'reload',
+    'repeat-once',
+    'repeat',
+    'reply-all',
+    'right-light',
+    'right',
+    'rocket',
+    'rotate',
+
+    'scene',
+    'sd-card',
+    'search',
+    'seek-back',
+    'seek-forward',
+    'select',
+    'self-timer',
+    'send-left',
+    'send-right',
+    'settings',
+    'share',
+    'shuffle',
+
+    'signal-0',
+    'signal-1',
+    'signal-2',
+    'signal-3',
+    'signal-4',
+    'signal-5',
+    'signal-roaming',
+
+    'sim-toolkit',
+    'sim',
+
+    'skip-back',
+    'skip-forward',
+
+    'songs',
+    'sound-max',
+    'sound-min',
+    'star-empty',
+    'star-full',
+
+    'stop',
+    'storage-circle',
+    'storage',
+    'switch',
+    'sync',
+
+    'tethering',
+    'themes',
+    'tick-circle',
+    'tick',
+    'time',
+    'toggle-camera-front',
+    'toggle-camera-rear',
+    'topup-with-code',
+    'topup',
+    'twitter',
+
+    'undo-circular',
+    'undo',
+    'unlock',
+    'update-balance',
+    'usb',
+    'user',
+
+    'vibrate',
+    'video-mic',
+    'video-size',
+    'video',
+    'voicemail',
+
+    'wallpaper',
+    'wifi-1',
+    'wifi-2',
+    'wifi-3',
+    'wifi-4',
+    'wifi-permissions',
+  ]
+
+  render() {
+    return html`
+      <star-li type="base">
+        ${map(
+          this.icons,
+          (iconname, _) => html`
+            <star-button
+              type="icon"
+              icon=${iconname}
+              size="small"
+            ></star-button>
+          `
+        )}
+      </star-li>
+    `
+  }
+
+  styles = css`
+    a {
+      box-sizing: content-box;
+      display: inline-block;
+      color: #222;
+      width: 2rem;
+      height: 2rem;
+      text-decoration: none;
+      border: solid 1px #eee;
+      text-align: center;
+      margin: -1px;
+      background: #fff;
+      line-height: 1;
+    }
+
+    [data-icon]:before {
+      font-family: 'star-icons';
+      content: attr(data-icon);
+      display: inline-block;
+      font-weight: 400;
+      font-style: normal;
+      text-decoration: inherit;
+      text-transform: none;
+      text-rendering: optimizeLegibility;
+      font-size: 30px;
+      -webkit-font-smoothing: antialiased;
+    }
+  `
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'panel-fonts-gaia-icons': PanelFontsGaiaIcons
+  }
+}
diff --git a/src/test/panels/fonts/star-icons.ts b/src/test/panels/fonts/star-icons.ts
new file mode 100644
index 0000000..08286e3
--- /dev/null
+++ b/src/test/panels/fonts/star-icons.ts
@@ -0,0 +1,489 @@
+import {css, html, LitElement} from 'lit'
+import {customElement} from 'lit/decorators.js'
+import {map} from 'lit/directives/map.js'
+
+@customElement('panel-fonts-star-icons')
+export class PanelFontsStarIcons extends LitElement {
+  icons = [
+    '2g',
+    '3g',
+    '4g',
+    'IP_lm',
+    'accessibility',
+    'achievement',
+    'add-contact',
+    'add',
+    'addons',
+    'address-list',
+    'airplane',
+    'alarm-clock-stop',
+    'alarm-clock',
+    'alarm-song-shock',
+    'alarm-stop-shock',
+    'alarm-stop',
+    'alarm',
+    'album',
+    'all-day',
+    'all',
+    'app-double-open',
+    'app-hide',
+    'app-lock',
+    'app-management',
+    'arrow-left',
+    'arrow-right',
+    'artist',
+    'attachment',
+    'authorization-management',
+    'auto-brightness-1',
+    'auto-brightness-2',
+    'auto-rotate',
+    'battery-0',
+    'battery-1',
+    'battery-10',
+    'battery-2',
+    'battery-3',
+    'battery-4',
+    'battery-5',
+    'battery-6',
+    'battery-7',
+    'battery-8',
+    'battery-9',
+    'battery-charging',
+    'battery-gray-1',
+    'battery-gray',
+    'battery-green',
+    'battery-red-low',
+    'battery-red',
+    'battery-unknown',
+    'battery-yellow',
+    'battery',
+    'bluetooth-a2dp',
+    'bluetooth-circle',
+    'bluetooth-transfer-circle',
+    'bluetooth-transfer',
+    'bluetooth',
+    'brightness',
+    'broadcast',
+    'browsing',
+    'bug',
+    'calendar',
+    'call-bluetooth',
+    'call-db',
+    'call-emergency',
+    'call-forwarding',
+    'call-hang-up',
+    'call-hold',
+    'call-incoming',
+    'call-merge',
+    'call-missed',
+    'call-on',
+    'call-outgoing',
+    'call-reversed',
+    'call-ringing',
+    'call',
+    'callback-emergency',
+    'camera-db',
+    'camera',
+    'change-wallpaper',
+    'clear-input-left',
+    'clear-input-right',
+    'close',
+    'compose',
+    'computer',
+    'contact-find',
+    'contacts',
+    'crashed',
+    'crop',
+    'data',
+    'delete-corner',
+    'delete',
+    'developer',
+    'device-info',
+    'dialpad',
+    'dismiss-keyboard',
+    'do-not-track',
+    'download-circle',
+    'download',
+    'edge',
+    'edit-contact',
+    'edit-image',
+    'edit-left',
+    'edit-right',
+    'edit',
+    'effects',
+    'email-forward',
+    'email-mark-read',
+    'email-mark-unread',
+    'email-move',
+    'email-reply',
+    'email',
+    'exclamation',
+    'expand-left',
+    'expand-right',
+    'facebook',
+    'feedback',
+    'find',
+    'firefox',
+    'fix-to-dock',
+    'flag',
+    'flash-auto',
+    'flash-off',
+    'flash-on',
+    'flashlight',
+    'flow-down',
+    'flow-none',
+    'flow-up',
+    'flow-updown',
+    'focus-locked',
+    'focus-locking',
+    'font',
+    'gesture',
+    'gmail',
+    'grid-circular',
+    'grid',
+    'gsm',
+    'hdr-boxed',
+    'hdr',
+    'headphones',
+    'help',
+    'homescreen',
+    'hot-spot',
+    'hspa-plus',
+    'hspa',
+    'import-memorycard-circle',
+    'incoming-sms',
+    'info',
+    'invisible',
+    'keyboard-circle',
+    'keyboard',
+    'languages',
+    'left-arrow',
+    'left-db',
+    'left-light',
+    'left',
+    'light-effect',
+    'link',
+    'location',
+    'lock-lm',
+    'lock',
+    'manual',
+    'media-mute',
+    'media-sound',
+    'media-storage',
+    'menu',
+    'message-voice',
+    'message',
+    'messages',
+    'mic',
+    'minus',
+    'mobile-data',
+    'mobile-devices',
+    'mode-dark',
+    'mode-do-not-disturb',
+    'mode-energy-saving',
+    'mode-eye-protection',
+    'mode-landscape',
+    'mode-pure',
+    'moon',
+    'more',
+    'mute',
+    'nfc',
+    'no-see',
+    'no-sim',
+    'notifications',
+    'oo',
+    'outgoing-sms',
+    'outlook',
+    'password',
+    'pause-db',
+    'pause',
+    'personalization',
+    'picture-size',
+    'pin',
+    'play-circle',
+    'play-db',
+    'play',
+    'playlist',
+    'power',
+    'privacy',
+    'qq',
+    'reboot',
+    'recent-calls',
+    'reduce-db',
+    'reference-value',
+    'reload',
+    'repeat-once',
+    'repeat',
+    'reply-all',
+    'right-light',
+    'right',
+    'rocket',
+    'rotate',
+    'safe',
+    'scene',
+    'screen-projection',
+    'screen-recording',
+    'screen',
+    'sd-card',
+    'search',
+    'see',
+    'seek-back',
+    'seek-forward',
+    'select',
+    'self-timer',
+    'send-left',
+    'send-right',
+    'settings',
+    'share',
+    'shuffle',
+    'shutdown',
+    'sign-out',
+    'signal-0',
+    'signal-1',
+    'signal-2',
+    'signal-2g-0-d',
+    'signal-2g-0-no',
+    'signal-2g-0-u',
+    'signal-2g-0-ud',
+    'signal-2g-0',
+    'signal-2g-1-d',
+    'signal-2g-1-no',
+    'signal-2g-1-u',
+    'signal-2g-1-ud',
+    'signal-2g-1',
+    'signal-2g-2-d',
+    'signal-2g-2-no',
+    'signal-2g-2-u',
+    'signal-2g-2-ud',
+    'signal-2g-2',
+    'signal-2g-3-d',
+    'signal-2g-3-no',
+    'signal-2g-3-u',
+    'signal-2g-3-ud',
+    'signal-2g-3',
+    'signal-2g-4-d',
+    'signal-2g-4-no',
+    'signal-2g-4-u',
+    'signal-2g-4-ud',
+    'signal-2g-4',
+    'signal-3',
+    'signal-3g-0-d',
+    'signal-3g-0-no',
+    'signal-3g-0-u',
+    'signal-3g-0-ud',
+    'signal-3g-0',
+    'signal-3g-1-d',
+    'signal-3g-1-no',
+    'signal-3g-1-u',
+    'signal-3g-1-ud',
+    'signal-3g-1',
+    'signal-3g-2-d',
+    'signal-3g-2-no',
+    'signal-3g-2-u',
+    'signal-3g-2-ud',
+    'signal-3g-2',
+    'signal-3g-3-d',
+    'signal-3g-3-no',
+    'signal-3g-3-u',
+    'signal-3g-3-ud',
+    'signal-3g-3',
+    'signal-3g-4-d',
+    'signal-3g-4-no',
+    'signal-3g-4-u',
+    'signal-3g-4-ud',
+    'signal-3g-4',
+    'signal-4',
+    'signal-4g-0-d',
+    'signal-4g-0-no',
+    'signal-4g-0-u',
+    'signal-4g-0-ud',
+    'signal-4g-0',
+    'signal-4g-1-d',
+    'signal-4g-1-no',
+    'signal-4g-1-u',
+    'signal-4g-1-ud',
+    'signal-4g-1',
+    'signal-4g-2-d',
+    'signal-4g-2-no',
+    'signal-4g-2-u',
+    'signal-4g-2-ud',
+    'signal-4g-2',
+    'signal-4g-3-d',
+    'signal-4g-3-no',
+    'signal-4g-3-u',
+    'signal-4g-3-ud',
+    'signal-4g-3',
+    'signal-4g-4-d',
+    'signal-4g-4-no',
+    'signal-4g-4-u',
+    'signal-4g-4-ud',
+    'signal-4g-4',
+    'signal-5',
+    'signal-5g-0-d',
+    'signal-5g-0-no',
+    'signal-5g-0-u',
+    'signal-5g-0-ud',
+    'signal-5g-0',
+    'signal-5g-1-d',
+    'signal-5g-1-no',
+    'signal-5g-1-u',
+    'signal-5g-1-ud',
+    'signal-5g-1',
+    'signal-5g-2-d',
+    'signal-5g-2-no',
+    'signal-5g-2-u',
+    'signal-5g-2-ud',
+    'signal-5g-2',
+    'signal-5g-3-d',
+    'signal-5g-3-no',
+    'signal-5g-3-u',
+    'signal-5g-3-ud',
+    'signal-5g-3',
+    'signal-5g-4-d',
+    'signal-5g-4-no',
+    'signal-5g-4-u',
+    'signal-5g-4-ud',
+    'signal-5g-4',
+    'signal-e-0-d',
+    'signal-e-0-no',
+    'signal-e-0-u',
+    'signal-e-0-ud',
+    'signal-e-0',
+    'signal-e-1-d',
+    'signal-e-1-no',
+    'signal-e-1-u',
+    'signal-e-1-ud',
+    'signal-e-1',
+    'signal-e-2-d',
+    'signal-e-2-no',
+    'signal-e-2-u',
+    'signal-e-2-ud',
+    'signal-e-2',
+    'signal-e-3-d',
+    'signal-e-3-no',
+    'signal-e-3-u',
+    'signal-e-3-ud',
+    'signal-e-3',
+    'signal-e-4-d',
+    'signal-e-4-no',
+    'signal-e-4-u',
+    'signal-e-4-ud',
+    'signal-e-4',
+    'signal-open-card',
+    'signal-roaming',
+    'sim-1',
+    'sim-2',
+    'sim-toolkit',
+    'sim',
+    'skip-back',
+    'skip-forward',
+    'songs',
+    'sound-max',
+    'sound-min',
+    'speed',
+    'star-empty',
+    'star-full',
+    'start-loading',
+    'stop',
+    'storage-circle',
+    'storage',
+    'switch-camera',
+    'switch',
+    'sync',
+    'system',
+    'tethering',
+    'themes',
+    'tick-circle',
+    'tick',
+    'time',
+    'toggle-camera-front',
+    'toggle-camera-rear',
+    'topup-with-code',
+    'topup',
+    'trusted-os',
+    'trusted-root',
+    'trusted-startup-and-trustchain',
+    'twitter',
+    'undo-circular',
+    'undo',
+    'unlock',
+    'unpin',
+    'update-balance',
+    'usb',
+    'user',
+    'vibrate',
+    'video-mic',
+    'video-size',
+    'video',
+    'voicemail',
+    'wallpaper',
+    'wechat',
+    'wifi-0',
+    'wifi-1',
+    'wifi-2',
+    'wifi-3',
+    'wifi-4',
+    'wifi-lock-0',
+    'wifi-lock-1',
+    'wifi-lock-2',
+    'wifi-lock-3',
+    'wifi-lock-4',
+    'wifi-nonet-0',
+    'wifi-nonet-1',
+    'wifi-nonet-2',
+    'wifi-nonet-3',
+    'wifi-permissions',
+  ]
+
+  render() {
+    return html`
+      <star-li type="base">
+        ${map(
+          this.icons,
+          (iconname, _) => html`
+            <star-button
+              type="icon"
+              icon=${iconname}
+              size="small"
+            ></star-button>
+          `
+        )}
+      </star-li>
+    `
+  }
+
+  styles = css`
+    a {
+      box-sizing: content-box;
+      display: inline-block;
+      color: #222;
+      width: 2rem;
+      height: 2rem;
+      text-decoration: none;
+      border: solid 1px #eee;
+      text-align: center;
+      margin: -1px;
+      background: #fff;
+      line-height: 1;
+    }
+
+    [data-icon]:before {
+      font-family: 'star-icons';
+      content: attr(data-icon);
+      display: inline-block;
+      font-weight: 400;
+      font-style: normal;
+      text-decoration: inherit;
+      text-transform: none;
+      text-rendering: optimizeLegibility;
+      font-size: 30px;
+      -webkit-font-smoothing: antialiased;
+    }
+  `
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'panel-fonts-star-icons': PanelFontsStarIcons
+  }
+}
diff --git a/src/test/panels/root.ts b/src/test/panels/root.ts
index 2de2542..2c14209 100644
--- a/src/test/panels/root.ts
+++ b/src/test/panels/root.ts
@@ -21,6 +21,8 @@ import './container/homescreen-container'
 import './control-center/control-center'
 import './dialog/dialog'
 import './digicipher/digicipher'
+import './fonts/gaia-icons.ts'
+import './fonts/star-icons'
 import './gauss_canvas/gauss-blur'
 import './general/general'
 import './gesture/gesture'
@@ -414,6 +416,24 @@ export class PanelRoot extends LitElement {
       ></star-li>
     </star-ul>
 
+    <star-ul type=${UlType.ONLY_HEADER} title="生产用图标字体">
+      <star-li
+        type=${LiType.ICON_LABEL}
+        label="原gaia-icons图标字体库"
+        icon="play-circle"
+        iconcolor="red"
+        href="#fonts-gaia-icons"
+      ></star-li>
+      <hr />
+      <star-li
+        type=${LiType.ICON_LABEL}
+        label="新star-icons图标字体库"
+        icon="play-circle"
+        iconcolor="red"
+        href="#fonts-star-icons"
+      ></star-li>
+    </star-ul>
+
     <star-ul type=${UlType.BASE}>
       <star-li
         type=${LiType.ONLY_EDIT}