diff --git a/src/app/components/vertical-icons-component.js b/src/app/components/vertical-icons-component.js
index 41c41b9067..35a25b1841 100644
--- a/src/app/components/vertical-icons-component.js
+++ b/src/app/components/vertical-icons-component.js
@@ -101,7 +101,7 @@ class VerticalIconComponent {
       let classes = css.status
       switch (key) {
         case 'check':
-          classes += ' badge badge-pill badge-' + type + ' text-' + type
+          classes += ' fas fa-check-circle text-' + type + ' ' + css.statusCheck
           break
         case 'code':
           classes += ' fas fa-sync text-' + type
@@ -115,7 +115,7 @@ class VerticalIconComponent {
         class="${classes}"
         aria-hidden="true"
       >
-      ${key === 'code' ? '' : key === 'check' ? 'o' : key}
+      ${key === 'code' || key === 'check' ? '' : key}
       </span>`)
 
       // el.classList = "" doesn't work on all browser use instead
@@ -285,6 +285,9 @@ const css = csjs`
     bottom: 0;
     right: 0;
   }
+  .statusCheck {
+    font-size: 1.2em;
+  }
   .statusWithBG
     border-radius: 8px;
     background-color: var(--danger);