diff --git a/devui/icon/src/icon.tsx b/devui/icon/src/icon.tsx
index e651d78eb689040f05de072ccd986b070758cdec..b852cd5035f2a2dbed3b9db14b1eca3285aca071 100644
--- a/devui/icon/src/icon.tsx
+++ b/devui/icon/src/icon.tsx
@@ -1,12 +1,5 @@
 import { defineComponent } from 'vue'
 
-type IIconSize = 'sm' | 'md' | 'lg'
-const SIZE_MAP = {
-  sm: '12px',
-  md: '16px',
-  lg: '24px'
-}
-
 export default defineComponent({
   name: 'DIcon',
   props: {
@@ -15,11 +8,8 @@ export default defineComponent({
       required: true
     },
     size: {
-      type: String as () => IIconSize,
-      default: 'md',
-      validator: (value: string) => {
-        return Object.keys(SIZE_MAP).includes(value)
-      }
+      type: String,
+      default: '16px'
     },
     color: {
       type: String,
@@ -39,8 +29,8 @@ export default defineComponent({
     const { name, size, color, classPrefix } = this
 
     return (
-      <i className={`${classPrefix} ${classPrefix}-${name}`} style={{
-        fontSize: SIZE_MAP[size],
+      <i class={`${classPrefix} ${classPrefix}-${name}`} style={{
+        fontSize: size,
         color
       }}></i>
     )
diff --git a/sites/.vitepress/devui-theme/index.js b/sites/.vitepress/devui-theme/index.js
index 156939ecd1e5006fdd66797a5f64a60aee14e97f..4010e99768b3b0c8b0405186aa72a52d88864bff 100644
--- a/sites/.vitepress/devui-theme/index.js
+++ b/sites/.vitepress/devui-theme/index.js
@@ -3,6 +3,7 @@ import './styles/layout.css';
 import './styles/code.css';
 import './styles/custom-blocks.css';
 import './styles/sidebar-links.css';
+import '@devui-design/icons/icomoon/devui-icon.css';
 import Layout from './Layout.vue';
 import NotFound from './NotFound.vue';
 const theme = {
diff --git a/sites/components/icon/index.md b/sites/components/icon/index.md
index 2d46c79f86e7d3f74334c0a946381236f6a30aa8..d8b9c1234b8a0224a3c292c7f3b72bc7f1f936ec 100644
--- a/sites/components/icon/index.md
+++ b/sites/components/icon/index.md
@@ -11,13 +11,13 @@
 <d-icon name="emoji"></d-icon>
 <d-icon name="right" color="#3dcca6"></d-icon>
 <d-icon name="error" color="#f95f5b"></d-icon>
-<d-icon name="ban" color="#f95f5b" size="lg"></d-icon>
+<d-icon name="ban" color="#f95f5b" size="24px"></d-icon>
 
 ```html
 <d-icon name="emoji"></d-icon>
 <d-icon name="right" color="#3dcca6"></d-icon>
 <d-icon name="error" color="#f95f5b"></d-icon>
-<d-icon name="ban" color="#f95f5b" size="lg"></d-icon>
+<d-icon name="ban" color="#f95f5b" size="24px"></d-icon>
 ```
 
 ### 自定义字体图标
@@ -26,29 +26,29 @@ Icon 组件默认引用 DevUI 图标库的图标，如果需要在现有 Icon 
 
 ```css
 @font-face {
-  font-family: 'my-icon';
-  src: url('./my-icon.ttf') format('truetype');
+  font-family: "my-icon";
+  src: url("./my-icon.ttf") format("truetype");
 }
 
 .my-icon {
-  font-family: 'my-icon';
+  font-family: "my-icon";
 }
 
 .my-icon-right::before {
-  content: '\E03F';
+  content: "\E03F";
 }
 ```
 
-引入字体图标的css
+引入字体图标的 css
 
 ```css
-@import 'my-icon.css';
+@import "my-icon.css";
 ```
 
 or
 
 ```js
-import 'my-icon.css';
+import "my-icon.css";
 ```
 
 使用
@@ -57,6 +57,11 @@ import 'my-icon.css';
 <d-icon class-prefix="my-icon" name="right" />
 ```
 
-<style lang="scss">
-@import '@devui-design/icons/icomoon/devui-icon.css'
-</style>
\ No newline at end of file
+### API
+
+|    参数     |   类型   |   默认    | 说明                     | 跳转 Demo                         |
+| :---------: | :------: | :-------: | :----------------------- | --------------------------------- |
+|    name     | `String` |    --     | 必选，Icon 名称          | [基本用法](#基本用法)             |
+|    size     | `String` |  '16px'   | 可选，图标大小           | [基本用法](#基本用法)             |
+|    color    | `String` | '#252b3a' | 可选，图标颜色           | [基本用法](#基本用法)             |
+| classPrefix | `String` |  'icon'   | 可选，自定义字体图标前缀 | [自定义字体图标](#自定义字体图标) |