diff --git a/app/assets/javascripts/app/views/widget/tag.jst.eco b/app/assets/javascripts/app/views/widget/tag.jst.eco
index ace320311..759c998b8 100644
--- a/app/assets/javascripts/app/views/widget/tag.jst.eco
+++ b/app/assets/javascripts/app/views/widget/tag.jst.eco
@@ -2,12 +2,12 @@
   <label><%- @T( 'Tags' ) %></label>
   <ul class="tagList">
     <% for tag in @tags: %>
-    <li class="horizontal center">
-      <span class="flex tag"><%= tag %></span>
+    <li class="tag">
+      <div class="tag-name"><%= tag %></div>
       <!--<span>3</span>-->
-      <span class="tag-delete js-delete centered u-clickable">
-        <span class="delete icon"></span>
-      </span>
+      <div class="tag-delete js-delete ">
+        <svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+      </div>
     <% end %>
   </ul>
   <div class="text-muted js-newTagLabel u-clickable">+ <%- @T('Add Tag') %></div>
diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss
index 97e37129e..eacac9260 100644
--- a/app/assets/stylesheets/zammad.css.scss
+++ b/app/assets/stylesheets/zammad.css.scss
@@ -3599,20 +3599,35 @@ footer {
   margin-bottom: 5px;
 }
 
-  .tagList li {
+  .tagList .tag {
+    display: flex;
+    align-items: center;
+    color: hsl(206,7%,28%);
     border-bottom: 1px solid hsl(240,4%,95%);
   }
 
+  .tagList .tag-name {
+    flex: 1;
+  }
+
   .tagList .tag-delete {
     height: 29px;
     padding: 0 10px;
     margin-right: -4px;
-    display: block;
-    opacity: 0.2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    @extend .u-clickable;
+    
+    .icon {
+      width: 9px;
+      height: 9px;
+      fill: hsl(0,0%,82%);
+    }
   }
 
-    .tagList .tag-delete:hover {
-      opacity: 0.5;
+    .tagList .tag-delete:hover .icon {
+      fill: hsl(1,77%,47%);
     }
 
 .attributeBar {