diff --git a/docs/en-US/component/datetime-picker.md b/docs/en-US/component/datetime-picker.md
index 2e3f73575d..b1f6536cd2 100644
--- a/docs/en-US/component/datetime-picker.md
+++ b/docs/en-US/component/datetime-picker.md
@@ -66,31 +66,31 @@ datetime-picker/default-time
 
 ## Attributes
 
-| Attribute             | Description                                                                                           | Type                                              | Accepted Values                                                                                                                                                                 | Default              |
-| --------------------- | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |
-| model-value / v-model | binding value                                                                                         | date(DateTimePicker) / array(DateTimeRangePicker) | —                                                                                                                                                                               | —                    |
-| readonly              | whether DatePicker is read only                                                                       | boolean                                           | —                                                                                                                                                                               | false                |
-| disabled              | whether DatePicker is disabled                                                                        | boolean                                           | —                                                                                                                                                                               | false                |
-| editable              | whether the input is editable                                                                         | boolean                                           | —                                                                                                                                                                               | true                 |
-| clearable             | whether to show clear button                                                                          | boolean                                           | —                                                                                                                                                                               | true                 |
-| size                  | size of Input                                                                                         | string                                            | large/medium/small/mini                                                                                                                                                         | large                |
-| placeholder           | placeholder in non-range mode                                                                         | string                                            | —                                                                                                                                                                               | —                    |
-| start-placeholder     | placeholder for the start date in range mode                                                          | string                                            | —                                                                                                                                                                               | —                    |
-| end-placeholder       | placeholder for the end date in range mode                                                            | string                                            | —                                                                                                                                                                               | —                    |
-| time-arrow-control    | whether to pick time using arrow buttons                                                              | boolean                                           | —                                                                                                                                                                               | false                |
-| type                  | type of the picker                                                                                    | string                                            | year/month/date/datetime/ week/datetimerange/daterange                                                                                                                          | date                 |
-| format                | format of the displayed value in the input box                                                        | string                                            | see [date formats](/en-US/component/date-picker#date-formats)                                                                                                                   | YYYY-MM-DD HH:mm:ss  |
-| popper-class          | custom class name for DateTimePicker's dropdown                                                       | string                                            | —                                                                                                                                                                               | —                    |
-| range-separator       | range separator                                                                                       | string                                            | -                                                                                                                                                                               | '-'                  |
-| default-value         | optional, default date of the calendar                                                                | Date                                              | anything accepted by `new Date()`                                                                                                                                               | —                    |
-| default-time          | the default time value after picking a date                                                           | non-range: Date / range: Date[]                   | non-range: a Date object, range: array of two Date objects, and the first item is for the start date and second for the end date. Time `00:00:00` will be used if not specified | —                    |
-| name                  | same as `name` in native input                                                                        | string                                            | —                                                                                                                                                                               | —                    |
-| unlink-panels         | unllink two date-panels in range-picker                                                               | boolean                                           | —                                                                                                                                                                               | false                |
-| prefix-icon           | Custom prefix icon class                                                                              | string                                            | —                                                                                                                                                                               | el-icon-date         |
-| clear-icon            | Custom clear icon class                                                                               | string                                            | —                                                                                                                                                                               | el-icon-circle-close |
-| shortcuts             | an object array to set shortcut options                                                               | object[{ text: string, value: date / function }]  | —                                                                                                                                                                               | —                    |
-| disabledDate          | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function                                          | —                                                                                                                                                                               | —                    |
-| cellClassName         | set custom className                                                                                  | Function(Date)                                    | —                                                                                                                                                                               | —                    |
+| Attribute             | Description                                                                                           | Type                                              | Accepted Values                                                                                                                                                                 | Default             |
+| --------------------- | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
+| model-value / v-model | binding value                                                                                         | date(DateTimePicker) / array(DateTimeRangePicker) | —                                                                                                                                                                               | —                   |
+| readonly              | whether DatePicker is read only                                                                       | boolean                                           | —                                                                                                                                                                               | false               |
+| disabled              | whether DatePicker is disabled                                                                        | boolean                                           | —                                                                                                                                                                               | false               |
+| editable              | whether the input is editable                                                                         | boolean                                           | —                                                                                                                                                                               | true                |
+| clearable             | whether to show clear button                                                                          | boolean                                           | —                                                                                                                                                                               | true                |
+| size                  | size of Input                                                                                         | string                                            | large/medium/small/mini                                                                                                                                                         | large               |
+| placeholder           | placeholder in non-range mode                                                                         | string                                            | —                                                                                                                                                                               | —                   |
+| start-placeholder     | placeholder for the start date in range mode                                                          | string                                            | —                                                                                                                                                                               | —                   |
+| end-placeholder       | placeholder for the end date in range mode                                                            | string                                            | —                                                                                                                                                                               | —                   |
+| time-arrow-control    | whether to pick time using arrow buttons                                                              | boolean                                           | —                                                                                                                                                                               | false               |
+| type                  | type of the picker                                                                                    | string                                            | year/month/date/datetime/ week/datetimerange/daterange                                                                                                                          | date                |
+| format                | format of the displayed value in the input box                                                        | string                                            | see [date formats](/en-US/component/date-picker#date-formats)                                                                                                                   | YYYY-MM-DD HH:mm:ss |
+| popper-class          | custom class name for DateTimePicker's dropdown                                                       | string                                            | —                                                                                                                                                                               | —                   |
+| range-separator       | range separator                                                                                       | string                                            | -                                                                                                                                                                               | '-'                 |
+| default-value         | optional, default date of the calendar                                                                | Date                                              | anything accepted by `new Date()`                                                                                                                                               | —                   |
+| default-time          | the default time value after picking a date                                                           | non-range: Date / range: Date[]                   | non-range: a Date object, range: array of two Date objects, and the first item is for the start date and second for the end date. Time `00:00:00` will be used if not specified | —                   |
+| name                  | same as `name` in native input                                                                        | string                                            | —                                                                                                                                                                               | —                   |
+| unlink-panels         | unllink two date-panels in range-picker                                                               | boolean                                           | —                                                                                                                                                                               | false               |
+| prefix-icon           | Custom prefix icon component                                                                          | string                                            | —                                                                                                                                                                               | Date                |
+| clear-icon            | Custom clear icon component                                                                           | string                                            | —                                                                                                                                                                               | CircleClose         |
+| shortcuts             | an object array to set shortcut options                                                               | object[{ text: string, value: date / function }]  | —                                                                                                                                                                               | —                   |
+| disabledDate          | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function                                          | —                                                                                                                                                                               | —                   |
+| cellClassName         | set custom className                                                                                  | Function(Date)                                    | —                                                                                                                                                                               | —                   |
 
 ## Events
 
diff --git a/docs/en-US/component/dropdown.md b/docs/en-US/component/dropdown.md
index 2f0ced4eb0..5501a07168 100644
--- a/docs/en-US/component/dropdown.md
+++ b/docs/en-US/component/dropdown.md
@@ -7,7 +7,7 @@ lang: en-US
 
 Toggleable menu for displaying lists of links and actions.
 
-<style lang="scss" scoped>
+<style lang="scss" >
 
 .example-showcase {
   .el-dropdown {
@@ -19,9 +19,10 @@ Toggleable menu for displaying lists of links and actions.
     cursor: pointer;
     color: var(--el-color-primary);
   }
-  .el-icon-arrow-down {
-    font-size: 12px;
-  }
+.el-icon--right {
+  font-size: 12px;
+  vertical-align: middle;
+}
 }
 
 .block-col-2 {
diff --git a/docs/en-US/component/select-v2.md b/docs/en-US/component/select-v2.md
index 768c311ba3..171107bd4c 100644
--- a/docs/en-US/component/select-v2.md
+++ b/docs/en-US/component/select-v2.md
@@ -143,7 +143,7 @@ select-v2/remote-search
 <!-- | no-match-text | 搜索条件无匹配时显示的文字，也可以使用`#empty`设置 | string | — | 无匹配数据 | -->
 <!-- | reserve-keyword | 多选且可搜索时，是否在选中一个Option后保留当前的搜索关键词 | boolean | — | false |
 | default-first-option | 在输入框按下回车，选择第一个匹配项。需配合 `filterable` 或 `remote` 使用 | boolean | - | false |
-| clear-icon | 自定义清空图标的类名 | string | — | el-icon-circle-close |
+| clear-icon | 自定义清空图标的类名 | string / component | — | CircleClose |
 | allow-create | 是否允许用户创建新条目，需配合 `filterable` 使用 | boolean | — | false |
 | filter-method | 自定义搜索方法 | function | — | — |
 | remote | 是否为远程搜索 | boolean | — | false |
diff --git a/docs/examples/avatar/types.vue b/docs/examples/avatar/types.vue
index 4daaa8eb57..83efbdc605 100644
--- a/docs/examples/avatar/types.vue
+++ b/docs/examples/avatar/types.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="demo-type">
     <div>
-      <el-avatar :icon="User"></el-avatar>
+      <el-avatar :icon="UserFilled"></el-avatar>
     </div>
     <div>
       <el-avatar
@@ -13,15 +13,7 @@
     </div>
   </div>
 </template>
-<script lang="ts">
-import { defineComponent, reactive, toRefs } from 'vue'
-import { User } from '@element-plus/icons'
 
-export default defineComponent({
-  setup() {
-    return {
-      User,
-    }
-  },
-})
+<script setup lang="ts">
+import { UserFilled } from '@element-plus/icons'
 </script>
diff --git a/docs/examples/badge/basic.vue b/docs/examples/badge/basic.vue
index 8ea142e4ed..853302d089 100644
--- a/docs/examples/badge/basic.vue
+++ b/docs/examples/badge/basic.vue
@@ -14,7 +14,8 @@
 
   <el-dropdown trigger="click">
     <span class="el-dropdown-link">
-      Click Me<i class="el-icon-caret-bottom el-icon--right"></i>
+      Click Me
+      <el-icon class="el-icon--right"><caret-bottom /></el-icon>
     </span>
     <template #dropdown>
       <el-dropdown-menu>
@@ -31,6 +32,10 @@
   </el-dropdown>
 </template>
 
+<script lang="ts" setup>
+import { CaretBottom } from '@element-plus/icons'
+</script>
+
 <style scoped>
 .item {
   margin-top: 10px;
diff --git a/docs/examples/badge/dot.vue b/docs/examples/badge/dot.vue
index d27d7c2c6b..98f364df37 100644
--- a/docs/examples/badge/dot.vue
+++ b/docs/examples/badge/dot.vue
@@ -1,14 +1,14 @@
 <template>
   <el-badge is-dot class="item">query</el-badge>
   <el-badge is-dot class="item">
-    <el-button
-      class="share-button"
-      icon="el-icon-share"
-      type="primary"
-    ></el-button>
+    <el-button class="share-button" :icon="Share" type="primary"></el-button>
   </el-badge>
 </template>
 
+<script lang="ts" setup>
+import { Share } from '@element-plus/icons'
+</script>
+
 <style scoped>
 .item {
   margin-top: 10px;
diff --git a/docs/examples/breadcrumb/icon.vue b/docs/examples/breadcrumb/icon.vue
index 007acf1c9d..b54089defc 100644
--- a/docs/examples/breadcrumb/icon.vue
+++ b/docs/examples/breadcrumb/icon.vue
@@ -1,8 +1,12 @@
 <template>
-  <el-breadcrumb separator-class="el-icon-arrow-right">
+  <el-breadcrumb :separator-icon="ArrowRight">
     <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
     <el-breadcrumb-item>promotion management</el-breadcrumb-item>
     <el-breadcrumb-item>promotion list</el-breadcrumb-item>
     <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
   </el-breadcrumb>
 </template>
+
+<script lang="ts" setup>
+import { ArrowRight } from '@element-plus/icons'
+</script>
diff --git a/docs/examples/container/example.vue b/docs/examples/container/example.vue
index eb9e52480c..e8d3b71ce1 100644
--- a/docs/examples/container/example.vue
+++ b/docs/examples/container/example.vue
@@ -3,9 +3,9 @@
     <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
       <el-menu :default-openeds="['1', '3']">
         <el-sub-menu index="1">
-          <template #title
-            ><i class="el-icon-message"></i>Navigator One</template
-          >
+          <template #title>
+            <el-icon><message /></el-icon>Navigator One
+          </template>
           <el-menu-item-group>
             <template #title>Group 1</template>
             <el-menu-item index="1-1">Option 1</el-menu-item>
@@ -20,7 +20,9 @@
           </el-sub-menu>
         </el-sub-menu>
         <el-sub-menu index="2">
-          <template #title><i class="el-icon-menu"></i>Navigator Two</template>
+          <template #title>
+            <el-icon><icon-menu /></el-icon>Navigator Two
+          </template>
           <el-menu-item-group>
             <template #title>Group 1</template>
             <el-menu-item index="2-1">Option 1</el-menu-item>
@@ -35,9 +37,9 @@
           </el-sub-menu>
         </el-sub-menu>
         <el-sub-menu index="3">
-          <template #title
-            ><i class="el-icon-setting"></i>Navigator Three</template
-          >
+          <template #title>
+            <el-icon><setting /></el-icon>Navigator Three
+          </template>
           <el-menu-item-group>
             <template #title>Group 1</template>
             <el-menu-item index="3-1">Option 1</el-menu-item>
@@ -57,7 +59,7 @@
     <el-container>
       <el-header style="text-align: right; font-size: 12px">
         <el-dropdown>
-          <i class="el-icon-setting" style="margin-right: 15px"></i>
+          <el-icon style="margin-right: 15px"><setting /></el-icon>
           <template #dropdown>
             <el-dropdown-menu>
               <el-dropdown-item>View</el-dropdown-item>
@@ -84,8 +86,14 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
+import { Message, Menu, Setting } from '@element-plus/icons'
 
 export default defineComponent({
+  components: {
+    Message,
+    Setting,
+    'icon-menu': Menu,
+  },
   setup() {
     const item = {
       date: '2016-05-02',
diff --git a/docs/examples/descriptions/sizes.vue b/docs/examples/descriptions/sizes.vue
index 27c2f3c47c..6a1049e42e 100644
--- a/docs/examples/descriptions/sizes.vue
+++ b/docs/examples/descriptions/sizes.vue
@@ -18,35 +18,35 @@
     </template>
     <el-descriptions-item>
       <template #label>
-        <i class="el-icon-user"></i>
+        <el-icon><user /></el-icon>
         Username
       </template>
       kooriookami
     </el-descriptions-item>
     <el-descriptions-item>
       <template #label>
-        <i class="el-icon-mobile-phone"></i>
+        <el-icon><iphone /></el-icon>
         Telephone
       </template>
       18100000000
     </el-descriptions-item>
     <el-descriptions-item>
       <template #label>
-        <i class="el-icon-location-outline"></i>
+        <el-icon><location /></el-icon>
         Place
       </template>
       Suzhou
     </el-descriptions-item>
     <el-descriptions-item>
       <template #label>
-        <i class="el-icon-tickets"></i>
+        <el-icon><tickets /></el-icon>
         Remarks
       </template>
       <el-tag size="small">School</el-tag>
     </el-descriptions-item>
     <el-descriptions-item>
       <template #label>
-        <i class="el-icon-office-building"></i>
+        <el-icon><office-building /></el-icon>
         Address
       </template>
       No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
@@ -76,7 +76,22 @@
 </template>
 
 <script lang="ts">
+import {
+  User,
+  Iphone,
+  Location,
+  Tickets,
+  OfficeBuilding,
+} from '@element-plus/icons'
+
 export default {
+  components: {
+    User,
+    Iphone,
+    Location,
+    Tickets,
+    OfficeBuilding,
+  },
   data() {
     return {
       size: '',
diff --git a/docs/examples/divider/custom-content.vue b/docs/examples/divider/custom-content.vue
index aafe5fb678..0f95b84ad2 100644
--- a/docs/examples/divider/custom-content.vue
+++ b/docs/examples/divider/custom-content.vue
@@ -3,7 +3,9 @@
     <span>What you are you do not see, what you see is your shadow. </span>
     <el-divider content-position="left">Rabindranath Tagore</el-divider>
     <span>I cannot choose the best. The best chooses me.</span>
-    <el-divider><i class="el-icon-star-on"></i></el-divider>
+    <el-divider>
+      <el-icon><star-filled /></el-icon>
+    </el-divider>
     <span
       >My wishes are fools, they shout across thy song, my Master. Let me but
       listen.</span
@@ -11,3 +13,7 @@
     <el-divider content-position="right">Rabindranath Tagore</el-divider>
   </div>
 </template>
+
+<script lang="ts" setup>
+import { StarFilled } from '@element-plus/icons'
+</script>
diff --git a/docs/examples/dropdown/basic-usage.vue b/docs/examples/dropdown/basic-usage.vue
index cf7c981860..a6c024f076 100644
--- a/docs/examples/dropdown/basic-usage.vue
+++ b/docs/examples/dropdown/basic-usage.vue
@@ -1,7 +1,10 @@
 <template>
   <el-dropdown>
     <span class="el-dropdown-link">
-      Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
+      Dropdown List
+      <el-icon class="el-icon--right">
+        <arrow-down />
+      </el-icon>
     </span>
     <template #dropdown>
       <el-dropdown-menu>
@@ -15,12 +18,6 @@
   </el-dropdown>
 </template>
 
-<style>
-.el-dropdown-link {
-  cursor: pointer;
-  color: #409eff;
-}
-.el-icon-arrow-down {
-  font-size: 12px;
-}
-</style>
+<script lang="ts" setup>
+import { ArrowDown } from '@element-plus/icons'
+</script>
diff --git a/docs/examples/dropdown/command-event.vue b/docs/examples/dropdown/command-event.vue
index 26751f4097..c67ea2b99a 100644
--- a/docs/examples/dropdown/command-event.vue
+++ b/docs/examples/dropdown/command-event.vue
@@ -1,7 +1,7 @@
 <template>
   <el-dropdown @command="handleCommand">
     <span class="el-dropdown-link">
-      Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
+      Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
     </span>
     <template #dropdown>
       <el-dropdown-menu>
@@ -18,8 +18,12 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { ElMessage } from 'element-plus'
+import { ArrowDown } from '@element-plus/icons'
 
 export default defineComponent({
+  components: {
+    ArrowDown,
+  },
   setup() {
     const handleCommand = (command) => {
       ElMessage(`click on item ${command}`)
@@ -30,13 +34,3 @@ export default defineComponent({
   },
 })
 </script>
-
-<style>
-.el-dropdown-link {
-  cursor: pointer;
-  color: #409eff;
-}
-.el-icon-arrow-down {
-  font-size: 12px;
-}
-</style>
diff --git a/docs/examples/dropdown/how-to-trigger.vue b/docs/examples/dropdown/how-to-trigger.vue
index 81926d23a5..d01d206913 100644
--- a/docs/examples/dropdown/how-to-trigger.vue
+++ b/docs/examples/dropdown/how-to-trigger.vue
@@ -4,21 +4,17 @@
       <span class="demonstration">hover to trigger</span>
       <el-dropdown>
         <span class="el-dropdown-link">
-          Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
+          Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
         </span>
         <template #dropdown>
           <el-dropdown-menu>
-            <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>
-            <el-dropdown-item icon="el-icon-circle-plus"
-              >Action 2</el-dropdown-item
-            >
-            <el-dropdown-item icon="el-icon-circle-plus-outline"
-              >Action 3</el-dropdown-item
-            >
-            <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
-            <el-dropdown-item icon="el-icon-circle-check"
-              >Action 5</el-dropdown-item
-            >
+            <el-dropdown-item :icon="Plus">Action 1</el-dropdown-item>
+            <el-dropdown-item :icon="CirclePlusFilled">
+              Action 2
+            </el-dropdown-item>
+            <el-dropdown-item :icon="CirclePlus">Action 3</el-dropdown-item>
+            <el-dropdown-item :icon="Check">Action 4</el-dropdown-item>
+            <el-dropdown-item :icon="CircleCheck">Action 5</el-dropdown-item>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
@@ -27,21 +23,17 @@
       <span class="demonstration">click to trigger</span>
       <el-dropdown trigger="click">
         <span class="el-dropdown-link">
-          Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
+          Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
         </span>
         <template #dropdown>
           <el-dropdown-menu>
-            <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>
-            <el-dropdown-item icon="el-icon-circle-plus"
-              >Action 2</el-dropdown-item
-            >
-            <el-dropdown-item icon="el-icon-circle-plus-outline"
-              >Action 3</el-dropdown-item
-            >
-            <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
-            <el-dropdown-item icon="el-icon-circle-check"
-              >Action 5</el-dropdown-item
-            >
+            <el-dropdown-item :icon="Plus">Action 1</el-dropdown-item>
+            <el-dropdown-item :icon="CirclePlusFilled">
+              Action 2
+            </el-dropdown-item>
+            <el-dropdown-item :icon="CirclePlus">Action 3</el-dropdown-item>
+            <el-dropdown-item :icon="Check">Action 4</el-dropdown-item>
+            <el-dropdown-item :icon="CircleCheck">Action 5</el-dropdown-item>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
@@ -50,21 +42,17 @@
       <span class="demonstration">right click to trigger</span>
       <el-dropdown trigger="contextmenu">
         <span class="el-dropdown-link">
-          Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
+          Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
         </span>
         <template #dropdown>
           <el-dropdown-menu>
-            <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>
-            <el-dropdown-item icon="el-icon-circle-plus"
-              >Action 2</el-dropdown-item
-            >
-            <el-dropdown-item icon="el-icon-circle-plus-outline"
-              >Action 3</el-dropdown-item
-            >
-            <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
-            <el-dropdown-item icon="el-icon-circle-check"
-              >Action 5</el-dropdown-item
-            >
+            <el-dropdown-item :icon="Plus">Action 1</el-dropdown-item>
+            <el-dropdown-item :icon="CirclePlusFilled">
+              Action 2
+            </el-dropdown-item>
+            <el-dropdown-item :icon="CirclePlus">Action 3</el-dropdown-item>
+            <el-dropdown-item :icon="Check">Action 4</el-dropdown-item>
+            <el-dropdown-item :icon="CircleCheck">Action 5</el-dropdown-item>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
@@ -72,18 +60,13 @@
   </el-row>
 </template>
 
-<style>
-.el-dropdown-link {
-  cursor: pointer;
-  color: #409eff;
-}
-.el-icon-arrow-down {
-  font-size: 12px;
-}
-.demonstration {
-  display: block;
-  color: var(--el-text-color-secondary);
-  font-size: 14px;
-  margin-bottom: 20px;
-}
-</style>
+<script lang="ts" setup>
+import {
+  ArrowDown,
+  CircleCheck,
+  Check,
+  CirclePlus,
+  CirclePlusFilled,
+  Plus,
+} from '@element-plus/icons'
+</script>
diff --git a/docs/examples/dropdown/menu-hiding-behavior.vue b/docs/examples/dropdown/menu-hiding-behavior.vue
index 819a56ddaf..dbb3209f88 100644
--- a/docs/examples/dropdown/menu-hiding-behavior.vue
+++ b/docs/examples/dropdown/menu-hiding-behavior.vue
@@ -1,7 +1,7 @@
 <template>
   <el-dropdown :hide-on-click="false">
     <span class="el-dropdown-link">
-      Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
+      Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
     </span>
     <template #dropdown>
       <el-dropdown-menu>
@@ -15,12 +15,6 @@
   </el-dropdown>
 </template>
 
-<style>
-.el-dropdown-link {
-  cursor: pointer;
-  color: #409eff;
-}
-.el-icon-arrow-down {
-  font-size: 12px;
-}
-</style>
+<script lang="ts" setup>
+import { ArrowDown } from '@element-plus/icons'
+</script>
diff --git a/docs/examples/dropdown/triggering-element.vue b/docs/examples/dropdown/triggering-element.vue
index 3e3e52e848..f312427880 100644
--- a/docs/examples/dropdown/triggering-element.vue
+++ b/docs/examples/dropdown/triggering-element.vue
@@ -1,7 +1,7 @@
 <template>
   <el-dropdown>
     <el-button type="primary">
-      Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
+      Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
     </el-button>
     <template #dropdown>
       <el-dropdown-menu>
@@ -29,8 +29,12 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { ArrowDown } from '@element-plus/icons'
 
 export default defineComponent({
+  components: {
+    ArrowDown,
+  },
   setup() {
     const handleClick = () => {
       alert('button click')
@@ -41,15 +45,3 @@ export default defineComponent({
   },
 })
 </script>
-
-<style>
-.el-dropdown {
-  vertical-align: top;
-}
-.el-dropdown + .el-dropdown {
-  margin-left: 15px;
-}
-.el-icon-arrow-down {
-  font-size: 12px;
-}
-</style>
diff --git a/docs/examples/link/with-icon.vue b/docs/examples/link/with-icon.vue
index 99fb483b99..e68cb3ff80 100644
--- a/docs/examples/link/with-icon.vue
+++ b/docs/examples/link/with-icon.vue
@@ -2,10 +2,10 @@
   <div>
     <el-link :icon="Edit">Edit</el-link>
     <el-link>
-      Check<el-icon class="el-icon--right"><view /></el-icon>
+      Check<el-icon class="el-icon--right"><icon-view /></el-icon>
     </el-link>
   </div>
 </template>
 <script setup lang="ts">
-import { Edit, View } from '@element-plus/icons'
+import { Edit, View as IconView } from '@element-plus/icons'
 </script>
diff --git a/docs/examples/loading/customization.vue b/docs/examples/loading/customization.vue
index 3aa8cd9860..9e93323f05 100644
--- a/docs/examples/loading/customization.vue
+++ b/docs/examples/loading/customization.vue
@@ -2,7 +2,7 @@
   <el-table
     v-loading="loading"
     element-loading-text="Loading..."
-    element-loading-spinner="el-icon-loading"
+    :element-loading-spinner="Loading"
     element-loading-background="rgba(0, 0, 0, 0.8)"
     :data="tableData"
     style="width: 100%"
@@ -27,10 +27,12 @@
 
 <script lang="ts">
 import { defineComponent, reactive, toRefs } from 'vue'
+import { Loading } from '@element-plus/icons'
 
 export default defineComponent({
   setup() {
     const state = reactive({
+      Loading,
       tableData: [
         {
           date: '2016-05-02',
diff --git a/docs/examples/loading/fullscreen.vue b/docs/examples/loading/fullscreen.vue
index 4119b00648..61c4909f06 100644
--- a/docs/examples/loading/fullscreen.vue
+++ b/docs/examples/loading/fullscreen.vue
@@ -27,7 +27,6 @@ export default defineComponent({
       const loading = ElLoading.service({
         lock: true,
         text: 'Loading',
-        spinner: 'el-icon-loading',
         background: 'rgba(0, 0, 0, 0.7)',
       })
       setTimeout(() => {
diff --git a/docs/examples/menu/collapse.vue b/docs/examples/menu/collapse.vue
index a73ea9e8c5..c583f48856 100644
--- a/docs/examples/menu/collapse.vue
+++ b/docs/examples/menu/collapse.vue
@@ -12,7 +12,7 @@
   >
     <el-sub-menu index="1">
       <template #title>
-        <i class="el-icon-location"></i>
+        <el-icon><location /></el-icon>
         <span>Navigator One</span>
       </template>
       <el-menu-item-group>
@@ -29,15 +29,15 @@
       </el-sub-menu>
     </el-sub-menu>
     <el-menu-item index="2">
-      <i class="el-icon-menu"></i>
+      <el-icon><icon-menu /></el-icon>
       <template #title>Navigator Two</template>
     </el-menu-item>
     <el-menu-item index="3" disabled>
-      <i class="el-icon-document"></i>
+      <el-icon><document /></el-icon>
       <template #title>Navigator Three</template>
     </el-menu-item>
     <el-menu-item index="4">
-      <i class="el-icon-setting"></i>
+      <el-icon><setting /></el-icon>
       <template #title>Navigator Four</template>
     </el-menu-item>
   </el-menu>
@@ -45,8 +45,20 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
+import {
+  Location,
+  Document,
+  Menu as IconMenu,
+  Setting,
+} from '@element-plus/icons'
 
 export default defineComponent({
+  components: {
+    Location,
+    Document,
+    Setting,
+    IconMenu,
+  },
   setup() {
     const isCollapse = ref(true)
     const handleOpen = (key, keyPath) => {
diff --git a/docs/examples/menu/vertical.vue b/docs/examples/menu/vertical.vue
index 00af8e1b7d..0b1e8eb11b 100644
--- a/docs/examples/menu/vertical.vue
+++ b/docs/examples/menu/vertical.vue
@@ -10,7 +10,7 @@
       >
         <el-sub-menu index="1">
           <template #title>
-            <i class="el-icon-location"></i>
+            <el-icon><location /></el-icon>
             <span>Navigator One</span>
           </template>
           <el-menu-item-group title="Group One">
@@ -26,15 +26,15 @@
           </el-sub-menu>
         </el-sub-menu>
         <el-menu-item index="2">
-          <i class="el-icon-menu"></i>
+          <el-icon><icon-menu /></el-icon>
           <span>Navigator Two</span>
         </el-menu-item>
         <el-menu-item index="3" disabled>
-          <i class="el-icon-document"></i>
+          <el-icon><document /></el-icon>
           <span>Navigator Three</span>
         </el-menu-item>
         <el-menu-item index="4">
-          <i class="el-icon-setting"></i>
+          <el-icon><setting /></el-icon>
           <span>Navigator Four</span>
         </el-menu-item>
       </el-menu>
@@ -52,7 +52,7 @@
       >
         <el-sub-menu index="1">
           <template #title>
-            <i class="el-icon-location"></i>
+            <el-icon><location /></el-icon>
             <span>Navigator One</span>
           </template>
           <el-menu-item-group title="Group One">
@@ -68,15 +68,15 @@
           </el-sub-menu>
         </el-sub-menu>
         <el-menu-item index="2">
-          <i class="el-icon-menu"></i>
+          <el-icon><icon-menu /></el-icon>
           <span>Navigator Two</span>
         </el-menu-item>
         <el-menu-item index="3" disabled>
-          <i class="el-icon-document"></i>
+          <el-icon><document /></el-icon>
           <span>Navigator Three</span>
         </el-menu-item>
         <el-menu-item index="4">
-          <i class="el-icon-setting"></i>
+          <el-icon><setting /></el-icon>
           <span>Navigator Four</span>
         </el-menu-item>
       </el-menu>
@@ -86,8 +86,20 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+import {
+  Location,
+  Document,
+  Menu as IconMenu,
+  Setting,
+} from '@element-plus/icons'
 
 export default defineComponent({
+  components: {
+    Location,
+    Document,
+    Setting,
+    IconMenu,
+  },
   setup() {
     const handleOpen = (key, keyPath) => {
       console.log(key, keyPath)
diff --git a/docs/examples/page-header/custom-icon.vue b/docs/examples/page-header/custom-icon.vue
index efe980f179..f5338b8cc3 100644
--- a/docs/examples/page-header/custom-icon.vue
+++ b/docs/examples/page-header/custom-icon.vue
@@ -1,3 +1,7 @@
 <template>
-  <el-page-header icon="el-icon-arrow-left" content="detail" />
+  <el-page-header :icon="ArrowLeft" content="detail" />
 </template>
+
+<script lang="ts" setup>
+import { ArrowLeft } from '@element-plus/icons'
+</script>
diff --git a/docs/examples/progress/custom-color.vue b/docs/examples/progress/custom-color.vue
index 2f43a1d1b8..eeff87bdf1 100644
--- a/docs/examples/progress/custom-color.vue
+++ b/docs/examples/progress/custom-color.vue
@@ -8,8 +8,8 @@
     <el-progress :percentage="percentage" :color="customColors" />
     <div>
       <el-button-group>
-        <el-button icon="el-icon-minus" @click="decrease" />
-        <el-button icon="el-icon-plus" @click="increase" />
+        <el-button :icon="Minus" @click="decrease" />
+        <el-button :icon="Plus" @click="increase" />
       </el-button-group>
     </div>
   </div>
@@ -17,6 +17,7 @@
 
 <script lang="ts">
 import { defineComponent, reactive, toRefs } from 'vue'
+import { Minus, Plus } from '@element-plus/icons'
 
 export default defineComponent({
   setup() {
@@ -58,6 +59,8 @@ export default defineComponent({
       customColorMethod,
       increase,
       decrease,
+      Minus,
+      Plus,
     }
   },
 })
diff --git a/docs/examples/progress/customized-content.vue b/docs/examples/progress/customized-content.vue
index 75483d8216..0cbe51e826 100644
--- a/docs/examples/progress/customized-content.vue
+++ b/docs/examples/progress/customized-content.vue
@@ -12,7 +12,7 @@
       <span>Content</span>
     </el-progress>
     <el-progress type="circle" :percentage="100" status="success">
-      <el-button type="success" icon="el-icon-check" circle></el-button>
+      <el-button type="success" :icon="Check" circle></el-button>
     </el-progress>
     <el-progress type="dashboard" :percentage="80">
       <template #default="{ percentage }">
@@ -23,6 +23,10 @@
   </div>
 </template>
 
+<script lang="ts" setup>
+import { Check } from '@element-plus/icons'
+</script>
+
 <style lang="scss" scoped>
 .percentage-value {
   display: block;
diff --git a/docs/examples/progress/dashboard-progress-bar.vue b/docs/examples/progress/dashboard-progress-bar.vue
index ca3b162d4f..0070eaeeba 100644
--- a/docs/examples/progress/dashboard-progress-bar.vue
+++ b/docs/examples/progress/dashboard-progress-bar.vue
@@ -4,8 +4,8 @@
     <el-progress type="dashboard" :percentage="percentage2" :color="colors" />
     <div>
       <el-button-group>
-        <el-button icon="el-icon-minus" @click="decrease" />
-        <el-button icon="el-icon-plus" @click="increase" />
+        <el-button :icon="Minus" @click="decrease" />
+        <el-button :icon="Plus" @click="increase" />
       </el-button-group>
     </div>
   </div>
@@ -13,6 +13,7 @@
 
 <script lang="ts">
 import { defineComponent, reactive, toRefs, onMounted } from 'vue'
+import { Minus, Plus } from '@element-plus/icons'
 
 export default defineComponent({
   setup() {
@@ -49,6 +50,8 @@ export default defineComponent({
       ...toRefs(state),
       increase,
       decrease,
+      Minus,
+      Plus,
     }
   },
 })
diff --git a/docs/examples/steps/simple.vue b/docs/examples/steps/simple.vue
index b8f140e220..730d4e8f51 100644
--- a/docs/examples/steps/simple.vue
+++ b/docs/examples/steps/simple.vue
@@ -1,8 +1,8 @@
 <template>
   <el-steps :space="200" :active="1" simple>
-    <el-step title="Step 1" icon="el-icon-edit"></el-step>
-    <el-step title="Step 2" icon="el-icon-upload"></el-step>
-    <el-step title="Step 3" icon="el-icon-picture"></el-step>
+    <el-step title="Step 1" :icon="Edit"></el-step>
+    <el-step title="Step 2" :icon="UploadFilled"></el-step>
+    <el-step title="Step 3" :icon="Picture"></el-step>
   </el-steps>
 
   <el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
@@ -11,3 +11,7 @@
     <el-step title="Step 3"></el-step>
   </el-steps>
 </template>
+
+<script lang="ts" setup>
+import { Edit, UploadFilled, Picture } from '@element-plus/icons'
+</script>
diff --git a/docs/examples/steps/with-icon.vue b/docs/examples/steps/with-icon.vue
index a77480e624..8f7d93cf61 100644
--- a/docs/examples/steps/with-icon.vue
+++ b/docs/examples/steps/with-icon.vue
@@ -1,7 +1,11 @@
 <template>
   <el-steps :active="1">
-    <el-step title="Step 1" icon="el-icon-edit"></el-step>
-    <el-step title="Step 2" icon="el-icon-upload"></el-step>
-    <el-step title="Step 3" icon="el-icon-picture"></el-step>
+    <el-step title="Step 1" :icon="Edit"></el-step>
+    <el-step title="Step 2" :icon="Upload"></el-step>
+    <el-step title="Step 3" :icon="Picture"></el-step>
   </el-steps>
 </template>
+
+<script lang="ts" setup>
+import { Edit, Upload, Picture } from '@element-plus/icons'
+</script>
diff --git a/docs/examples/tabs/custom-tab.vue b/docs/examples/tabs/custom-tab.vue
index 53cd240c99..4184db4c41 100644
--- a/docs/examples/tabs/custom-tab.vue
+++ b/docs/examples/tabs/custom-tab.vue
@@ -2,7 +2,9 @@
   <el-tabs type="border-card">
     <el-tab-pane>
       <template #label>
-        <span><i class="el-icon-date"></i> Route</span>
+        <span>
+          <el-icon><calendar /></el-icon>Route
+        </span>
       </template>
       Route
     </el-tab-pane>
@@ -11,3 +13,7 @@
     <el-tab-pane label="Task">Task</el-tab-pane>
   </el-tabs>
 </template>
+
+<script lang="ts" setup>
+import { Calendar } from '@element-plus/icons'
+</script>