various style fixes

scss/elements/_icons.scss

@@ -1,17 +1,19 @@
 @mixin icon {
-  display: inline-block;
-  vertical-align: bottom;
+  display: inline-flex;
 
   > svg {
     width: 100%;
     height: 100%;
+    * {
+      transition: fill $hover-transition-time;
+    }
   }
 }
 
 @mixin icon-size($size) {
   $icon-size: $size * .1rem;
   width: $icon-size;
-  height: $icon-size;
+  height: auto;
   margin: $icon-size / 4;
 }
 
@@ -21,8 +23,24 @@
   }
 }
 
+@mixin icon-style-active {
+  > svg * {
+    fill: $color-primary;
+  }
+}
+
+@mixin icon-style-inverted {
+  > svg * {
+    fill: $color-white;
+  }
+}
+
 .icon {
   @include icon;
   @include icon-size(16);
   @include icon-style-default;
+
+  &.icon--tiny {
+    @include icon-size(10);
+  }
 }