diff --git a/extensions/tags/js/src/common/helpers/tagIcon.js b/extensions/tags/js/src/common/helpers/tagIcon.js
index d091f04e0..670606777 100644
--- a/extensions/tags/js/src/common/helpers/tagIcon.js
+++ b/extensions/tags/js/src/common/helpers/tagIcon.js
@@ -2,7 +2,7 @@ export default function tagIcon(tag, attrs = {}, settings = {}) {
   const hasIcon = tag && tag.icon();
   const { useColor = true } = settings;
 
-  attrs.className = hasIcon ? 'icon ' + tag.icon() + ' ' + (attrs.className || '') : 'icon TagIcon ' + (attrs.className || '');
+  attrs.className = 'icon TagIcon '+ (attrs.className || '') + ' ' + (hasIcon ? tag.icon() : 'default');
 
   if (tag) {
     attrs.style = attrs.style || {};
diff --git a/extensions/tags/less/common/TagIcon.less b/extensions/tags/less/common/TagIcon.less
index a2a3a0481..15680ba2f 100644
--- a/extensions/tags/less/common/TagIcon.less
+++ b/extensions/tags/less/common/TagIcon.less
@@ -1,14 +1,19 @@
 .TagIcon {
-  border-radius: @border-radius;
   width: 16px;
   height: 16px;
   display: inline-block;
-  vertical-align: -3px;
   margin-left: 1px;
-  background: @control-bg;
+  text-align: center;
+  font-size: 1rem;
 
   &.untagged {
     border: 1px dotted @muted-color;
     background: transparent;
   }
+
+  &.default {
+    border-radius: @border-radius;
+    background: @control-bg;
+    vertical-align: -3px;
+  }
 }