diff --git a/docs/zh/components/icon-svg.md b/docs/zh/components/icon-svg.md
index f7e1e78c..69273a35 100644
--- a/docs/zh/components/icon-svg.md
+++ b/docs/zh/components/icon-svg.md
@@ -13,7 +13,7 @@
 然后使用组件
 
 ``` vue
-<IconSvg name="刚才的svg文件名"></IconSvg>
+<d2-icon-svg name="刚才的svg文件名"></d2-icon-svg>
 ```
 
 ## 获取已经注册的所有图标
diff --git a/docs/zh/components/icon.md b/docs/zh/components/icon.md
index 73636754..414d08f5 100644
--- a/docs/zh/components/icon.md
+++ b/docs/zh/components/icon.md
@@ -12,22 +12,22 @@
 
 ``` vue
 // 这样用没有毛病 但是也没什么用
-<Icon></Icon>
+<d2-icon></d2-icon>
 
 // 指定图标名称
-<Icon name="github"></Icon>
+<d2-icon name="github"></d2-icon>
 
 // 设置行内样式
-<Icon name="github" style="font-size: 100px;"></Icon>
+<d2-icon name="github" style="font-size: 100px;"></d2-icon>
 
 // 设置 class
-<Icon name="github" class="icon-class-demo"></Icon>
+<d2-icon name="github" class="icon-class-demo"></d2-icon>
 ```
 
 这个组件只是简化了写法而已
 
 ``` vue
-<Icon name="github"></Icon>
+<d2-icon name="github"></d2-icon>
 // 等同于
 <i class="fa fa-github" aria-hidden="true"></i>
 ```
diff --git a/src/components/core/MainLayout/components/HeaderRight/components/FullScreen.vue b/src/components/core/MainLayout/components/HeaderRight/components/FullScreen.vue
index 01cd7a6f..ab7136d0 100644
--- a/src/components/core/MainLayout/components/HeaderRight/components/FullScreen.vue
+++ b/src/components/core/MainLayout/components/HeaderRight/components/FullScreen.vue
@@ -5,8 +5,8 @@
     :content="isFullScreen ? '退出全屏' : '全屏'"
     placement="bottom">
     <el-button class="d2-mr btn-text" type="text" @click="toggleFullScreen">
-      <Icon v-if="isFullScreen" name="compress"></Icon>
-      <Icon v-else name="arrows-alt"></Icon>
+      <d2-icon v-if="isFullScreen" name="compress"></d2-icon>
+      <d2-icon v-else name="arrows-alt"></d2-icon>
     </el-button>
   </el-tooltip>
 </template>
diff --git a/src/components/core/MainLayout/components/HeaderRight/components/UserDropdown.vue b/src/components/core/MainLayout/components/HeaderRight/components/UserDropdown.vue
index 4cff58ce..5b12e6f6 100644
--- a/src/components/core/MainLayout/components/HeaderRight/components/UserDropdown.vue
+++ b/src/components/core/MainLayout/components/HeaderRight/components/UserDropdown.vue
@@ -2,8 +2,8 @@
   <el-dropdown class="d2-mr">
     <span class="el-dropdown-link">你好</span>
     <el-dropdown-menu slot="dropdown">
-      <el-dropdown-item @click.native="logOff"><Icon name="power-off"></Icon> 注销</el-dropdown-item>
-      <el-dropdown-item><Icon name="user-circle-o"></Icon> 个人中心</el-dropdown-item>
+      <el-dropdown-item @click.native="logOff"><d2-icon name="power-off"></d2-icon> 注销</el-dropdown-item>
+      <el-dropdown-item><d2-icon name="user-circle-o"></d2-icon> 个人中心</el-dropdown-item>
     </el-dropdown-menu>
   </el-dropdown>
 </template>
diff --git a/src/components/core/MainLayout/index.vue b/src/components/core/MainLayout/index.vue
index 466826d0..3bf7ed5e 100644
--- a/src/components/core/MainLayout/index.vue
+++ b/src/components/core/MainLayout/index.vue
@@ -7,7 +7,7 @@
         <img v-else src="@/assets/image/logo/header.png">
       </div>
       <div class="toggle-aside-btn" @click="collapse = !collapse">
-        <Icon name="bars"/>
+        <d2-icon name="bars"/>
       </div>
       <HeaderMenu/>
       <HeaderRight/>
diff --git a/src/components/core/IconSelect/index.vue b/src/components/core/d2-icon-select/index.vue
similarity index 99%
rename from src/components/core/IconSelect/index.vue
rename to src/components/core/d2-icon-select/index.vue
index 14045e28..c3c57eae 100644
--- a/src/components/core/IconSelect/index.vue
+++ b/src/components/core/d2-icon-select/index.vue
@@ -61,6 +61,7 @@
 <script>
 import icon from '@/assets/library/font-awesome-4.7.0-icon/icon.js'
 export default {
+  name: 'd2-icon-select',
   props: {
     // 值
     value: {
diff --git a/src/components/core/IconSvg/index.vue b/src/components/core/d2-icon-svg/index.vue
similarity index 92%
rename from src/components/core/IconSvg/index.vue
rename to src/components/core/d2-icon-svg/index.vue
index bff4fcdb..86fa8a8b 100644
--- a/src/components/core/IconSvg/index.vue
+++ b/src/components/core/d2-icon-svg/index.vue
@@ -6,6 +6,7 @@
 
 <script>
 export default {
+  name: 'd2-icon-svg',
   props: {
     name: {
       type: String,
diff --git a/src/components/core/Icon/index.vue b/src/components/core/d2-icon/index.vue
similarity index 92%
rename from src/components/core/Icon/index.vue
rename to src/components/core/d2-icon/index.vue
index 130e662f..0fb026e0 100644
--- a/src/components/core/Icon/index.vue
+++ b/src/components/core/d2-icon/index.vue
@@ -4,6 +4,7 @@
 
 <script>
 export default {
+  name: 'd2-icon',
   props: {
     name: {
       type: String,
diff --git a/src/components/core/register.js b/src/components/core/register.js
index 34146edf..7af3e1b9 100644
--- a/src/components/core/register.js
+++ b/src/components/core/register.js
@@ -3,9 +3,9 @@ import Vue from 'vue'
 Vue.component('d2-container', resolve => { require(['@/components/core/d2-container'], resolve) })
 Vue.component('d2-count-up', resolve => { require(['@/components/core/d2-count-up'], resolve) })
 Vue.component('d2-highlight', resolve => { require(['@/components/core/d2-highlight'], resolve) })
-Vue.component('Icon', resolve => { require(['@/components/core/Icon'], resolve) })
-Vue.component('IconSelect', resolve => { require(['@/components/core/IconSelect/index.vue'], resolve) })
-Vue.component('IconSvg', resolve => { require(['@/components/core/IconSvg/index.vue'], resolve) })
+Vue.component('d2-icon', resolve => { require(['@/components/core/d2-icon'], resolve) })
+Vue.component('d2-icon-select', resolve => { require(['@/components/core/d2-icon-select/index.vue'], resolve) })
+Vue.component('d2-icon-svg', resolve => { require(['@/components/core/d2-icon-svg/index.vue'], resolve) })
 Vue.component('Markdown', resolve => { require(['@/components/core/Markdown'], resolve) })
 Vue.component('QuillEditor', resolve => { require(['@/components/core/QuillEditor'], resolve) })
 Vue.component('SimpleMDE', resolve => { require(['@/components/core/SimpleMDE'], resolve) })
diff --git a/src/pages/demo/chart/all/components/ChartCardHeader.vue b/src/pages/demo/chart/all/components/ChartCardHeader.vue
index b3c86c3d..194460da 100644
--- a/src/pages/demo/chart/all/components/ChartCardHeader.vue
+++ b/src/pages/demo/chart/all/components/ChartCardHeader.vue
@@ -2,12 +2,12 @@
   <div>
     {{title}}
     <span class="d2-fr">
-      <Icon
+      <d2-icon
         class="chart-card-header-icon"
         :class="{active}"
         name="refresh"
         @click.native="handleRefresh">
-      </Icon>
+      </d2-icon>
     </span>
   </div>
 </template>
diff --git a/src/pages/demo/chart/demo/components/ChartDemoCard.vue b/src/pages/demo/chart/demo/components/ChartDemoCard.vue
index 9ee80690..4d16decb 100644
--- a/src/pages/demo/chart/demo/components/ChartDemoCard.vue
+++ b/src/pages/demo/chart/demo/components/ChartDemoCard.vue
@@ -2,7 +2,7 @@
   <el-card>
     <div slot="header">
       <el-button type="primary" size="mini" @click="syncData">
-        <Icon name="refresh"></Icon>
+        <d2-icon name="refresh"></d2-icon>
         加载数据
       </el-button>
       <el-radio-group v-model="height" size="mini">
diff --git a/src/pages/demo/chart/dynamicSize/components/ChartCardHeader.vue b/src/pages/demo/chart/dynamicSize/components/ChartCardHeader.vue
index b3c86c3d..194460da 100644
--- a/src/pages/demo/chart/dynamicSize/components/ChartCardHeader.vue
+++ b/src/pages/demo/chart/dynamicSize/components/ChartCardHeader.vue
@@ -2,12 +2,12 @@
   <div>
     {{title}}
     <span class="d2-fr">
-      <Icon
+      <d2-icon
         class="chart-card-header-icon"
         :class="{active}"
         name="refresh"
         @click.native="handleRefresh">
-      </Icon>
+      </d2-icon>
     </span>
   </div>
 </template>
diff --git a/src/pages/demo/components/icon/components/IconCell.vue b/src/pages/demo/components/icon/components/IconCell.vue
index 1aa9bca2..80196643 100644
--- a/src/pages/demo/components/icon/components/IconCell.vue
+++ b/src/pages/demo/components/icon/components/IconCell.vue
@@ -54,7 +54,7 @@ export default {
       return `<i class="fa fa-${this.icon}" aria-hidden="true"></i>`
     },
     iconComponent () {
-      return `<Icon name="${this.icon}"></Icon>`
+      return `<d2-icon name="${this.icon}"></d2-icon>`
     }
   },
   methods: {
diff --git a/src/pages/demo/components/icon/icon.vue b/src/pages/demo/components/icon/icon.vue
index 8019fb2f..6ac1dbba 100644
--- a/src/pages/demo/components/icon/icon.vue
+++ b/src/pages/demo/components/icon/icon.vue
@@ -6,10 +6,10 @@
         title="图标组件"
         url="https://github.com/FairyEver/d2admin-vue-element/blob/master/src/components/core/Icon/index.vue">
       </PageHeader>
-      <Icon></Icon>
-      <Icon name="github"></Icon>
-      <Icon name="github" style="font-size: 100px;"></Icon>
-      <Icon name="github" class="icon-class-demo"></Icon>
+      <d2-icon></d2-icon>
+      <d2-icon name="github"></d2-icon>
+      <d2-icon name="github" style="font-size: 100px;"></d2-icon>
+      <d2-icon name="github" class="icon-class-demo"></d2-icon>
     </el-card>
     <el-card>
       <Markdown url="/static/md/组件 - 图标组件.md"></Markdown>
diff --git a/src/pages/demo/components/icon/list.vue b/src/pages/demo/components/icon/list.vue
index 239d4dfd..e691999c 100644
--- a/src/pages/demo/components/icon/list.vue
+++ b/src/pages/demo/components/icon/list.vue
@@ -19,7 +19,7 @@
           style="width: auto;">
         </el-alert>
         <el-col v-for="(iconItem, iconIndex) in iconShow.icon" :key="iconIndex" :span="6" class="d2-p-10">
-          <IconCell :icon="iconItem"></IconCell>
+          <d2-iconCell :icon="iconItem"></d2-iconCell>
         </el-col>
       </el-row>
     </el-card>
diff --git a/src/pages/demo/components/icon/select.vue b/src/pages/demo/components/icon/select.vue
index 7bb52f5b..ef644025 100644
--- a/src/pages/demo/components/icon/select.vue
+++ b/src/pages/demo/components/icon/select.vue
@@ -4,7 +4,7 @@
       <PageHeader
         slot="header"
         title="图标选择器"
-        url="https://github.com/FairyEver/d2admin-vue-element/blob/master/src/components/core/IconSelect/index.vue">
+        url="https://github.com/FairyEver/d2admin-vue-element/blob/master/src/components/core/d2-icon-select/index.vue">
       </PageHeader>
       <div class="title-group">
         <p class="title">一般用法</p>
@@ -16,7 +16,7 @@
           <template v-else>未选择</template>
         </p>
       </div>
-      <IconSelect v-model="icon"></IconSelect>
+      <d2-icon-select v-model="icon"></d2-icon-select>
       <div class="title-group">
         <p class="title">用户可以输入</p>
         <p class="sub-title">
@@ -27,7 +27,7 @@
           <template v-else>未选择</template>
         </p>
       </div>
-      <IconSelect v-model="icon2" :user-input="true"></IconSelect>
+      <d2-icon-select v-model="icon2" :user-input="true"></d2-icon-select>
     </el-card>
     <el-card>
       <Markdown url="/static/md/组件 - 图标选择器.md"></Markdown>
diff --git a/src/pages/demo/components/icon/svg.vue b/src/pages/demo/components/icon/svg.vue
index 14477b17..e74cb83f 100644
--- a/src/pages/demo/components/icon/svg.vue
+++ b/src/pages/demo/components/icon/svg.vue
@@ -7,7 +7,7 @@
       </PageHeader>
       <el-row>
         <el-col class="icon-card" :span="4" v-for="(icon, index) in $IconSvg" :key="index">
-          <IconSvg class="icon" :name="icon"></IconSvg>
+          <d2-icon-svg class="icon" :name="icon"></d2-icon-svg>
           <div class="icon-title">
             <span>{{icon}}</span>
           </div>
diff --git a/src/pages/demo/plugins/export/table.vue b/src/pages/demo/plugins/export/table.vue
index 93e71d8c..098e119d 100644
--- a/src/pages/demo/plugins/export/table.vue
+++ b/src/pages/demo/plugins/export/table.vue
@@ -6,11 +6,11 @@
     </PageHeader>
     <div class="d2-mb">
       <el-button type="primary" @click="exportCsv">
-        <Icon name="download"></Icon>
+        <d2-icon name="download"></d2-icon>
         导出 CSV
       </el-button>
       <el-button type="primary" @click="exportExcel">
-        <Icon name="download"></Icon>
+        <d2-icon name="download"></d2-icon>
         导出 Excel
       </el-button>
     </div>
diff --git a/src/pages/demo/plugins/export/txt.vue b/src/pages/demo/plugins/export/txt.vue
index df5b9f6c..41bce6a0 100644
--- a/src/pages/demo/plugins/export/txt.vue
+++ b/src/pages/demo/plugins/export/txt.vue
@@ -12,7 +12,7 @@
     </el-input>
     <div class="d2-mt d2-mb">
       <el-button type="primary" @click="exportTxt">
-        <Icon name="download"></Icon>
+        <d2-icon name="download"></d2-icon>
         保存为 txt
       </el-button>
     </div>
diff --git a/src/pages/demo/plugins/import/csv.vue b/src/pages/demo/plugins/import/csv.vue
index a21f0ccb..66d78b1b 100644
--- a/src/pages/demo/plugins/import/csv.vue
+++ b/src/pages/demo/plugins/import/csv.vue
@@ -7,14 +7,14 @@
     </PageHeader>
     <div class="d2-mb">
       <el-button @click="download">
-        <Icon name="download"></Icon>
+        <d2-icon name="download"></d2-icon>
         下载演示 .csv 表格
       </el-button>
     </div>
     <div class="d2-mb">
       <el-upload :before-upload="handleUpload" action="default">
         <el-button type="success">
-          <Icon name="file-o"></Icon>
+          <d2-icon name="file-o"></d2-icon>
           选择要导入的 .csv 表格
         </el-button>
       </el-upload>
diff --git a/src/pages/demo/plugins/import/xlsx.vue b/src/pages/demo/plugins/import/xlsx.vue
index 05857b58..4e9714e9 100644
--- a/src/pages/demo/plugins/import/xlsx.vue
+++ b/src/pages/demo/plugins/import/xlsx.vue
@@ -7,14 +7,14 @@
     </PageHeader>
     <div class="d2-mb">
       <el-button @click="download">
-        <Icon name="download"></Icon>
+        <d2-icon name="download"></d2-icon>
         下载演示 .xlsx 表格
       </el-button>
     </div>
     <div class="d2-mb">
       <el-upload :before-upload="handleUpload" action="default">
         <el-button type="success">
-          <Icon name="file-o"></Icon>
+          <d2-icon name="file-o"></d2-icon>
           选择要导入的 .xlsx 表格
         </el-button>
       </el-upload>
diff --git a/static/md/组件 - 图标组件 - svg.md b/static/md/组件 - 图标组件 - svg.md
index 2c6acab6..44164e28 100644
--- a/static/md/组件 - 图标组件 - svg.md	
+++ b/static/md/组件 - 图标组件 - svg.md	
@@ -11,7 +11,7 @@
 然后使用组件
 
 ```
-<IconSvg name="刚才的svg文件名"></IconSvg>
+<d2-icon-svg name="刚才的svg文件名"></d2-icon-svg>
 ```
 
 ## 获取已经注册的所有图标
diff --git a/static/md/组件 - 图标组件.md b/static/md/组件 - 图标组件.md
index 48574e10..d593cef6 100644
--- a/static/md/组件 - 图标组件.md	
+++ b/static/md/组件 - 图标组件.md	
@@ -10,22 +10,22 @@
 
 ```
 // 这样用没有毛病 但是也没什么用
-<Icon></Icon>
+<d2-icon></d2-icon>
 
 // 指定图标名称
-<Icon name="github"></Icon>
+<d2-icon name="github"></d2-icon>
 
 // 设置行内样式
-<Icon name="github" style="font-size: 100px;"></Icon>
+<d2-icon name="github" style="font-size: 100px;"></d2-icon>
 
 // 设置 class
-<Icon name="github" class="icon-class-demo"></Icon>
+<d2-icon name="github" class="icon-class-demo"></d2-icon>
 ```
 
 这个组件只是简化了写法而已
 
 ```
-<Icon name="github"></Icon>
+<d2-icon name="github"></d2-icon>
 // 等同于
 <i class="fa fa-github" aria-hidden="true"></i>
 ```