diff --git a/package.json b/package.json
index ec2cc88fbc..70ce82cebf 100644
--- a/package.json
+++ b/package.json
@@ -140,6 +140,7 @@
   "homepage": "https://element-plus.org",
   "license": "MIT",
   "dependencies": {
+    "@element-plus/icons": "^0.0.11",
     "@popperjs/core": "^2.4.4",
     "async-validator": "^3.4.0",
     "dayjs": "1.x",
diff --git a/packages/icon/__tests__/icon.spec.ts b/packages/icon/__tests__/icon.spec.ts
index d43095229a..a64b5ca1ac 100644
--- a/packages/icon/__tests__/icon.spec.ts
+++ b/packages/icon/__tests__/icon.spec.ts
@@ -5,9 +5,15 @@ describe('Icon.vue', () => {
   test('render', () => {
     const wrapper = mount(Icon, {
       props: {
-        name: 'search',
+        color: '#000000',
+        size: 18,
       },
     })
-    expect(wrapper.classes()).toContain('el-icon-search')
+    expect(wrapper.element.getAttribute('style')).toContain(
+      `--color: #000000`,
+    )
+    expect(wrapper.element.getAttribute('style')).toContain(
+      `--font-size: 18px`,
+    )
   })
 })
diff --git a/packages/icon/src/index.vue b/packages/icon/src/index.vue
index 5945b255a0..bb34b765f7 100644
--- a/packages/icon/src/index.vue
+++ b/packages/icon/src/index.vue
@@ -1,17 +1,38 @@
 <template>
-  <i :class="`el-icon-${name}`"></i>
+  <i
+    class="el-icon"
+    :style="style"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </i>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-
+<script lang='ts'>
+import { defineComponent, computed } from 'vue'
+import type { CSSProperties } from 'vue'
 export default defineComponent({
   name: 'ElIcon',
   props: {
-    name: {
-      type: String,
-      default: '',
+    size: {
+      type: Number,
     },
+    color: {
+      type: String,
+    },
+  },
+  setup(props) {
+    return {
+      style: computed(() => {
+        if (!props.size && !props.color) {
+          return {}
+        }
+        return {
+          ...(props.size ? { '--font-size': `${props.size}px` }: {}),
+          ...(props.color ? { '--color': props.color } : {}),
+        } as CSSProperties
+      }),
+    }
   },
 })
 </script>
diff --git a/packages/theme-chalk/src/icon.scss b/packages/theme-chalk/src/icon.scss
index de0767bf5d..d5a5b59316 100644
--- a/packages/theme-chalk/src/icon.scss
+++ b/packages/theme-chalk/src/icon.scss
@@ -1,3 +1,6 @@
+@use 'sass:map';
+
+@import 'mixins/mixins';
 @import 'common/var';
 
 @font-face {
@@ -1167,3 +1170,26 @@
     transform: rotateZ(360deg);
   }
 }
+
+@include b(icon) {
+  --color: inherit;
+  --font-size: #{map.get($--font-size, 'base')};
+  height: 1em;
+  width: 1em;
+  line-height: 1em;
+  text-align: center;
+  display: inline-block;
+  position: relative;
+  fill: currentColor;
+  color: var(--color);
+  font-size: var(--font-size);
+
+  @include when(loading) {
+    animation: rotating 2s linear infinite;
+  }
+
+  svg {
+    height: 1em;
+    width: 1em;
+  }
+}
diff --git a/website/demo-styles/icon.scss b/website/demo-styles/icon.scss
index 4fcf405782..cb99948f0f 100644
--- a/website/demo-styles/icon.scss
+++ b/website/demo-styles/icon.scss
@@ -1,10 +1,16 @@
-.demo-icon .source > div > i {
+.demo-icon .source > div > i:not(.no-inherit) {
   color: #606266;
   margin: 0 20px;
   font-size: 1.5em;
   vertical-align: middle;
 }
 
+i.no-inherit {
+  margin: 0 20px;
+  font-size: 1.5em;
+  vertical-align: middle;
+}
+
 .demo-icon .source button {
   margin: 0 20px;
 }
@@ -29,6 +35,15 @@
   margin-right: -1px;
   margin-bottom: -1px;
 
+  .demo-svg-icon {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    cursor: pointer;
+  }
+
   &::after {
     display: inline-block;
     content: '';
diff --git a/website/docs/en-US/icon.md b/website/docs/en-US/icon.md
index 9672091680..230c75d822 100644
--- a/website/docs/en-US/icon.md
+++ b/website/docs/en-US/icon.md
@@ -2,7 +2,118 @@
 
 Element Plus provides a set of common icons.
 
-### Basic usage
+:::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.
+:::
+
+### SvgIcon 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)
+
+### Installation
+The current icon is only targeted to [Vue3](https://v3.vuejs.org).
+#### Using yarn
+```shell
+$ yarn add @element-plus/icons
+```
+
+#### Using npm
+```shell
+$ npm install @element-plus/icons
+```
+
+#### Simple usage
+
+```html
+<!-- Use el-icon to provide attributes to SVG icon -->
+<el-icon :size="size" :color="color">
+  <edit />
+</el-icon>
+<!-- Or use it independently without derive attributes from parent -->
+<edit />
+
+<script lang="ts">
+import { Edit } from '@element-plus/icons'
+
+export default defineComponent({
+  components: {
+    // Full name
+    [Edit.name]: Edit,
+    // or Shorthanded,
+    Edit,
+  },
+})
+</script>
+```
+#### Combined with `el-icon`
+:::demo  `el-icon` provides extra attributes for raw SVG icon, for more detail, please read to the end.
+```html
+  <p>
+    with extra class <b>is-loading</b>, your icon is able to rotate 360 deg in 2 seconds, you can also override this
+  </p>
+  <el-icon :size="20">
+    <edit />
+  </el-icon>
+  <el-icon color="#409EFC" class="no-inherit">
+    <share />
+  </el-icon>
+  <el-icon>
+    <delete />
+  </el-icon>
+  <el-icon class="is-loading">
+    <loading />
+  </el-icon>
+  <el-button type="primary">
+    <el-icon style="vertical-align: middle;">
+      <search />
+    </el-icon>
+    <span style="vertical-align: middle;">
+      Search
+    </span>
+  </el-button>
+```
+:::
+
+#### Using SVG icon directly
+
+:::demo
+```html
+  <div style="font-size: 20px;">
+    <!-- Since svg icons do not carry any attributes by default -->
+    <!-- You need to provide attributes directly -->
+    <edit style="width: 1em; height: 1em; margin-right: 8px;" />
+    <share style="width: 1em; height: 1em; margin-right: 8px;" />
+    <delete style="width: 1em; height: 1em; margin-right: 8px;" />
+    <search style="width: 1em; height: 1em; margin-right: 8px;" />
+  </div>
+```
+:::
+
+### SVG Icons collection
+:::tip
+This collection is updated after ElementPlus@1.0.2-beta.66(included), you can only use `el-icon` to wrap it after ElementPlus@1.0.2-beta.66(included), or directly use it without version constrains
+
+**You can use SVG icon in any version as long as you install it**
+
+**You can click the icon to copy it**
+:::
+
+<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>
+
+### Font Icon Basic usage
 
 Just assign the class name to `el-icon-iconName`.
 
@@ -17,7 +128,7 @@ Just assign the class name to `el-icon-iconName`.
 ```
 :::
 
-### Icons
+### Font Icons
 
 <ul class="icon-list">
   <li v-for="name in $icon" :key="name">
@@ -27,3 +138,10 @@ Just assign the class name to `el-icon-iconName`.
     </span>
   </li>
 </ul>
+
+
+### SVG Icon Attributes
+| Attribute      | Description    | Type      | Acceptable Value       | Default   |
+|---------- |-------- |---------- |-------------  |-------- |
+| color    | SVG tag's fill attribute | Pick\<CSSProperties, 'color'\> | - | inherit from color |
+| size | SVG icon size, size x size | number | - | inherit from font size |
diff --git a/website/docs/es/icon.md b/website/docs/es/icon.md
index d666a30fca..237a85450a 100644
--- a/website/docs/es/icon.md
+++ b/website/docs/es/icon.md
@@ -2,7 +2,118 @@
 
 Element Plus proporciona un conjunto de iconos propios.
 
-### Uso básico
+:::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.
+:::
+
+### SvgIcon 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)
+
+### Installation
+The current icon is only targeted to [Vue3](https://v3.vuejs.org).
+#### Using yarn
+```shell
+$ yarn add @element-plus/icons
+```
+
+#### Using npm
+```shell
+$ npm install @element-plus/icons
+```
+
+#### Simple usage
+
+```html
+<!-- Use el-icon to provide attributes to SVG icon -->
+<el-icon :size="size" :color="color">
+  <edit />
+</el-icon>
+<!-- Or use it independently without derive attributes from parent -->
+<edit />
+
+<script lang="ts">
+import { Edit } from '@element-plus/icons'
+
+export default defineComponent({
+  components: {
+    // Full name
+    [Edit.name]: Edit,
+    // or Shorthanded,
+    Edit,
+  },
+})
+</script>
+```
+#### Combined with `el-icon`
+:::demo  `el-icon` provides extra attributes for raw SVG icon, for more detail, please read to the end.
+```html
+  <p>
+    with extra class <b>is-loading</b>, your icon is able to rotate 360 deg in 2 seconds, you can also override this
+  </p>
+  <el-icon :size="20">
+    <edit />
+  </el-icon>
+  <el-icon color="#409EFC" class="no-inherit">
+    <share />
+  </el-icon>
+  <el-icon>
+    <delete />
+  </el-icon>
+  <el-icon class="is-loading">
+    <loading />
+  </el-icon>
+  <el-button type="primary">
+    <el-icon style="vertical-align: middle;">
+      <search />
+    </el-icon>
+    <span style="vertical-align: middle;">
+      Search
+    </span>
+  </el-button>
+```
+:::
+
+#### Using SVG icon directly
+
+:::demo
+```html
+  <div style="font-size: 20px;">
+    <!-- Since svg icons do not carry any attributes by default -->
+    <!-- You need to provide attributes directly -->
+    <edit style="width: 1em; height: 1em; margin-right: 8px;" />
+    <share style="width: 1em; height: 1em; margin-right: 8px;" />
+    <delete style="width: 1em; height: 1em; margin-right: 8px;" />
+    <search style="width: 1em; height: 1em; margin-right: 8px;" />
+  </div>
+```
+:::
+
+### SVG Icons collection
+:::tip
+This collection is updated after ElementPlus@1.0.2-beta.66(included), you can only use `el-icon` to wrap it after ElementPlus@1.0.2-beta.66(included), or directly use it without version constrains
+
+**You can use SVG icon in any version as long as you install it**
+
+**You can click the icon to copy it**
+:::
+
+<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>
+
+### Font Icon uso básico
 
 Simplemente asigna el nombre de la clase a `el-icon-iconName`.
 
@@ -17,7 +128,7 @@ Simplemente asigna el nombre de la clase a `el-icon-iconName`.
 ```
 :::
 
-### Iconos
+### Font Iconos
 
 <ul class="icon-list">
   <li v-for="name in $icon" :key="name">
@@ -27,3 +138,10 @@ Simplemente asigna el nombre de la clase a `el-icon-iconName`.
     </span>
   </li>
 </ul>
+
+
+### SVG Icon Atributos
+| Attribute      | Description    | Type      | Acceptable Value       | Default   |
+|---------- |-------- |---------- |-------------  |-------- |
+| color    | SVG tag's fill attribute | Pick\<CSSProperties, 'color'\> | - | inherit from color |
+| size | SVG icon size, size x size | number | - | inherit from font size |
diff --git a/website/docs/fr-FR/icon.md b/website/docs/fr-FR/icon.md
index 5ee1e156b6..354d12d88d 100644
--- a/website/docs/fr-FR/icon.md
+++ b/website/docs/fr-FR/icon.md
@@ -2,9 +2,120 @@
 
 Element Plus fournit un ensemble d'icônes basiques.
 
-### Usage
+:::warning
+Element Plus team is replacing all **Font Icon** in the previously built components to **SVG Icon**, please keep you eyes on [ChangeLog](/#/fr/component/changelog), for getting latest updates, **Font Icon** will be deprecated after the first stable release.
+:::
 
-Il vous suffit d'assigner le nom de classe `el-icon-iconName` à une balise `<i>`.
+### SVG 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](/#/fr/component/icon#svg-tu-biao-ji-he)
+
+### Installation
+The current icon is only targeted to [Vue3](https://v3.vuejs.org).
+#### Using yarn
+```shell
+$ yarn add @element-plus/icons
+```
+
+#### Using npm
+```shell
+$ npm install @element-plus/icons
+```
+
+#### Simple usage
+
+```html
+<!-- Use el-icon to provide attributes to SVG icon -->
+<el-icon :size="size" :color="color">
+  <edit />
+</el-icon>
+<!-- Or use it independently without derive attributes from parent -->
+<edit />
+
+<script lang="ts">
+import { Edit } from '@element-plus/icons'
+
+export default defineComponent({
+  components: {
+    // Full name
+    [Edit.name]: Edit,
+    // or Shorthanded,
+    Edit,
+  },
+})
+</script>
+```
+#### Combined with `el-icon`
+:::demo  `el-icon` provides extra attributes for raw SVG icon, for more detail, please read to the end.
+```html
+  <p>
+    with extra class <b>is-loading</b>, your icon is able to rotate 360 deg in 2 seconds, you can also override this
+  </p>
+  <el-icon :size="20">
+    <edit />
+  </el-icon>
+  <el-icon color="#409EFC" class="no-inherit">
+    <share />
+  </el-icon>
+  <el-icon>
+    <delete />
+  </el-icon>
+  <el-icon class="is-loading">
+    <loading />
+  </el-icon>
+  <el-button type="primary">
+    <el-icon style="vertical-align: middle;">
+      <search />
+    </el-icon>
+    <span style="vertical-align: middle;">
+      Search
+    </span>
+  </el-button>
+```
+:::
+
+#### Using SVG icônes directly
+
+:::demo
+```html
+  <div style="font-size: 20px;">
+    <!-- Since svg icons do not carry any attributes by default -->
+    <!-- You need to provide attributes directly -->
+    <edit style="width: 1em; height: 1em; margin-right: 8px;" />
+    <share style="width: 1em; height: 1em; margin-right: 8px;" />
+    <delete style="width: 1em; height: 1em; margin-right: 8px;" />
+    <search style="width: 1em; height: 1em; margin-right: 8px;" />
+  </div>
+```
+:::
+
+### SVG icônes collection
+:::tip
+This collection is updated after ElementPlus@1.0.2-beta.66(included), you can only use `el-icon` to wrap it after ElementPlus@1.0.2-beta.66(included), or directly use it without version constrains
+
+**You can use SVG icon in any version as long as you install it**
+
+**You can click the icon to copy it**
+:::
+
+<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>
+
+### Font Icônes Basic usage
+
+Just assign the class name to `el-icon-iconName`.
 
 :::demo
 
@@ -12,12 +123,12 @@ Il vous suffit d'assigner le nom de classe `el-icon-iconName` à une balise `<i>
 <i class="el-icon-edit"></i>
 <i class="el-icon-share"></i>
 <i class="el-icon-delete"></i>
-<el-button type="primary" icon="el-icon-search">Chercher</el-button>
+<el-button type="primary" icon="el-icon-search">Search</el-button>
 
 ```
 :::
 
-### Icônes
+### Font Icônes
 
 <ul class="icon-list">
   <li v-for="name in $icon" :key="name">
@@ -27,3 +138,10 @@ Il vous suffit d'assigner le nom de classe `el-icon-iconName` à une balise `<i>
     </span>
   </li>
 </ul>
+
+
+### SVG icônes Attributs
+| Attribute      | Description    | Type      | Acceptable Value       | Default   |
+|---------- |-------- |---------- |-------------  |-------- |
+| color    | SVG tag's fill attribute | Pick\<CSSProperties, 'color'\> | - | inherit from color |
+| size | SVG icon size, size x size | number | - | inherit from font size |
diff --git a/website/docs/jp/icon.md b/website/docs/jp/icon.md
index d982493e18..11a37bdb21 100644
--- a/website/docs/jp/icon.md
+++ b/website/docs/jp/icon.md
@@ -2,7 +2,118 @@
 
 Element Plusは、共通のアイコンのセットを提供します。
 
-### 基本的な使い方
+:::warning
+Element Plus team is replacing all **Font Icon** in the previously built components to **SVG Icon**, please keep you eyes on [ChangeLog](/#/jp/component/changelog), for getting latest updates, **Font Icon** will be deprecated after the first stable release.
+:::
+
+### SvgIcon 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)
+
+### Installation
+The current icon is only targeted to [Vue3](https://v3.vuejs.org).
+#### Using yarn
+```shell
+$ yarn add @element-plus/icons
+```
+
+#### Using npm
+```shell
+$ npm install @element-plus/icons
+```
+
+#### Simple usage
+
+```html
+<!-- Use el-icon to provide attributes to SVG icon -->
+<el-icon :size="size" :color="color">
+  <edit />
+</el-icon>
+<!-- Or use it independently without derive attributes from parent -->
+<edit />
+
+<script lang="ts">
+import { Edit } from '@element-plus/icons'
+
+export default defineComponent({
+  components: {
+    // Full name
+    [Edit.name]: Edit,
+    // or Shorthanded,
+    Edit,
+  },
+})
+</script>
+```
+#### Combined with `el-icon`
+:::demo  `el-icon` provides extra attributes for raw SVG icon, for more detail, please read to the end.
+```html
+  <p>
+    with extra class <b>is-loading</b>, your icon is able to rotate 360 deg in 2 seconds, you can also override this
+  </p>
+  <el-icon :size="20">
+    <edit />
+  </el-icon>
+  <el-icon color="#409EFC" class="no-inherit">
+    <share />
+  </el-icon>
+  <el-icon>
+    <delete />
+  </el-icon>
+  <el-icon class="is-loading">
+    <loading />
+  </el-icon>
+  <el-button type="primary">
+    <el-icon style="vertical-align: middle;">
+      <search />
+    </el-icon>
+    <span style="vertical-align: middle;">
+      Search
+    </span>
+  </el-button>
+```
+:::
+
+#### Using SVG icon directly
+
+:::demo
+```html
+  <div style="font-size: 20px;">
+    <!-- Since svg icons do not carry any attributes by default -->
+    <!-- You need to provide attributes directly -->
+    <edit style="width: 1em; height: 1em; margin-right: 8px;" />
+    <share style="width: 1em; height: 1em; margin-right: 8px;" />
+    <delete style="width: 1em; height: 1em; margin-right: 8px;" />
+    <search style="width: 1em; height: 1em; margin-right: 8px;" />
+  </div>
+```
+:::
+
+### SVG Icons collection
+:::tip
+This collection is updated after ElementPlus@1.0.2-beta.66(included), you can only use `el-icon` to wrap it after ElementPlus@1.0.2-beta.66(included), or directly use it without version constrains
+
+**You can use SVG icon in any version as long as you install it**
+
+**You can click the icon to copy it**
+:::
+
+<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>
+
+### Font アイコン 基本的な使い方
 
 クラス名に `el-icon-iconName` を代入するだけで使えます。
 
@@ -27,3 +138,9 @@ Element Plusは、共通のアイコンのセットを提供します。
     </span>
   </li>
 </ul>
+
+### SVG Icon 属性
+| Attribute      | Description    | Type      | Acceptable Value       | Default   |
+|---------- |-------- |---------- |-------------  |-------- |
+| color    | SVG tag's fill attribute | Pick\<CSSProperties, 'color'\> | - | inherit from color |
+| size | SVG icon size, size x size | number | - | inherit from font size |
diff --git a/website/docs/zh-CN/icon.md b/website/docs/zh-CN/icon.md
index b0310b3f38..727f521603 100644
--- a/website/docs/zh-CN/icon.md
+++ b/website/docs/zh-CN/icon.md
@@ -2,17 +2,129 @@
 
 提供了一套常用的图标集合。
 
-### 使用方法
+:::warning
+Element Plus 团队正在将原有组件内的 **Font Icon** 向 **SVG Icon** 迁移，请多多留意 [ChangeLog](/#/zh-CN/component/changelog), 及时获取到更新信息，**Font Icon** 将会在第一个正式发布被废弃，请尽快迁移
+:::
+
+### SvgIcon 使用方法
+- 如果你想像用例一样**直接使用**，你需要[全局注册组件](https://v3.vuejs.org/guide/component-registration.html#global-registration)，才能够直接在项目里使用。
+
+- 若想查看所有的组件，请访问 [@element-plus/icons](https://unpkg.com/browse/@element-plus/icons@latest/lib/) 和源代码 [Github/ElementPlus/icons](https://github.com/element-plus/element-plus-icons)，或者 [SVG 图标集合](/#/zh-CN/component/icon#svg-tu-biao-ji-he)
+
+### 安装图标
+当前的图标只适用于 [Vue3](https://v3.vuejs.org)。
+#### 使用 yarn
+```shell
+$ yarn add @element-plus/icons
+```
+
+#### 使用 npm
+```shell
+$ npm install @element-plus/icons
+```
+#### 基础用法
+
+```html
+<!-- 用 el-icon 为 SVG 提供属性 -->
+<el-icon :size="size" :color="color">
+  <edit />
+</el-icon>
+<!-- 或者单独使用，不从祖先节点继承任何属性 -->
+<edit />
+
+<script lang="ts">
+import { Edit } from '@element-plus/icons'
+
+export default defineComponent({
+  components: {
+    // 全名
+    [Edit.name]: Edit,
+    // 或者以缩写的方式,
+    Edit,
+  },
+})
+</script>
+
+```
+
+#### 结合 `el-icon` 使用
+:::demo  `el-icon` 为 raw SVG 图标提供额外的属性, 提供的详细属性请继续阅读
+```html
+  <p>
+    通过添加额外的类名 <b>is-loading</b>，你的图标就可以在 2 秒内旋转 360 度，但让你也可以自己改写想要的动画。
+  </p>
+  <el-icon :size="20">
+    <edit />
+  </el-icon>
+  <el-icon color="#409EFC" class="no-inherit">
+    <share />
+  </el-icon>
+  <el-icon>
+    <delete />
+  </el-icon>
+  <el-icon class="is-loading">
+    <loading />
+  </el-icon>
+  <el-button type="primary">
+    <el-icon style="vertical-align: middle;">
+      <search />
+    </el-icon>
+    <span style="vertical-align: middle;">
+      搜索
+    </span>
+  </el-button>
+```
+:::
+
+#### 直接使用 SVG icon
+
+:::demo
+```html
+  <div style="font-size: 20px;">
+    <!-- SVG icon 自身不带任何属性，你需要额外提供属性。-->
+    <edit style="width: 1em; height: 1em; margin-right: 8px;" />
+    <share style="width: 1em; height: 1em; margin-right: 8px;" />
+    <delete style="width: 1em; height: 1em; margin-right: 8px;" />
+    <search style="width: 1em; height: 1em; margin-right: 8px;" />
+  </div>
+```
+:::
+
+### SVG 图标集合
+:::tip
+`el-icon (包裹组件)` 更新于 **ElementPlus@1.0.2-beta.66**，适用于 **1.0.2-beta.66(包含66)** 以后的版本，你只能在该版本之后的版本使用 `el-icon`。
+
+**SVG 图标可以在任意版本使用。**
+
+**点击图标可复制到剪贴板。**
+:::
+
+
+
+<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>
+
+### Font Icon 使用方法
 
 直接通过设置类名为 `el-icon-iconName` 来使用即可。例如：
 
 :::demo
 ```html
-<i class="el-icon-edit"></i>
-<i class="el-icon-share"></i>
-<i class="el-icon-delete"></i>
-<el-button type="primary" icon="el-icon-search">搜索</el-button>
-
+  <i class="el-icon-edit"></i>
+  <i class="el-icon-share"></i>
+  <i class="el-icon-delete"></i>
+  <el-button type="primary" icon="el-icon-search">搜索</el-button>
 ```
 :::
 
@@ -26,3 +138,10 @@
     </span>
   </li>
 </ul>
+
+
+### SvgIcon 属性
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| color    | svg 的 fill 颜色 | Pick\<CSSProperties, 'color'\> | - | inherit |
+| size | svg 图标的大小, size x size | number | - | inherit |
diff --git a/website/entry.js b/website/entry.js
index 2c2f1c0fcc..ff8b6942d2 100644
--- a/website/entry.js
+++ b/website/entry.js
@@ -1,4 +1,7 @@
 import { createApp, nextTick } from 'vue'
+import { hyphenate } from '@vue/shared'
+import * as ElementPlusSvgIcons from '@element-plus/icons'
+import clipboardCopy from 'clipboard-copy'
 import { createRouter, createWebHashHistory } from 'vue-router'
 import routes from './route.config'
 import demoBlock from './components/demo-block'
@@ -16,7 +19,7 @@ import icon from './icon.json'
 import dayjs from 'dayjs'
 import 'dayjs/locale/zh-cn'
 dayjs.locale('zh-cn') // todo: locale based on Doc site lang
-
+import compLang from './i18n/component.json'
 import App from './app.vue'
 import ElementPlus from 'element-plus'
 import '../packages/theme-chalk/src/index.scss'
@@ -24,8 +27,16 @@ import '../packages/theme-chalk/src/display.scss'
 
 const app = createApp(App)
 
+const svgIcons = []
+for (let i in ElementPlusSvgIcons) {
+  const component = ElementPlusSvgIcons[i]
+  app.component(component.name, component)
+  svgIcons.push(component.name)
+}
+app.config.globalProperties.$svgIcons = svgIcons
 app.config.globalProperties.$icon = icon
 
+
 app.component('DemoBlock', demoBlock)
 app.component('RightNav', RightNav)
 app.component('MainFooter', MainFooter)
@@ -40,9 +51,32 @@ const router = createRouter({
 app.use(ElementPlus)
 app.use(router)
 router.isReady().then(() => {
+  let lang = location.hash.split('/')[1]
+  let langConfig = compLang.filter(config => config.lang === lang)[0]['demo-block']
 
+  app.config.globalProperties.$copySvgIcon = iconName => {
+    clipboardCopy(
+      `<el-svg-icon>
+  <${hyphenate(iconName)} />
+</el-svg-icon>
+      `,
+    ).then(() => {
+      app.config.globalProperties.$message({
+        showClose: true,
+        message: langConfig['copy-success'],
+        type: 'success',
+      })
+    }).catch(() => {
+      app.config.globalProperties.$message({
+        showClose: true,
+        message: langConfig['copy-error'],
+        type: 'error',
+      })
+    })
+  }
   router.afterEach(async route => {
     await nextTick()
+    lang = location.hash.split('/')[1]
     const data = title[route.meta.lang]
     for (let val in data) {
       if (new RegExp('^' + val, 'g').test(route.name)) {
diff --git a/yarn.lock b/yarn.lock
index d242354870..f817427dcb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1167,6 +1167,11 @@
   version "9.1.2"
   resolved "https://registry.yarnpkg.com/@commitlint/types/-/types-9.1.2.tgz#d05f66db03e3a3638a654e8badf2deb489eb220d"
 
+"@element-plus/icons@^0.0.11":
+  version "0.0.11"
+  resolved "https://registry.yarnpkg.com/@element-plus/icons/-/icons-0.0.11.tgz#9b187c002774548b911850d17fa5fc2f9a515f57"
+  integrity sha512-iKQXSxXu131Ai+I9Ymtcof9WId7kaXvB1+WRfAfpQCW7UiAMYgdNDqb/u0hgTo2Yq3MwC4MWJnNuTBEpG8r7+A==
+
 "@eslint/eslintrc@^0.1.3":
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.1.3.tgz#7d1a2b2358552cc04834c0979bd4275362e37085"