diff --git a/app/src/components/globals/Icon.vue b/app/src/components/globals/Icon.vue
index bcd90655..0799be35 100644
--- a/app/src/components/globals/Icon.vue
+++ b/app/src/components/globals/Icon.vue
@@ -1,12 +1,13 @@
 <template>
-  <span :class="'icon fa fa-' + iname" aria-hidden="true" />
+  <span :class="['icon fa fa-' + iname, variant ? 'variant ' + variant : '']" aria-hidden="true" />
 </template>
 
 <script>
 export default {
   name: 'Icon',
   props: {
-    iname: { type: String, required: true }
+    iname: { type: String, required: true },
+    variant: { type: String, default: null }
   }
 }
 </script>
@@ -26,5 +27,25 @@ export default {
   &.fs-sm {
     font-size: 1rem;
   }
+
+  &.variant {
+    font-size: .8rem;
+    width: 1.35rem;
+    min-width: 1.35rem;
+    height: 1.35rem;
+    line-height: 165%;
+    border-radius: 50rem;
+
+    @each $color, $value in $theme-colors {
+      &.#{$color} {
+        background-color: $value;
+        color: $white;
+      }
+    }
+
+    &.warning {
+      color: $black;
+    }
+  }
 }
 </style>