diff --git a/cc-inspector/src/views/devtools/index.vue b/cc-inspector/src/views/devtools/index.vue
index 0ca167d..36c1c6f 100644
--- a/cc-inspector/src/views/devtools/index.vue
+++ b/cc-inspector/src/views/devtools/index.vue
@@ -31,20 +31,23 @@
           <CCButton
             v-show="isShowRefreshBtn"
             type="success"
-            class="el-icon-refresh"
             size="mini"
             @click="onBtnClickUpdateTree"
-          ></CCButton>
-          <CCButton @click="onClickSettings" class="el-icon-s-tools"></CCButton>
+          >
+            <i class="iconfont icon_refresh"></i>
+          </CCButton>
+          <CCButton @click="onClickSettings">
+            <i class="iconfont icon_settings"></i>
+          </CCButton>
         </div>
         <CCInput placeholder="enter keywords to filter" :data="filterText">
           <slot>
-            <div
-              class="matchCase iconfont el-icon-third-font-size"
+            <i
+              class="matchCase iconfont icon_font_size"
               @click.stop="onChangeCase"
               title="match case"
               :style="{ color: matchCase ? 'red' : '' }"
-            ></div>
+            ></i>
           </slot>
         </CCInput>
         <div class="treeList">
@@ -80,11 +83,8 @@
     </div>
     <div v-show="!isShowDebug" class="no-find">
       <span>No games created by cocos creator found!</span>
-      <CCButton
-        type="success"
-        class="el-icon-refresh"
-        @click="onBtnClickUpdatePage"
-        >刷新
+      <CCButton type="success" @click="onBtnClickUpdatePage">
+        <i class="iconfont icon_refresh"></i>
       </CCButton>
     </div>
   </div>
@@ -571,7 +571,6 @@ export default defineComponent({
 </script>
 
 <style scoped lang="less">
-
 #devtools {
   display: flex;
   flex-direction: column;
diff --git a/cc-inspector/src/views/devtools/register-panel.ts b/cc-inspector/src/views/devtools/register-panel.ts
index e55a88d..0f9e46c 100644
--- a/cc-inspector/src/views/devtools/register-panel.ts
+++ b/cc-inspector/src/views/devtools/register-panel.ts
@@ -1,16 +1,21 @@
 import { ChromeConst } from "cc-plugin/src/chrome/const";
 import { connectBackground } from "./connectBackground";
 import { PluginEvent, Msg, Page } from "../../core/types";
-
+import CCP from "cc-plugin/src/ccp/entry-render";
 export function init() {
-  if (chrome && chrome.devtools) { 
+  if (chrome && chrome.devtools) {
     // 对应的是Elements面板的边栏
-    chrome.devtools.panels.elements.createSidebarPane('Cocos', function (sidebar) {
+    chrome.devtools.panels.elements.createSidebarPane(CCP.manifest.name, function (sidebar) {
       sidebar.setObject({ some_data: "some data to show!" });
     });
 
     // 创建devtools-panel
-    chrome.devtools.panels.create("Cocos", "icons/48.png", ChromeConst.html.devtools, (panel: chrome.devtools.panels.ExtensionPanel) => {
+    let iconPath = "";
+    const { icon } = CCP.manifest;
+    if (icon && icon['48']) {
+      iconPath = icon['48'];
+    }
+    chrome.devtools.panels.create(CCP.manifest.name, iconPath, ChromeConst.html.devtools, (panel: chrome.devtools.panels.ExtensionPanel) => {
       console.log("[CC-Inspector] Dev Panel Created!");
       panel.onShown.addListener((window) => {
         // 面板显示，查询是否是cocos游戏
diff --git a/cc-inspector/src/views/devtools/ui/property-group.vue b/cc-inspector/src/views/devtools/ui/property-group.vue
index a265e0f..7c8be86 100644
--- a/cc-inspector/src/views/devtools/ui/property-group.vue
+++ b/cc-inspector/src/views/devtools/ui/property-group.vue
@@ -7,8 +7,8 @@
       @mouseleave="showLogBtn = false"
     >
       <div style="margin: 0 5px">
-        <i v-if="fold" class="el-icon-caret-right"></i>
-        <i v-if="!fold" class="el-icon-caret-bottom"></i>
+        <i v-if="fold" class="iconfont icon_arrow_right"></i>
+        <i v-if="!fold" class="iconfont icon_arrow_down"></i>
       </div>
       <div style="flex: 1">
         {{ group.name }}
@@ -17,9 +17,9 @@
         style="margin-right: 10px"
         v-show="showLogBtn"
         type="success"
-        icon="el-icon-chat-dot-round"
         @click.stop="onLog"
       >
+        <i class="iconfont icon_print"></i>
       </CCButton>
     </div>
     <div class="content" v-show="!fold">
diff --git a/cc-inspector/src/views/devtools/ui/ui-prop.vue b/cc-inspector/src/views/devtools/ui/ui-prop.vue
index 5565dcd..1fda805 100644
--- a/cc-inspector/src/views/devtools/ui/ui-prop.vue
+++ b/cc-inspector/src/views/devtools/ui/ui-prop.vue
@@ -19,7 +19,7 @@
         <i
           class="data-arrow"
           v-if="arrow"
-          :class="fold ? 'el-icon-caret-right' : 'el-icon-caret-bottom'"
+          :class="fold ? 'iconfont icon_arrow_right' : 'iconfont icon_arrow_down'"
           :style="{
             visibility: isArrayOrObject() ? 'visible' : 'hidden',
             'margin-left': indent * 10 + 'px',
@@ -138,11 +138,9 @@
             <div class="type">{{ value["engineType"] }}</div>
           </div>
           <div class="name">{{ value["engineName"] }}</div>
-          <CCButton
-            @click="onPlaceInTree"
-            type="primary"
-            icon="el-icon-place"
-          ></CCButton>
+          <CCButton @click="onPlaceInTree" type="primary">
+            <i class="iconfont icon_place"></i>
+          </CCButton>
         </div>
         <div v-if="value.isObject() && fold" class="objectDesc">
           {{ value.data }}
@@ -290,16 +288,16 @@ export default defineComponent({
       getEngineTypeIcon() {
         switch ((value as EngineData).engineType) {
           case "cc_Sprite": {
-            return "el-icon-picture-outline";
+            return "icon_picture";
           }
           case "cc_Label": {
-            return "el-icon-third-text";
+            return "icon_text";
           }
           case "cc_Node": {
-            return "el-icon-third-node";
+            return "icon_node";
           }
         }
-        return "el-icon-third-unknow";
+        return "icon_unknown";
       },
       getName(isArray: boolean, arr: Property) {
         const type = arr.value.type;
diff --git a/cc-inspector/src/views/popup/index.vue b/cc-inspector/src/views/popup/index.vue
index ab5582a..3026bef 100644
--- a/cc-inspector/src/views/popup/index.vue
+++ b/cc-inspector/src/views/popup/index.vue
@@ -3,10 +3,9 @@
     <div class="head">
       <div class="name">{{ title }}</div>
       <div style="flex: 1"></div>
-      <CCButton
-        class="el-icon-setting btn"
-        @click="onClickOptions"
-      ></CCButton>
+      <CCButton @click="onClickOptions">
+        <i class="iconfont icon_setting"></i>
+      </CCButton>
     </div>
 
     <div class="wechat">
@@ -48,7 +47,14 @@ const { CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } =
   ccui.components;
 export default defineComponent({
   name: "popup",
-  components: {CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor},
+  components: {
+    CCInput,
+    CCButton,
+    CCInputNumber,
+    CCSelect,
+    CCCheckBox,
+    CCColor,
+  },
   setup(props, ctx) {
     const title = ref(CCP.manifest.name);
     const version = ref(CCP.manifest.version);
@@ -106,9 +112,6 @@ export default defineComponent({
       font-size: 18px;
       font-weight: bold;
     }
-
-    .btn {
-    }
   }
 
   .wechat {