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);
+  }
 }

scss/elements/_typography.scss

@@ -4,6 +4,11 @@
  * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_typography.scss
  */
 
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
 h1, h2, h3, h4, h5, h6 {
   font-family: $font-sans;
 
@@ -25,15 +30,15 @@ h2 {
 
 
 a,
-a > span {
+a:hover {
   transition:
-    background 0.2s,
-    border 0.2s,
-    box-shadow 0.2s,
-    color 0.2s,
+    background $hover-transition-time,
+    border $hover-transition-time,
+    box-shadow $hover-transition-time,
+    color $hover-transition-time,
 }
 
 dt {
   display: inline;
   font-weight: bold;
-}
+}