diff --git a/examples/views/docs/component/icon.md b/examples/views/docs/component/icon.md
index e13156b..a441d98 100644
--- a/examples/views/docs/component/icon.md
+++ b/examples/views/docs/component/icon.md
@@ -14,6 +14,7 @@
     <zui-icon name="attachmoney" />
     <zui-icon name="accountbalancewallet" size="2rem" info="1" />
     <zui-icon name="trendingup" size="2rem" color="red" />
+    <zui-icon name="dns" size="2rem" dot />
   </div>
 </template>
 
diff --git a/packages/icon/index.css b/packages/icon/index.css
index 3bcb134..742a8ce 100644
--- a/packages/icon/index.css
+++ b/packages/icon/index.css
@@ -29,4 +29,10 @@
   transform: translate(50%, -50%);
   -webkit-transform-origin: 100%;
   transform-origin: 100%;
+}
+
+.zui-info.dot {
+  height: 14px;
+  width: 14px;
+  min-width: 14px !important;
 }
\ No newline at end of file
diff --git a/packages/icon/index.vue b/packages/icon/index.vue
index 2a473de..b0c43d2 100644
--- a/packages/icon/index.vue
+++ b/packages/icon/index.vue
@@ -1,6 +1,6 @@
 <template>
   <i class="zui-icon" :class="classRender" :style="styleRender" @click="onClick">
-    <div v-if="info" class="zui-info">{{ info }}</div>
+    <div v-if="info || dot" class="zui-info" :class="{ dot: dot }">{{ info }}</div>
   </i>
 </template>
 
@@ -22,7 +22,8 @@ export default {
     },
     size: String,
     color: String,
-    info: [Number, String]
+    info: [Number, String],
+    dot: Boolean,
   },
   computed: {
     classRender: function() {
--
libgit2 0.21.0