diff --git a/components/icon/index.en-US.md b/components/icon/index.en-US.md
index cd18e15e25..27b6de2a00 100644
--- a/components/icon/index.en-US.md
+++ b/components/icon/index.en-US.md
@@ -29,6 +29,19 @@ ReactDOM.render(<IconDisplay />, mountNode);
 | component | The component used for the root node. This will override the **`type`** property. | ComponentType<CustomIconComponentProps\> | - |
 | twoToneColor | Only support the two-tone icon. Specific the primary color. | string (hex color) | - |
 
+### Svg icons
+
+We introduced svg icons in `3.9.x` version replacing font icons which brings benefits below:
+
+- Complete offline usage of icon, no dependency of alipay cdn font icon file and no more empty square during downloading than no need to deploy icon font files locally either.
+- Much more display accuracy in lower-level screens.
+- Support multiple colors for icon.
+- No need to change built-in icons with overriding styles by providing more props in component.
+
+More disscussion of svg icon reference to [#10353](https://github.com/ant-design/ant-design/issues/10353).
+
+> ⚠️ About the extra bundle size brought by all svg icons we imported in antd@3.9.x, we will provide new API to allow developers importing icons as your need, you can trace [#12011](https://github.com/ant-design/ant-design/issues/12011) for further progress.
+
 The properties `theme`, `component` and `twoToneColor` are added in `antd@3.9.x`. The best practice is to pass the property `theme` to every `<Icon />` components.
 
 ```jsx
@@ -41,6 +54,8 @@ All the icons will render to `<svg>`. You can still set `style` and `className`
 <Icon type="message" style={{ fontSize: '16px', color: '#08c' }} theme="outlined" />
 ```
 
+### Set TwoTone Color
+
 When using the two-tone icons, you can use the static methods `Icon.getTwoToneColor()` and `Icon.setTwoToneColor(colorString)` to spicify the primary color.
 
 ```jsx
@@ -48,6 +63,8 @@ Icon.setTwoToneColor('#eb2f96');
 Icon.getTwoToneColor(); // #eb2f96
 ```
 
+### Custom Svg Icon
+
 You can import svg icon as an react component by using `webpack` and [`@svgr/webpack`](https://www.npmjs.com/package/@svgr/webpack). `@svgr/webpack`'s `options` [reference](https://github.com/smooth-code/svgr#options).
 
 ```js
@@ -89,12 +106,11 @@ The following properties are available for the component:
 | className | The computed class name of the `svg` element | string | - |
 | style | The computed style of the `svg` element | CSSProperties | - |
 
+### Custom Font Icon
 
-### Use custom icon with iconfont.cn
+We added a `createFromIconfontCN` function to help developer using their own icons deployed at [iconfont.cn](http://iconfont.cn/) in a convenient way.
 
-#### Icon.createFromIconfontCN(options)
-
-This method is specified for [iconfont.cn](http://iconfont.cn/).
+> This method is specified for [iconfont.cn](http://iconfont.cn/).
 
 ```js
 const MyIcon = Icon.createFromIconfontCN({
diff --git a/components/icon/index.zh-CN.md b/components/icon/index.zh-CN.md
index 646935b7ab..5663cc0f1c 100644
--- a/components/icon/index.zh-CN.md
+++ b/components/icon/index.zh-CN.md
@@ -16,7 +16,7 @@ toc: false
 
 > 点击图标即可复制代码。
 
-双色图标可能略有缺失，我们还在持续补充中。
+新版图标可能略有缺失，我们还在持续补充中。
 
 ```__react
 import IconDisplay from 'site/theme/template/IconDisplay';
@@ -32,9 +32,22 @@ ReactDOM.render(<IconDisplay />, mountNode);
 | theme | 图标主题风格。可选实心、描线、双色等主题风格，适用于官方图标 | 'filled' \| 'outlined' \| 'twoTone' | 'outlined' |
 | spin | 是否有旋转动画 | boolean | false |
 | component | 控制如何渲染图标，通常是一个渲染根标签为 `<svg>` 的 `React` 组件，**会使 `type` 属性失效** | ComponentType<CustomIconComponentProps\> | - |
-| twoToneColor | 仅适用双色图标。设置双色图标的主要颜色。 | string (十六进制颜色) | - |
+| twoToneColor | 仅适用双色图标。设置双色图标的主要颜色 | string (十六进制颜色) | - |
 
-其中 `theme`, `component`, `twoToneColor` 是 `antd@3.9.x` 新增加的属性。最佳实践是给使用的 `<Icon />` 组件传入属性 `theme` 以明确图标的主题风格。例如：
+### Svg 图标
+
+在 `3.9.x` 版本后，我们使用了 svg 图标替换了原先的 font 图标，从而带来了以下优势：
+
+- 完全离线化使用，不需要从支付宝 cdn 下载字体文件，图标不会因为网络问题呈现方块，也无需字体文件本地部署。
+- 在低端设备上 svg 有更好的清晰度。
+- 支持多色图标。
+- 对于内建图标的更换可以提供更多 API，而不需要进行样式覆盖。
+
+更多讨论可参考：[#10353](https://github.com/ant-design/ant-design/issues/10353)。
+
+> ⚠️ 目前 3.9.x 上我们全量引入了所有图标，导致 antd 默认的包体积有一定增加，我们会在不远的未来增加新的 API 来实现图标的按需使用，更多相关讨论可关注：[#12011](https://github.com/ant-design/ant-design/issues/12011)。
+
+其中 `theme`, `component`, `twoToneColor` 是 `3.9.x` 版本新增加的属性。最佳实践是给使用的 `<Icon />` 组件传入属性 `theme` 以明确图标的主题风格。例如：
 
 ```jsx
 <Icon type="star" theme="filled" />
@@ -46,13 +59,17 @@ ReactDOM.render(<IconDisplay />, mountNode);
 <Icon type="message" style={{ fontSize: '16px', color: '#08c' }} />
 ```
 
-对于双色图标，可以通过使用 `Icon.getTwoToneColor()` 和 `Icon.setTwoToneColor(colorString)` 来设置图标主色。
+### 双色图标主色
+
+对于双色图标，可以通过使用 `Icon.getTwoToneColor()` 和 `Icon.setTwoToneColor(colorString)` 来全局设置图标主色。
 
 ```jsx
 Icon.setTwoToneColor('#eb2f96');
 Icon.getTwoToneColor(); // #eb2f96
 ```
 
+### 自定义 svg 图标
+
 如果使用 `webpack`，可以通过配置 [@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack) 来将 `svg` 图标作为 `React` 组件导入。`@svgr/webpack` 的 `options` 选项请参阅 [svgr文档](https://github.com/smooth-code/svgr#options)。
 
 ```js
@@ -94,11 +111,9 @@ ReactDOM.render(
 | className | 计算后的 `svg` 类名 | string | - |
 | style | 计算后的 `svg` 元素样式 | CSSProperties | - |
 
-### 使用 iconfont.cn 的自定义图标
+### 自定义 font 图标
 
-#### Icon.createFromIconfontCN(options)
-
-这个方法适用于 `iconfont.cn` 的用户
+在 `3.9.x` 里，我们提供了一个 `createFromIconfontCN` 方法，方便开发者调用在 [iconfont.cn](http://iconfont.cn/) 上自行管理的图标。
 
 ```js
 const MyIcon = Icon.createFromIconfontCN({