Nuke fontawesome, replace with inline SVG

src/assets/styles/components/_box.scss

@@ -22,50 +22,26 @@
 
 /* Icon */
 
-.icon {
-  @include icon;
-  border-bottom: none;
-  position: relative;
+.icon--style1 { fill: _palette(bg); }
+.icon--style2 { fill: _palette(accent2, bg); }
+.icon--style3 { fill: _palette(accent3, bg); }
+.icon--style4 { fill: _palette(accent4, bg); }
 
-  > .label {
-    display: none;
-  }
+.icon--diamond {
+  transform: rotate(-45deg);
+  border-radius: 3px;
+  border: 2px solid #dfdfdf;
+  box-sizing: border-box;
+  height: 5rem;
+  width: 5rem;
 
-  &.major {
-    @include vendor('transform', 'rotate(-45deg)');
-    border-radius: 3px;
-    border: solid 2px _palette(border);
-    display: inline-block;
-    font-size: 1.35em;
-    height: calc(3em + 2px);
-    line-height: 3em;
-    text-align: center;
-    width: calc(3em + 2px);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
 
-    &:before {
-      @include vendor('transform', 'rotate(45deg)');
-      display: inline-block;
-      font-size: 1.5em;
-    }
-
-    @include breakpoint(small) {
-      font-size: 1em;
-    }
-  }
-
-  &.style1 {
-    color: _palette(bg);
-  }
-
-  &.style2 {
-    color: _palette(accent2, bg);
-  }
-
-  &.style3 {
-    color: _palette(accent3, bg);
-  }
-  
-  &.style4 {
-    color: _palette(accent4, bg);
-  }
-}
+.icon--diamond svg {
+  margin: 1rem;
+  width: 2.25rem;
+  transform: rotate(45deg);
+}