diff --git a/mock/role/routes.ts b/mock/role/routes.ts
index 9301223a1..e335cc149 100644
--- a/mock/role/routes.ts
+++ b/mock/role/routes.ts
@@ -119,7 +119,7 @@ export const asyncRoutes = [
     children: [
       {
         path: 'index',
-        component: 'views/svg-icons/index',
+        component: 'views/icons/index',
         name: 'Icons',
         meta: { title: 'icons', icon: 'icon', noCache: true }
       }
diff --git a/src/router/index.ts b/src/router/index.ts
index 58336e54a..b4bb2634f 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -162,7 +162,7 @@ export const asyncRoutes: RouteConfig[] = [
     children: [
       {
         path: 'index',
-        component: () => import(/* webpackChunkName: "icons" */ '@/views/svg-icons/index.vue'),
+        component: () => import(/* webpackChunkName: "icons" */ '@/views/icons/index.vue'),
         name: 'Icons',
         meta: { title: 'icons', icon: 'icon', noCache: true }
       }
diff --git a/src/views/icons/elementIcons.ts b/src/views/icons/elementIcons.ts
new file mode 100644
index 000000000..e8074a16f
--- /dev/null
+++ b/src/views/icons/elementIcons.ts
@@ -0,0 +1,74 @@
+// Full list here: https://element.eleme.io/#/en-US/component/icon
+
+const elementIcons = [
+  'info',
+  'error',
+  'success',
+  'warning',
+  'question',
+  'back',
+  'arrow-left',
+  'arrow-down',
+  'arrow-right',
+  'arrow-up',
+  'caret-left',
+  'caret-bottom',
+  'caret-top',
+  'caret-right',
+  'd-arrow-left',
+  'd-arrow-right',
+  'minus',
+  'plus',
+  'remove',
+  'circle-plus',
+  'remove-outline',
+  'circle-plus-outline',
+  'close',
+  'check',
+  'circle-close',
+  'circle-check',
+  'zoom-out',
+  'zoom-in',
+  'd-caret',
+  'sort',
+  'sort-down',
+  'sort-up',
+  'tickets',
+  'document',
+  'goods',
+  'sold-out',
+  'news',
+  'message',
+  'date',
+  'printer',
+  'time',
+  'bell',
+  'mobile-phone',
+  'service',
+  'view',
+  'menu',
+  'more',
+  'more-outline',
+  'star-on',
+  'star-off',
+  'location',
+  'location-outline',
+  'phone',
+  'phone-outline',
+  'picture',
+  'picture-outline',
+  'delete',
+  'search',
+  'edit',
+  'edit-outline',
+  'rank',
+  'refresh',
+  'share',
+  'setting',
+  'upload',
+  'upload2',
+  'download',
+  'loading'
+]
+
+export default elementIcons
diff --git a/src/views/icons/index.vue b/src/views/icons/index.vue
new file mode 100644
index 000000000..6fc4b1429
--- /dev/null
+++ b/src/views/icons/index.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="icons-container">
+    <aside>
+      <a
+        href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/icon.html"
+        target="_blank"
+      >Add and use
+      </a>
+    </aside>
+    <el-tabs type="border-card">
+      <el-tab-pane label="Icons">
+        <div
+          v-for="item of svgIcons"
+          :key="item"
+          @click="handleClipboard(generateSvgIconCode(item),$event)"
+        >
+          <el-tooltip placement="top">
+            <div slot="content">
+              {{ generateSvgIconCode(item) }}
+            </div>
+            <div class="icon-item">
+              <svg-icon
+                :name="item"
+                class="disabled"
+              />
+              <span>{{ item }}</span>
+            </div>
+          </el-tooltip>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="Element-UI Icons">
+        <div
+          v-for="item of elementIcons"
+          :key="item"
+          @click="handleClipboard(generateElementIconCode(item),$event)"
+        >
+          <el-tooltip placement="top">
+            <div slot="content">
+              {{ generateElementIconCode(item) }}
+            </div>
+            <div class="icon-item">
+              <i :class="'el-icon-' + item" />
+              <span>{{ item }}</span>
+            </div>
+          </el-tooltip>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { handleClipboard } from '@/utils/clipboard'
+import elementIcons from './elementIcons'
+import svgIcons from './svgIcons'
+
+@Component({
+  methods: {
+    handleClipboard
+  }
+})
+export default class Icons extends Vue {
+  private svgIcons = svgIcons
+  private elementIcons = elementIcons
+
+  private generateElementIconCode(symbol: string) {
+    return `<i class="el-icon-${symbol}" />`
+  }
+
+  private generateSvgIconCode(symbol: string) {
+    return `<svg-icon name="${symbol}" />`
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.icons-container {
+  margin: 10px 20px 0;
+  overflow: hidden;
+
+  .icon-item {
+    margin: 20px;
+    height: 85px;
+    text-align: center;
+    width: 100px;
+    float: left;
+    font-size: 30px;
+    color: #24292e;
+    cursor: pointer;
+  }
+
+  span {
+    display: block;
+    font-size: 16px;
+    margin-top: 10px;
+  }
+
+  .disabled {
+    pointer-events: none;
+  }
+}
+</style>
diff --git a/src/views/svg-icons/requireIcons.ts b/src/views/icons/svgIcons.ts
similarity index 100%
rename from src/views/svg-icons/requireIcons.ts
rename to src/views/icons/svgIcons.ts
diff --git a/src/views/svg-icons/index.vue b/src/views/svg-icons/index.vue
deleted file mode 100644
index 906b1a8cc..000000000
--- a/src/views/svg-icons/index.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<template>
-  <div class="icons-container">
-    <p class="warn-content">
-      <a
-        href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/icon.html"
-        target="_blank"
-      >Add and use
-      </a>
-    </p>
-    <div class="icons-wrapper">
-      <div
-        v-for="item of iconsMap"
-        :key="item"
-        @click="handleClipboard(generateIconCode(item), $event)"
-      >
-        <el-tooltip placement="top">
-          <div slot="content">
-            {{ generateIconCode(item) }}
-          </div>
-          <div class="icon-item">
-            <svg-icon
-              :name="item"
-              class="disabled"
-            />
-            <span>{{ item }}</span>
-          </div>
-        </el-tooltip>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
-import { handleClipboard } from '@/utils/clipboard'
-import icons from './requireIcons'
-
-@Component({
-  methods: {
-    handleClipboard
-  }
-})
-export default class Icons extends Vue {
-  private iconsMap = icons
-
-  private generateIconCode(symbol: string) {
-    return `<svg-icon name="${symbol}" />`
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.icons-container {
-  margin: 10px 20px 0;
-  overflow: hidden;
-
-  .icons-wrapper {
-    margin: 0 auto;
-  }
-
-  .icon-item {
-    margin: 20px;
-    height: 110px;
-    text-align: center;
-    width: 110px;
-    float: left;
-    font-size: 30px;
-    color: #24292e;
-    cursor: pointer;
-  }
-
-  span {
-    display: block;
-    font-size: 24px;
-    margin-top: 10px;
-  }
-
-  .disabled {
-    pointer-events: none;
-  }
-}
-</style>