icons in socket filter

styles/_filters.scss

@@ -8,6 +8,14 @@ $border-color: #6c757d;
 $hover-bg: #e9ecef;
 $disabled-color: #adb5bd;
 
+.filter-sockets {
+  label {
+    width: 45%;
+    float: left;
+    margin-right: 1rem;
+  }
+}
+
 #filter_max_output_slider {
   width: 100%;
   height: 10px;
@@ -19,6 +27,7 @@ $disabled-color: #adb5bd;
   font-size: 0.8rem;
   color: #666;
 }
+
 // Mixins
 @mixin flex-center {
   display: flex;
@@ -80,7 +89,7 @@ $disabled-color: #adb5bd;
     }
   }
 
-  input[type="checkbox"]:checked + .checkbox-custom {
+  input[type="checkbox"]:checked+.checkbox-custom {
     background: $primary-color;
     border-color: $primary-color;
     animation: checkboxPop 0.3s ease;
@@ -116,13 +125,13 @@ $disabled-color: #adb5bd;
   }
 
   input[type="checkbox"]:disabled {
-    + .checkbox-custom {
+    +.checkbox-custom {
       background: $hover-bg;
       border-color: $disabled-color;
       cursor: not-allowed;
     }
 
-    + .checkbox-custom + span {
+    +.checkbox-custom+span {
       color: $disabled-color;
       cursor: not-allowed;
     }
@@ -131,7 +140,15 @@ $disabled-color: #adb5bd;
 
 // Animation
 @keyframes checkboxPop {
-  0% { transform: scale(1); }
-  50% { transform: scale(1.1); }
-  100% { transform: scale(1); }
-}
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.1);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}