diff --git a/docs/package.json b/docs/package.json
index f5bb3040..2acc5962 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -8,7 +8,7 @@
     "build": "npm run clean:top && vuepress build src -d dist"
   },
   "dependencies": {
-    "@element-plus/icons": "0.0.11",
+    "@element-plus/icons-vue": "^2.0.6",
     "@tmagic/form": "^1.0.2",
     "@tmagic/schema": "^1.0.2",
     "@tmagic/utils": "^1.0.2",
diff --git a/docs/src/api/editor/editor.md b/docs/src/api/editor/editor.md
index bd1d1b3e..d178724d 100644
--- a/docs/src/api/editor/editor.md
+++ b/docs/src/api/editor/editor.md
@@ -47,7 +47,7 @@
 - **示例：**
 
 ```js
-import { FolderOpened, SwitchButton, Tickets } from '@element-plus/icons';
+import { FolderOpened, SwitchButton, Tickets } from '@element-plus/icons-vue';
 
 [
   {
@@ -108,7 +108,7 @@ icon使用的是[element-plus icon](https://element-plus.org/zh-CN/component/ico
 - **示例：**
   
 ```js
-import { List } from '@element-plus/icons';
+import { List } from '@element-plus/icons-vue';
 import ModListPanel from '../components/sidebars/ModListPanel.vue';
 
 {
@@ -167,7 +167,7 @@ icon使用的是[element-plus icon](https://element-plus.org/zh-CN/component/ico
 
 ```js
 import { toRaw } from 'vue';
-import { ArrowLeft, Coin } from '@element-plus/icons';
+import { ArrowLeft, Coin } from '@element-plus/icons-vue';
 
 {
   left: [
diff --git a/packages/editor/package.json b/packages/editor/package.json
index 577c2ade..78dc9c0f 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -42,7 +42,7 @@
   ],
   "dependencies": {
     "@babel/core": "^7.18.0",
-    "@element-plus/icons": "0.0.11",
+    "@element-plus/icons-vue": "^2.0.6",
     "@tmagic/core": "1.1.0-beta.0",
     "@tmagic/form": "1.1.0-beta.0",
     "@tmagic/schema": "1.1.0-beta.0",
diff --git a/packages/editor/src/components/Icon.vue b/packages/editor/src/components/Icon.vue
index 9d51277f..9919b7c8 100644
--- a/packages/editor/src/components/Icon.vue
+++ b/packages/editor/src/components/Icon.vue
@@ -7,7 +7,7 @@
 
 <script lang="ts">
 import { Component, defineComponent, PropType, toRaw } from 'vue';
-import { Edit } from '@element-plus/icons';
+import { Edit } from '@element-plus/icons-vue';
 
 export default defineComponent({
   name: 'm-icon',
diff --git a/packages/editor/src/components/ToolButton.vue b/packages/editor/src/components/ToolButton.vue
index 610c0c9b..0d72d689 100644
--- a/packages/editor/src/components/ToolButton.vue
+++ b/packages/editor/src/components/ToolButton.vue
@@ -52,7 +52,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, inject, markRaw, PropType } from 'vue';
-import { ArrowDown, Back, Delete, Grid, Right, ScaleToOriginal, ZoomIn, ZoomOut } from '@element-plus/icons';
+import { ArrowDown, Back, Delete, Grid, Right, ScaleToOriginal, ZoomIn, ZoomOut } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/schema';
 
diff --git a/packages/editor/src/fields/UISelect.vue b/packages/editor/src/fields/UISelect.vue
index 641583c1..37eb9865 100644
--- a/packages/editor/src/fields/UISelect.vue
+++ b/packages/editor/src/fields/UISelect.vue
@@ -14,7 +14,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, inject, markRaw, ref } from 'vue';
-import { Close, Delete, Pointer } from '@element-plus/icons';
+import { Close, Delete, Pointer } from '@element-plus/icons-vue';
 
 import { FormState } from '@tmagic/form';
 
diff --git a/packages/editor/src/layouts/AddPageBox.vue b/packages/editor/src/layouts/AddPageBox.vue
index 6bfde35f..ac934bdc 100644
--- a/packages/editor/src/layouts/AddPageBox.vue
+++ b/packages/editor/src/layouts/AddPageBox.vue
@@ -13,7 +13,7 @@
 
 <script lang="ts">
 import { defineComponent, inject, toRaw } from 'vue';
-import { Plus } from '@element-plus/icons';
+import { Plus } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/schema';
 
diff --git a/packages/editor/src/layouts/sidebar/LayerMenu.vue b/packages/editor/src/layouts/sidebar/LayerMenu.vue
index 253142fd..684c1a7d 100644
--- a/packages/editor/src/layouts/sidebar/LayerMenu.vue
+++ b/packages/editor/src/layouts/sidebar/LayerMenu.vue
@@ -4,7 +4,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, inject, markRaw, ref } from 'vue';
-import { Delete, DocumentCopy, Files, Plus } from '@element-plus/icons';
+import { Delete, DocumentCopy, Files, Plus } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/schema';
 
diff --git a/packages/editor/src/layouts/sidebar/TabPane.vue b/packages/editor/src/layouts/sidebar/TabPane.vue
index 65379a0b..c5f31a97 100644
--- a/packages/editor/src/layouts/sidebar/TabPane.vue
+++ b/packages/editor/src/layouts/sidebar/TabPane.vue
@@ -27,7 +27,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue';
-import { Coin, Files } from '@element-plus/icons';
+import { Coin, Files } from '@element-plus/icons-vue';
 
 import MIcon from '@editor/components/Icon.vue';
 import { SideComponent, SideItem } from '@editor/type';
diff --git a/packages/editor/src/layouts/workspace/PageBar.vue b/packages/editor/src/layouts/workspace/PageBar.vue
index 5b33c4d1..e18a2608 100644
--- a/packages/editor/src/layouts/workspace/PageBar.vue
+++ b/packages/editor/src/layouts/workspace/PageBar.vue
@@ -70,7 +70,7 @@ import {
   toRaw,
   watch,
 } from 'vue';
-import { ArrowLeftBold, ArrowRightBold, CaretBottom, Delete, DocumentCopy, Plus } from '@element-plus/icons';
+import { ArrowLeftBold, ArrowRightBold, CaretBottom, Delete, DocumentCopy, Plus } from '@element-plus/icons-vue';
 
 import type { MApp, MPage } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';
diff --git a/packages/editor/src/layouts/workspace/ViewerMenu.vue b/packages/editor/src/layouts/workspace/ViewerMenu.vue
index 3eff91fc..8d469194 100644
--- a/packages/editor/src/layouts/workspace/ViewerMenu.vue
+++ b/packages/editor/src/layouts/workspace/ViewerMenu.vue
@@ -4,7 +4,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, inject, markRaw, onMounted, reactive, ref, watch } from 'vue';
-import { Bottom, Delete, DocumentCopy, Top } from '@element-plus/icons';
+import { Bottom, Delete, DocumentCopy, Top } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
diff --git a/packages/form/package.json b/packages/form/package.json
index 7fdd7f8c..ac027781 100644
--- a/packages/form/package.json
+++ b/packages/form/package.json
@@ -32,7 +32,7 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@element-plus/icons": "0.0.11",
+    "@element-plus/icons-vue": "^2.0.6",
     "@tmagic/utils": "1.1.0-beta.0",
     "element-plus": "^2.2.6",
     "lodash-es": "^4.17.21",
diff --git a/packages/form/src/containers/Container.vue b/packages/form/src/containers/Container.vue
index 99d547b2..73bb8e46 100644
--- a/packages/form/src/containers/Container.vue
+++ b/packages/form/src/containers/Container.vue
@@ -104,7 +104,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, inject, PropType, ref, resolveComponent, watchEffect } from 'vue';
-import { WarningFilled } from '@element-plus/icons';
+import { WarningFilled } from '@element-plus/icons-vue';
 
 import { ChildConfig, ContainerCommonConfig, FormState, FormValue } from '../schema';
 import { display as displayFunction, filterFunction, getRules } from '../utils/form';
diff --git a/packages/form/src/containers/GroupListItem.vue b/packages/form/src/containers/GroupListItem.vue
index 04a0afe9..78040efb 100644
--- a/packages/form/src/containers/GroupListItem.vue
+++ b/packages/form/src/containers/GroupListItem.vue
@@ -2,7 +2,7 @@
   <div class="m-fields-group-list-item">
     <div>
       <el-icon style="margin-right: 7px" @click="expandHandler"
-        ><caret-bottom v-if="expand" /><caret-right v-else
+        ><CaretBottom v-if="expand" /><CaretRight v-else
       /></el-icon>
 
       <el-button text @click="expandHandler">{{ title }}</el-button>
@@ -17,7 +17,7 @@
 
       <template v-if="movable()">
         <el-button v-show="index !== 0" text size="small" @click="changeOrder(-1)"
-          >上移<el-icon><CaretRight /></el-icon
+          >上移<el-icon><CaretTop /></el-icon
         ></el-button>
         <el-button v-show="index !== length - 1" text size="small" @click="changeOrder(1)"
           >下移<el-icon><CaretBottom /></el-icon
@@ -41,7 +41,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, inject, PropType, ref, watchEffect } from 'vue';
-import { CaretBottom, CaretRight, Delete } from '@element-plus/icons';
+import { CaretBottom, CaretRight, CaretTop, Delete } from '@element-plus/icons-vue';
 
 import { FormState, GroupListConfig } from '../schema';
 import { filterFunction } from '../utils/form';
@@ -49,7 +49,7 @@ import { filterFunction } from '../utils/form';
 export default defineComponent({
   name: 'm-form-group-list-item',
 
-  components: { CaretRight, CaretBottom },
+  components: { CaretBottom, CaretRight, CaretTop },
 
   props: {
     labelWidth: String,
diff --git a/packages/form/src/containers/Panel.vue b/packages/form/src/containers/Panel.vue
index ce9a526d..081caefc 100644
--- a/packages/form/src/containers/Panel.vue
+++ b/packages/form/src/containers/Panel.vue
@@ -51,7 +51,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, inject, PropType, ref } from 'vue';
-import { CaretBottom, CaretRight } from '@element-plus/icons';
+import { CaretBottom, CaretRight } from '@element-plus/icons-vue';
 
 import { FormState, PanelConfig } from '../schema';
 import { filterFunction } from '../utils/form';
diff --git a/packages/form/src/containers/Table.vue b/packages/form/src/containers/Table.vue
index 8dbf34e0..89baebc2 100644
--- a/packages/form/src/containers/Table.vue
+++ b/packages/form/src/containers/Table.vue
@@ -153,7 +153,7 @@
 <script lang="ts">
 /* eslint-disable no-param-reassign */
 import { computed, defineComponent, inject, onMounted, PropType, ref, toRefs } from 'vue';
-import { ArrowDown, ArrowUp, Delete, FullScreen, Grid } from '@element-plus/icons';
+import { ArrowDown, ArrowUp, Delete, FullScreen, Grid } from '@element-plus/icons-vue';
 import { ElMessage, ElTable, UploadFile } from 'element-plus';
 import { cloneDeep } from 'lodash-es';
 import Sortable, { SortableEvent } from 'sortablejs';
diff --git a/playground/package.json b/playground/package.json
index 6e3cadb6..40beff13 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -11,7 +11,7 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "@element-plus/icons": "0.0.11",
+    "@element-plus/icons-vue": "^2.0.6",
     "@tmagic/editor": "1.1.0-beta.0",
     "@tmagic/form": "1.1.0-beta.0",
     "@tmagic/schema": "1.1.0-beta.0",
diff --git a/playground/src/configs/componentGroupList.ts b/playground/src/configs/componentGroupList.ts
index ad579756..6e93aef6 100644
--- a/playground/src/configs/componentGroupList.ts
+++ b/playground/src/configs/componentGroupList.ts
@@ -1,4 +1,4 @@
-import { FolderOpened, Grid, PictureFilled, SwitchButton, Tickets } from '@element-plus/icons';
+import { FolderOpened, Grid, PictureFilled, SwitchButton, Tickets } from '@element-plus/icons-vue';
 
 export default [
   {
diff --git a/playground/src/pages/Editor.vue b/playground/src/pages/Editor.vue
index 2dcb4602..87b303ff 100644
--- a/playground/src/pages/Editor.vue
+++ b/playground/src/pages/Editor.vue
@@ -33,7 +33,7 @@
 <script lang="ts">
 import { defineComponent, ref, toRaw } from 'vue';
 import { useRouter } from 'vue-router';
-import { Coin, Connection, Document } from '@element-plus/icons';
+import { Coin, Connection, Document } from '@element-plus/icons-vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import serialize from 'serialize-javascript';
 
diff --git a/playground/src/pages/Form.vue b/playground/src/pages/Form.vue
index ae6210fc..5b47d893 100644
--- a/playground/src/pages/Form.vue
+++ b/playground/src/pages/Form.vue
@@ -16,7 +16,7 @@
 <script lang="ts" setup>
 import { markRaw, ref } from 'vue';
 import { useRouter } from 'vue-router';
-import { Coin } from '@element-plus/icons';
+import { Coin } from '@element-plus/icons-vue';
 import { ElMessage } from 'element-plus';
 
 import { MenuButton } from '@tmagic/editor';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e6fc66ac..0af9ee5e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -72,7 +72,7 @@ importers:
 
   docs:
     specifiers:
-      '@element-plus/icons': 0.0.11
+      '@element-plus/icons-vue': ^2.0.6
       '@tmagic/form': ^1.0.2
       '@tmagic/schema': ^1.0.2
       '@tmagic/utils': ^1.0.2
@@ -89,7 +89,7 @@ importers:
       vue: ^3.2.0
       vuepress: ^2.0.0-beta.48
     dependencies:
-      '@element-plus/icons': 0.0.11
+      '@element-plus/icons-vue': 2.0.6_vue@3.2.37
       '@tmagic/form': 1.0.5
       '@tmagic/schema': 1.0.5
       '@tmagic/utils': 1.0.5
@@ -129,7 +129,7 @@ importers:
   packages/editor:
     specifiers:
       '@babel/core': ^7.18.0
-      '@element-plus/icons': 0.0.11
+      '@element-plus/icons-vue': ^2.0.6
       '@tmagic/core': 1.1.0-beta.0
       '@tmagic/form': 1.1.0-beta.0
       '@tmagic/schema': 1.1.0-beta.0
@@ -159,7 +159,7 @@ importers:
       vue-tsc: ^0.38.2
     dependencies:
       '@babel/core': 7.18.2
-      '@element-plus/icons': 0.0.11
+      '@element-plus/icons-vue': 2.0.6_vue@3.2.37
       '@tmagic/core': link:../core
       '@tmagic/form': link:../form
       '@tmagic/schema': link:../schema
@@ -192,7 +192,7 @@ importers:
   packages/form:
     specifiers:
       '@babel/core': ^7.18.0
-      '@element-plus/icons': 0.0.11
+      '@element-plus/icons-vue': ^2.0.6
       '@tmagic/utils': 1.1.0-beta.0
       '@types/lodash-es': ^4.17.4
       '@types/node': ^15.12.4
@@ -211,7 +211,7 @@ importers:
       vue: ^3.2.0
       vue-tsc: ^0.38.2
     dependencies:
-      '@element-plus/icons': 0.0.11
+      '@element-plus/icons-vue': 2.0.6_vue@3.2.37
       '@tmagic/utils': link:../utils
       element-plus: 2.2.6_vue@3.2.37
       lodash-es: 4.17.21
@@ -392,7 +392,7 @@ importers:
 
   playground:
     specifiers:
-      '@element-plus/icons': 0.0.11
+      '@element-plus/icons-vue': ^2.0.6
       '@tmagic/editor': 1.1.0-beta.0
       '@tmagic/form': 1.1.0-beta.0
       '@tmagic/schema': 1.1.0-beta.0
@@ -414,7 +414,7 @@ importers:
       vue-router: ^4.0.10
       vue-tsc: ^0.38.2
     dependencies:
-      '@element-plus/icons': 0.0.11
+      '@element-plus/icons-vue': 2.0.6_vue@3.2.37
       '@tmagic/editor': link:../packages/editor
       '@tmagic/form': link:../packages/form
       '@tmagic/schema': link:../packages/schema
@@ -1281,8 +1281,8 @@ packages:
     resolution: {integrity: sha512-HsbMKc0ZAQH+EUeCmI/2PvTYSybmkaWwakU8QGDYYgMVIg9BQ5sM0A0Nnombjxo2+JzXHxmH+jw//yGX+y6GYw==}
     dev: false
 
-  /@element-plus/icons-vue/2.0.5_vue@3.2.37:
-    resolution: {integrity: sha512-jvNWyKcdvPvMDLTWjghrPY+bYHKqh7hbAFIPe+HWR073zilzt33csREzmKx3VwhdlJUW5u0nCqN+0rwI8jlH+w==}
+  /@element-plus/icons-vue/2.0.6_vue@3.2.37:
+    resolution: {integrity: sha512-lPpG8hYkjL/Z97DH5Ei6w6o22Z4YdNglWCNYOPcB33JCF2A4wye6HFgSI7hEt9zdLyxlSpiqtgf9XcYU+m5mew==}
     peerDependencies:
       vue: ^3.2.0
     dependencies:
@@ -3902,7 +3902,7 @@ packages:
       vue: ^3.2.0
     dependencies:
       '@ctrl/tinycolor': 3.4.1
-      '@element-plus/icons-vue': 2.0.5_vue@3.2.37
+      '@element-plus/icons-vue': 2.0.6_vue@3.2.37
       '@floating-ui/dom': 0.5.4
       '@popperjs/core': /@sxzz/popperjs-es/2.11.7
       '@types/lodash': 4.14.182