diff --git a/devui/icon/src/icon.tsx b/devui/icon/src/icon.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e651d78eb689040f05de072ccd986b070758cdec
--- /dev/null
+++ b/devui/icon/src/icon.tsx
@@ -0,0 +1,48 @@
+import { defineComponent } from 'vue'
+
+type IIconSize = 'sm' | 'md' | 'lg'
+const SIZE_MAP = {
+  sm: '12px',
+  md: '16px',
+  lg: '24px'
+}
+
+export default defineComponent({
+  name: 'DIcon',
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    size: {
+      type: String as () => IIconSize,
+      default: 'md',
+      validator: (value: string) => {
+        return Object.keys(SIZE_MAP).includes(value)
+      }
+    },
+    color: {
+      type: String,
+      default: '#252b3a'
+    },
+    classPrefix: {
+      type: String,
+      default: 'icon'
+    },
+  },
+  setup(props) {
+    return {
+      ...props
+    }
+  },
+  render() {
+    const { name, size, color, classPrefix } = this
+
+    return (
+      <i className={`${classPrefix} ${classPrefix}-${name}`} style={{
+        fontSize: SIZE_MAP[size],
+        color
+      }}></i>
+    )
+  }
+})
\ No newline at end of file
diff --git a/devui/vue-devui.ts b/devui/vue-devui.ts
index eb082ecd28383add6e32627ab0bcef211e64a89a..5dfe708b58ccfe2bd86bd99901aef251cda1b7d2 100644
--- a/devui/vue-devui.ts
+++ b/devui/vue-devui.ts
@@ -2,6 +2,7 @@ import { App } from 'vue';
 
 // 通用
 import Button from './button/button';
+import Icon from './icon/src/icon';
 import Panel from './panel/panel';
 
 // 导航
@@ -22,7 +23,7 @@ import Avatar from './avatar/avatar';
 
 function install(app: App) {
   const packages = [
-    Button, Panel,
+    Button, Icon, Panel,
     Tabs,
     Alert,
     Checkbox, Radio, Switch, TagsInput, TextInput,
@@ -38,7 +39,7 @@ function install(app: App) {
 }
 
 export {
-  Button, Panel,
+  Button, Icon, Panel,
   Tabs,
   Alert,
   Checkbox, Radio, Switch, TagsInput, TextInput,
diff --git a/package.json b/package.json
index b378ce337be5d6e6180a40efb6de3c790feb1275..bbac5659838fef1d880ebfcd804efa2e8d1ed189 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "publish": "cd dist && npm publish"
   },
   "dependencies": {
+    "@devui-design/icons": "^1.3.0",
     "@types/lodash-es": "^4.17.4",
     "lodash-es": "^4.17.20",
     "vue": "^3.1.1",
diff --git a/sites/.vitepress/config/sidebar.ts b/sites/.vitepress/config/sidebar.ts
index 15c005494f64c0bb511aedeb33eb35affb411ce5..5dc1723d66251710875da660c8298e7dcb0dc338 100644
--- a/sites/.vitepress/config/sidebar.ts
+++ b/sites/.vitepress/config/sidebar.ts
@@ -5,6 +5,7 @@ const sidebar = {
       text: '通用',
       children: [
         { text: 'Button 按钮', link: '/components/button/' },
+        { text: 'Icon 图标', link: '/components/icon/' },
         { text: 'Panel 面板', link: '/components/panel/' },
       ]
     },
diff --git a/sites/components/icon/index.md b/sites/components/icon/index.md
new file mode 100644
index 0000000000000000000000000000000000000000..2d46c79f86e7d3f74334c0a946381236f6a30aa8
--- /dev/null
+++ b/sites/components/icon/index.md
@@ -0,0 +1,62 @@
+# Icon 图标
+
+用于显示图标。
+
+### 何时使用
+
+需要显示图标时。
+
+### 基本用法
+
+<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>
+
+```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>
+```
+
+### 自定义字体图标
+
+Icon 组件默认引用 DevUI 图标库的图标，如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。
+
+```css
+@font-face {
+  font-family: 'my-icon';
+  src: url('./my-icon.ttf') format('truetype');
+}
+
+.my-icon {
+  font-family: 'my-icon';
+}
+
+.my-icon-right::before {
+  content: '\E03F';
+}
+```
+
+引入字体图标的css
+
+```css
+@import 'my-icon.css';
+```
+
+or
+
+```js
+import 'my-icon.css';
+```
+
+使用
+
+```html
+<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
diff --git a/yarn.lock b/yarn.lock
index 0d9e9b62aae011dd3be270e912aa95bc3e2f0482..42c5f811d6857908c0dcad0a1052921f6dc09ee6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1200,6 +1200,11 @@
   resolved "https://registry.nlark.com/@commitlint/types/download/@commitlint/types-11.0.0.tgz#719cf05fcc1abb6533610a2e0f5dd1e61eac14fe"
   integrity sha1-cZzwX8wau2UzYQouD13R5h6sFP4=
 
+"@devui-design/icons@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.nlark.com/@devui-design/icons/download/@devui-design/icons-1.3.0.tgz#5a3006a31ee4f62e3f9837b68c031898ff148b88"
+  integrity sha1-WjAGox7k9i4/mDe2jAMYmP8Ui4g=
+
 "@docsearch/css@^1.0.0-alpha.28":
   version "1.0.0-alpha.28"
   resolved "https://registry.nlark.com/@docsearch/css/download/@docsearch/css-1.0.0-alpha.28.tgz#c8a2cd8c1bb3a6855c51892e9dbdab5d42fe6e23"