diff --git a/src/menu/index.js b/src/menu/index.js
index e78d5eca..d3df29ed 100644
--- a/src/menu/index.js
+++ b/src/menu/index.js
@@ -135,8 +135,9 @@ const demoElement = {
       children: [
         { path: `${pre}basic-layout`, title: '布局' },
         { path: `${pre}basic-container`, title: '布局容器' },
-        { path: `${pre}basic-color`, title: '颜色' },
+        { path: `${pre}basic-color`, title: '色彩' },
         { path: `${pre}basic-typography`, title: '字体' },
+        { path: `${pre}basic-icon`, title: '图标' },
         { path: `${pre}basic-button`, title: '按钮' }
       ]
     }
diff --git a/src/pages/demo/element/basic-icon/index.vue b/src/pages/demo/element/basic-icon/index.vue
new file mode 100644
index 00000000..d981f9c8
--- /dev/null
+++ b/src/pages/demo/element/basic-icon/index.vue
@@ -0,0 +1,23 @@
+<template>
+  <d2-container>
+    <template slot="header">图标</template>
+    <h1 class="d2-mt-0">
+      d2admin 已经集成 FontAwesome 图表库，提供约 1,000 个图标；并且准备好了图标组件
+    </h1>
+    <p>如果你愿意，你还可以随意使用 SVG 图标</p>
+    <el-button-group>
+      <el-button @click="$router.push({ path: '/demo/components/icon/list' })">
+        <d2-icon name="link"/>
+        图标列表
+      </el-button>
+      <el-button @click="$router.push({ path: '/demo/components/icon/icon' })">
+        <d2-icon name="link"/>
+        图标组件
+      </el-button>
+      <el-button @click="$router.push({ path: '/demo/components/icon/svg' })">
+        <d2-icon name="link"/>
+        svg 图标组件
+      </el-button>
+    </el-button-group>
+  </d2-container>
+</template>
diff --git a/src/pages/demo/element/basic-typography/index.vue b/src/pages/demo/element/basic-typography/index.vue
index 4ecce535..8632c179 100644
--- a/src/pages/demo/element/basic-typography/index.vue
+++ b/src/pages/demo/element/basic-typography/index.vue
@@ -2,9 +2,90 @@
   <d2-container type="ghost">
     <el-card shadow="never" class="d2-mb">
       <template slot="header">中文字体</template>
+      <el-row :gutter="10">
+        <el-col :span="6">
+          <el-card shadow="never">
+            <template slot="header">PingFang SC</template>
+            <p class="basic-typography-text typography-style-1">和畅惠风</p>
+          </el-card>
+        </el-col>
+        <el-col :span="6">
+          <el-card shadow="never">
+            <template slot="header">Hiragino Sans GB</template>
+            <p class="basic-typography-text typography-style-2">和畅惠风</p>
+          </el-card>
+        </el-col>
+        <el-col :span="6">
+          <el-card shadow="never">
+            <template slot="header">Microsoft YaHei</template>
+            <p class="basic-typography-text typography-style-3">和畅惠风</p>
+          </el-card>
+        </el-col>
+      </el-row>
+    </el-card>
+    <el-card shadow="never" class="d2-mb">
+      <template slot="header">英文／数字字体</template>
+      <el-row :gutter="10">
+        <el-col :span="6">
+          <el-card shadow="never">
+            <template slot="header">Helvetica Neue</template>
+            <p class="basic-typography-text typography-style-4">RGag</p>
+          </el-card>
+        </el-col>
+        <el-col :span="6">
+          <el-card shadow="never">
+            <template slot="header">Helvetica</template>
+            <p class="basic-typography-text typography-style-5">RGag</p>
+          </el-card>
+        </el-col>
+        <el-col :span="6">
+          <el-card shadow="never">
+            <template slot="header">Arial</template>
+            <p class="basic-typography-text typography-style-6">RGag</p>
+          </el-card>
+        </el-col>
+      </el-row>
     </el-card>
     <el-card shadow="never">
-      <template slot="header">英文／数字字体</template>
+      <template slot="header">Font-family 代码</template>
+      <d2-highlight :code="code"/>
     </el-card>
   </d2-container>
 </template>
+
+<script>
+export default {
+  data () {
+    return {
+      code: 'font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.basic-typography-text {
+  font-size: 48px;
+  margin: 0px;
+  padding: 0px;
+  line-height: 80px;
+  &.typography-style-1 {
+    font-family: PingFang SC;
+  }
+  &.typography-style-2 {
+    font-family: Hiragino Sans GB;
+  }
+  &.typography-style-3 {
+    font-family: Microsoft YaHei;
+  }
+  &.typography-style-4 {
+    font-family: Helvetica Neue;
+  }
+  &.typography-style-5 {
+    font-family: Helvetica;
+  }
+  &.typography-style-6 {
+    font-family: Arial;
+  }
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index df45d017..565c331d 100755
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -112,6 +112,7 @@ const routes = [
       { path: 'basic-container', name: `${pre}basic-container`, component: () => import('@/pages/demo/element/basic-container/index.vue'), meta },
       { path: 'basic-color', name: `${pre}basic-color`, component: () => import('@/pages/demo/element/basic-color/index.vue'), meta },
       { path: 'basic-typography', name: `${pre}basic-typography`, component: () => import('@/pages/demo/element/basic-typography/index.vue'), meta },
+      { path: 'basic-icon', name: `${pre}basic-icon`, component: () => import('@/pages/demo/element/basic-icon/index.vue'), meta },
       { path: 'basic-button', name: `${pre}basic-button`, component: () => import('@/pages/demo/element/basic-button/index.vue'), meta },
       { path: 'index', name: `${pre}index`, component: () => import('@/pages/demo/element/index/index.vue'), meta }
     ])('demo-element-')