diff --git a/css/80_app.css b/css/80_app.css
index 5a4d52be1..40fd881ef 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -420,19 +420,13 @@ button[disabled].action:hover {
     position: absolute;
     width: 10px;
     height: 10px;
-    right: 8px;
-    top: 8px;
+    right: 7px;
+    top: 9px;
 }
 
 .icon-badge.hide {
     display: none;
 }
-.icon-badge.error {
-    color: #f00;
-}
-.icon-badge.warning {
-    color: #ff0;
-}
 
 
 /* Toolbar / Persistent UI Elements
@@ -3021,11 +3015,17 @@ div.full-screen > button:hover {
  li.issue.severity-warning {
     border-color: #FFDF5C;
 }
+.icon-badge.warning {
+    color: #FFDF5C;
+}
 .errors-list,
 .issue.severity-error,
  li.issue.severity-error {
     border-color: #f5b0ab;
 }
+.icon-badge.error {
+    color: #ff0c05;
+}
 
 .issue.severity-warning,
 .issue.severity-warning button,
diff --git a/modules/ui/issues.js b/modules/ui/issues.js
index f62dd1605..d3fbe8fed 100644
--- a/modules/ui/issues.js
+++ b/modules/ui/issues.js
@@ -47,18 +47,18 @@ export function uiIssues(context) {
     }*/
 
     function addIconBadge(selection) {
+        var d = 10;
         selection.selectAll('svg.icon-badge')
             .data([0])
             .enter()
             .append('svg')
-            .attr('viewbox', '0 0 10 10')
+            .attr('viewbox', '0 0 ' + d + ' ' + d)
             .attr('class', 'icon-badge')
             .append('circle')
-            .attr('cx', '5')
-            .attr('cy', '5')
-            .attr('r', '5')
-            .attr('fill', 'currentColor')
-            .attr('stroke', '#333');
+            .attr('cx', d / 2)
+            .attr('cy', d / 2)
+            .attr('r', (d / 2) - 1)
+            .attr('fill', 'currentColor');
     }
 
     function renderErrorsList(selection) {