diff --git a/docs/.vitepress/crowdin/en-US/component/demo-block.json b/docs/.vitepress/crowdin/en-US/component/demo-block.json
index 836c292822..0d39104f81 100644
--- a/docs/.vitepress/crowdin/en-US/component/demo-block.json
+++ b/docs/.vitepress/crowdin/en-US/component/demo-block.json
@@ -5,6 +5,6 @@
   "copy-code": "Copy code",
   "switch-button-option-text": "Switch to Options API",
   "switch-button-setup-text": "Switch to Composition API",
-  "copy-success": "Copied！",
+  "copy-success": "Copied!",
   "copy-error": "This browser does not support automatic copy！"
 }
diff --git a/docs/.vitepress/crowdin/en-US/component/icons.json b/docs/.vitepress/crowdin/en-US/component/icons.json
index 9e38e60bd7..0aeb4e51ea 100644
--- a/docs/.vitepress/crowdin/en-US/component/icons.json
+++ b/docs/.vitepress/crowdin/en-US/component/icons.json
@@ -1,4 +1,4 @@
 {
-  "copy-success": "Copied！",
+  "copy-success": "Copied!",
   "copy-error": "Your browser does not support copy :("
 }
diff --git a/docs/.vitepress/vitepress/components/globals/icons.vue b/docs/.vitepress/vitepress/components/globals/icons.vue
index 4a0f5d047c..e2de2053f0 100644
--- a/docs/.vitepress/vitepress/components/globals/icons.vue
+++ b/docs/.vitepress/vitepress/components/globals/icons.vue
@@ -43,8 +43,8 @@ const copySvgIcon = async (name, refs) => {
   <div style="text-align: right">
     <el-switch
       v-model="copyIcon"
-      active-text="Copy Icon Code"
-      inactive-text="Copy Svg Content"
+      active-text="Copy icon code"
+      inactive-text="Copy SVG content"
     >
     </el-switch>
   </div>
@@ -75,12 +75,12 @@ const copySvgIcon = async (name, refs) => {
   border-left: 1px solid var(--el-border-color-base);
   border-radius: 4px;
   display: grid;
-  grid-template-columns: repeat(6, 1fr);
+  grid-template-columns: repeat(7, 1fr);
 
   .icon-item {
     text-align: center;
     color: var(--el-text-color-regular);
-    height: 120px;
+    height: 90px;
     font-size: 13px;
     border-right: 1px solid var(--el-border-color-base);
     border-bottom: 1px solid var(--el-border-color-base);
diff --git a/docs/en-US/component/icon.md b/docs/en-US/component/icon.md
index 56700277b4..c216348b27 100644
--- a/docs/en-US/component/icon.md
+++ b/docs/en-US/component/icon.md
@@ -9,30 +9,31 @@ Element Plus provides a set of common icons.
 
 :::warning
 
-Element Plus team is replacing all **Font Icon** in the previously built components to **SVG Icon**, please keep you eyes on [ChangeLog](/#/en-US/component/changelog), for getting latest updates, **Font Icon** will be deprecated after the first stable release.
+⚠️ **Font Icon** has been removed, since version `1.2.0-beta.1`.
 
 :::
 
-<script setup>
-import { Edit, Share, Delete, Search, Loading } from '@element-plus/icons'
-</script>
-
-## SvgIcon Usage
+## Icon Usage
 
 - If you want to **use directly** like the example, you need to [globally register](https://v3.vuejs.org/guide/component-registration.html#global-registration) the components before using it.
 
-- If you want to see all available SVG icons please check [@element-plus/icons](https://unpkg.com/browse/@element-plus/icons@latest/lib/) and the source [Github/ElementPlus/icons](https://github.com/element-plus/element-plus-icons) out or [SVG icons](/#/en-US/component/icon#svg-tu-biao-ji-he)
+- If you want to see all available SVG icons please check [@element-plus/icons](https://unpkg.com/browse/@element-plus/icons@latest/lib/) and the source [element-plus-icons](https://github.com/element-plus/element-plus-icons) out or [Icon Collection](#icons-collection)
+
+- CDN importing and [auto importing](https://github.com/antfu/unplugin-icons) is under developing.
 
 ## Installation
 
-The current icon is only targeted to [Vue3](https://v3.vuejs.org).
-
-## Using packaging manager
+### Using packaging manager
 
 ```shell
-$ yarn add @element-plus/icons
-# or
+# Choose a package manager you like.
+
+# NPM
 $ npm install @element-plus/icons
+# Yarn
+$ yarn add @element-plus/icons
+# pnpm
+$ pnpm install @element-plus/icons
 ```
 
 ## Simple usage
@@ -57,6 +58,10 @@ so you need to use an alias in order to render the icon, if you register `Menu`
 </template>
 ```
 
+<script setup>
+import { Edit, Share, Delete, Search, Loading } from '@element-plus/icons'
+</script>
+
 <ElRow>
   <div>
     <ElIcon :size="30">
@@ -150,7 +155,7 @@ so you need to use an alias in order to render the icon, if you register `Menu`
   </div>
 </ElRow>
 
-## SVG Icons collection <ElTag>Available >= 1.0.2-beta.66</ElTag>
+## Icon Collection
 
 :::tip
 
@@ -162,20 +167,6 @@ so you need to use an alias in order to render the icon, if you register `Menu`
 
 <IconList />
 
-<!-- <ul class="icon-list">
-  <li
-    v-for="component in $svgIcons"
-    :key="component"
-    @click="$copySvgIcon(component)">
-    <span class="demo-svg-icon">
-      <el-icon color="#000">
-        <component :is="component" />
-      </el-icon>
-      <span class="icon-name">{{component}}</span>
-    </span>
-  </li>
-</ul> -->
-
 ## Icon Attributes
 
 | Attribute | Description                | Type                           | Acceptable Value | Default                |
diff --git a/docs/en-US/guide/quickstart.md b/docs/en-US/guide/quickstart.md
index dd9ed34b61..95ea888f30 100644
--- a/docs/en-US/guide/quickstart.md
+++ b/docs/en-US/guide/quickstart.md
@@ -46,24 +46,28 @@ You need to use an additional plugin to import components you used.
 
 #### Auto import <el-tag type="primary" style="vertical-align: middle;" effect="dark" size="small">Recommend</el-tag>
 
-First you need install `unplugin-vue-components`.
+First you need install `unplugin-vue-components` and `unplugin-auto-import`.
 
 ```shell
-npm install unplugin-vue-components
+npm install -D unplugin-vue-components unplugin-auto-import
 ```
 
-Then add the code below into your `Vite` or `webpack` config file.
+Then add the code below into your `Vite` or `Webpack` config file.
 
 ##### Vite
 
 ```ts
 // vite.config.ts
+import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
 export default {
   plugins: [
     // ...
+    AutoImport({
+      resolvers: [ElementPlusResolver()],
+    }),
     Components({
       resolvers: [ElementPlusResolver()],
     }),
@@ -75,12 +79,16 @@ export default {
 
 ```ts
 // webpack.config.js
+import AutoImport from 'unplugin-auto-import/webpack'
 const Components = require('unplugin-vue-components/webpack')
 const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
 
 module.exports = {
   // ...
   plugins: [
+    AutoImport({
+      resolvers: [ElementPlusResolver()],
+    }),
     Components({
       resolvers: [ElementPlusResolver()],
     }),
@@ -88,9 +96,9 @@ module.exports = {
 }
 ```
 
-For more bundlers ([Rollup](https://rollupjs.org/), [Vue CLI](https://cli.vuejs.org/)) and configs please reference [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components#readme).
+For more bundlers ([Rollup](https://rollupjs.org/), [Vue CLI](https://cli.vuejs.org/)) and configs please reference [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components#installation) and [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import#install).
 
-#### Manually import
+### Manually import
 
 Element Plus provides out of box [Tree Shaking](https://webpack.js.org/guides/tree-shaking/)
 functionalities based on ES Module.
@@ -121,6 +129,19 @@ export default {
 }
 ```
 
+:::warning
+
+You need to manually import the styles if you're using `unplugin-element-plus` and only used the component API.
+
+Example:
+
+```ts
+import 'element-plus/es/components/message/style/css'
+import { ElMessage } from 'element-plus'
+```
+
+:::
+
 ## Starter Template
 
 ### Vue CLI