Moved to using PNGs since I know that works

I don't want to spend time on this when there's bigger fish to fry. Will revisit in the future.

components/UncapStar/index.scss

@@ -18,42 +18,42 @@
   &.empty.flb,
   &.empty.ulb,
   &.empty.special {
-    background-image: url('/icons/uncap/empty.svg');
+    background-image: url('/icons/uncap/empty@3x.png');
 
     &:hover {
-      background-image: url('/icons/uncap/empty-hover.svg');
+      background-image: url('/icons/uncap/empty-hover@3x.png');
     }
   }
 
   &.mlb {
-    background-image: url('/icons/uncap/yellow.svg');
+    background-image: url('/icons/uncap/yellow@3x.png');
 
     &:hover {
-      background-image: url('/icons/uncap/yellow-hover.svg');
+      background-image: url('/icons/uncap/yellow-hover@3x.png');
     }
   }
 
   &.special {
-    background-image: url('/icons/uncap/red.svg');
+    background-image: url('/icons/uncap/red@3x.png');
 
     &:hover {
-      background: url('/icons/uncap/red-hover.svg');
+      background: url('/icons/uncap/red-hover@3x.png');
     }
   }
 
   &.flb {
-    background-image: url('/icons/uncap/blue.svg');
+    background-image: url('/icons/uncap/blue@3x.png');
 
     &:hover {
-      background: url('/icons/uncap/blue-hover.svg');
+      background: url('/icons/uncap/blue-hover@3x.png');
     }
   }
 
   &.ulb {
-    background-image: url('/icons/uncap/purple.svg');
+    background-image: url('/icons/uncap/purple@3x.png');
 
     &:hover {
-      background-image: url('/icons/uncap/purple-hover.svg');
+      background-image: url('/icons/uncap/purple-hover@3x.png');
     }
   }
 }
@@ -62,7 +62,6 @@
 @media only screen and (max-width: 430px) and (max-height: 850px) and (-webkit-device-pixel-ratio: 3) {
   .UncapStar {
     background-size: cover;
-    image-rendering: crisp-edges;
     height: 14px;
     width: 14px;
   }