diff --git a/packages/big-design/src/components/Alert/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Alert/__snapshots__/spec.tsx.snap
index 3ede20454..d5d25e59a 100644
--- a/packages/big-design/src/components/Alert/__snapshots__/spec.tsx.snap
+++ b/packages/big-design/src/components/Alert/__snapshots__/spec.tsx.snap
@@ -1,6 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`render default (success) Alert 1`] = `
+.c4 {
+  vertical-align: middle;
+  color: #2AAB3F;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c0 {
   box-sizing: border-box;
 }
@@ -14,11 +21,11 @@ exports[`render default (success) Alert 1`] = `
   grid-area: icon;
 }
 
-.c4 {
+.c5 {
   grid-area: messages;
 }
 
-.c5 {
+.c6 {
   color: #313440;
   margin: 0 0 1rem;
   color: #5E637A;
@@ -28,7 +35,7 @@ exports[`render default (success) Alert 1`] = `
   margin: 0 0 0.75rem;
 }
 
-.c5:last-child {
+.c6:last-child {
   margin-bottom: 0;
 }
 
@@ -50,7 +57,7 @@ exports[`render default (success) Alert 1`] = `
   border-left: 0.25rem solid #2AAB3F;
 }
 
-.c6 {
+.c7 {
   color: #313440;
   vertical-align: middle;
 }
@@ -65,7 +72,7 @@ exports[`render default (success) Alert 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="eQftbt"
+      class="c4"
       color="success"
       fill="currentColor"
       height="24"
@@ -84,13 +91,13 @@ exports[`render default (success) Alert 1`] = `
     </svg>
   </div>
   <div
-    class="c0 c4"
+    class="c0 c5"
   >
     <div
       class="c0"
     >
       <span
-        class="c5 c6"
+        class="c6 c7"
       >
         Success
       </span>
@@ -101,6 +108,13 @@ exports[`render default (success) Alert 1`] = `
 `;
 
 exports[`render error Alert 1`] = `
+.c4 {
+  vertical-align: middle;
+  color: #DB3643;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c0 {
   box-sizing: border-box;
 }
@@ -114,11 +128,11 @@ exports[`render error Alert 1`] = `
   grid-area: icon;
 }
 
-.c4 {
+.c5 {
   grid-area: messages;
 }
 
-.c5 {
+.c6 {
   color: #313440;
   margin: 0 0 1rem;
   color: #5E637A;
@@ -128,7 +142,7 @@ exports[`render error Alert 1`] = `
   margin: 0 0 0.75rem;
 }
 
-.c5:last-child {
+.c6:last-child {
   margin-bottom: 0;
 }
 
@@ -150,7 +164,7 @@ exports[`render error Alert 1`] = `
   border-left: 0.25rem solid #DB3643;
 }
 
-.c6 {
+.c7 {
   color: #313440;
   vertical-align: middle;
 }
@@ -165,7 +179,7 @@ exports[`render error Alert 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="fxNXfI"
+      class="c4"
       color="danger"
       fill="currentColor"
       height="24"
@@ -180,13 +194,13 @@ exports[`render error Alert 1`] = `
     </svg>
   </div>
   <div
-    class="c0 c4"
+    class="c0 c5"
   >
     <div
       class="c0"
     >
       <span
-        class="c5 c6"
+        class="c6 c7"
       >
         Error
       </span>
@@ -197,6 +211,13 @@ exports[`render error Alert 1`] = `
 `;
 
 exports[`render info Alert 1`] = `
+.c4 {
+  vertical-align: middle;
+  color: #0B38D9;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c0 {
   box-sizing: border-box;
 }
@@ -210,11 +231,11 @@ exports[`render info Alert 1`] = `
   grid-area: icon;
 }
 
-.c4 {
+.c5 {
   grid-area: messages;
 }
 
-.c5 {
+.c6 {
   color: #313440;
   margin: 0 0 1rem;
   color: #5E637A;
@@ -224,7 +245,7 @@ exports[`render info Alert 1`] = `
   margin: 0 0 0.75rem;
 }
 
-.c5:last-child {
+.c6:last-child {
   margin-bottom: 0;
 }
 
@@ -246,7 +267,7 @@ exports[`render info Alert 1`] = `
   border-left: 0.25rem solid #0B38D9;
 }
 
-.c6 {
+.c7 {
   color: #313440;
   vertical-align: middle;
 }
@@ -261,7 +282,7 @@ exports[`render info Alert 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="bTIztk"
+      class="c4"
       color="primary60"
       fill="currentColor"
       height="24"
@@ -280,13 +301,13 @@ exports[`render info Alert 1`] = `
     </svg>
   </div>
   <div
-    class="c0 c4"
+    class="c0 c5"
   >
     <div
       class="c0"
     >
       <span
-        class="c5 c6"
+        class="c6 c7"
       >
         Info
       </span>
@@ -297,6 +318,13 @@ exports[`render info Alert 1`] = `
 `;
 
 exports[`render warning Alert 1`] = `
+.c4 {
+  vertical-align: middle;
+  color: #FFAE00;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c0 {
   box-sizing: border-box;
 }
@@ -310,11 +338,11 @@ exports[`render warning Alert 1`] = `
   grid-area: icon;
 }
 
-.c4 {
+.c5 {
   grid-area: messages;
 }
 
-.c5 {
+.c6 {
   color: #313440;
   margin: 0 0 1rem;
   color: #5E637A;
@@ -324,7 +352,7 @@ exports[`render warning Alert 1`] = `
   margin: 0 0 0.75rem;
 }
 
-.c5:last-child {
+.c6:last-child {
   margin-bottom: 0;
 }
 
@@ -346,7 +374,7 @@ exports[`render warning Alert 1`] = `
   border-left: 0.25rem solid #FFAE00;
 }
 
-.c6 {
+.c7 {
   color: #313440;
   vertical-align: middle;
 }
@@ -361,7 +389,7 @@ exports[`render warning Alert 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="LZgDY"
+      class="c4"
       color="warning50"
       fill="currentColor"
       height="24"
@@ -376,13 +404,13 @@ exports[`render warning Alert 1`] = `
     </svg>
   </div>
   <div
-    class="c0 c4"
+    class="c0 c5"
   >
     <div
       class="c0"
     >
       <span
-        class="c5 c6"
+        class="c6 c7"
       >
         Warning
       </span>
@@ -393,11 +421,24 @@ exports[`render warning Alert 1`] = `
 `;
 
 exports[`renders close button 1`] = `
+.c4 {
+  vertical-align: middle;
+  color: #2AAB3F;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.c11 {
+  vertical-align: middle;
+  height: 1.25rem;
+  width: 1.25rem;
+}
+
 .c0 {
   box-sizing: border-box;
 }
 
-.c7 {
+.c8 {
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
   -webkit-transition-property: background-color,border-color,box-shadow,color;
@@ -446,36 +487,36 @@ exports[`renders close button 1`] = `
   font-weight: 600;
 }
 
-.c7:focus {
+.c8:focus {
   outline: none;
 }
 
-.c7[disabled] {
+.c8[disabled] {
   border-color: #D9DCE9;
   pointer-events: none;
 }
 
-.c7 + .bd-button {
+.c8 + .bd-button {
   margin-top: 0.5rem;
 }
 
-.c7:active {
+.c8:active {
   background-color: #0B38D9;
 }
 
-.c7:focus {
+.c8:focus {
   box-shadow: 0 0 0 0.25rem #DBE3FE;
 }
 
-.c7:hover:not(:active) {
+.c8:hover:not(:active) {
   background-color: #2852EB;
 }
 
-.c7[disabled] {
+.c8[disabled] {
   background-color: #D9DCE9;
 }
 
-.c9 {
+.c10 {
   -webkit-align-content: center;
   -ms-flex-line-pack: center;
   align-content: center;
@@ -488,7 +529,7 @@ exports[`renders close button 1`] = `
   grid-gap: 0.5rem;
 }
 
-.c8 {
+.c9 {
   background-color: transparent;
   border: none;
   color: #313440;
@@ -497,19 +538,19 @@ exports[`renders close button 1`] = `
   padding: 0;
 }
 
-.c8:active {
+.c9:active {
   background-color: #DBE3FE;
 }
 
-.c8:focus {
+.c9:focus {
   box-shadow: 0 0 0 0.25rem #DBE3FE;
 }
 
-.c8:hover:not(:active) {
+.c9:hover:not(:active) {
   background-color: #F0F3FF;
 }
 
-.c8[disabled] {
+.c9[disabled] {
   color: #D9DCE9;
 }
 
@@ -522,11 +563,11 @@ exports[`renders close button 1`] = `
   grid-area: icon;
 }
 
-.c4 {
+.c5 {
   grid-area: messages;
 }
 
-.c5 {
+.c6 {
   color: #313440;
   margin: 0 0 1rem;
   color: #5E637A;
@@ -536,7 +577,7 @@ exports[`renders close button 1`] = `
   margin: 0 0 0.75rem;
 }
 
-.c5:last-child {
+.c6:last-child {
   margin-bottom: 0;
 }
 
@@ -558,20 +599,20 @@ exports[`renders close button 1`] = `
   border-left: 0.25rem solid #2AAB3F;
 }
 
-.c6 {
+.c7 {
   color: #313440;
   vertical-align: middle;
 }
 
 @media (min-width:720px) {
-  .c7 + .bd-button {
+  .c8 + .bd-button {
     margin-top: 0;
     margin-left: 0.5rem;
   }
 }
 
 @media (min-width:720px) {
-  .c7 {
+  .c8 {
     width: auto;
     padding: 0;
     min-width: 2.25rem;
@@ -588,7 +629,7 @@ exports[`renders close button 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="eQftbt"
+      class="c4"
       color="success"
       fill="currentColor"
       height="24"
@@ -607,13 +648,13 @@ exports[`renders close button 1`] = `
     </svg>
   </div>
   <div
-    class="c0 c4"
+    class="c0 c5"
   >
     <div
       class="c0"
     >
       <span
-        class="c5 c6"
+        class="c6 c7"
       >
         Success
       </span>
@@ -624,14 +665,14 @@ exports[`renders close button 1`] = `
     class="c0 "
   >
     <button
-      class="c7 c8"
+      class="c8 c9"
     >
       <span
-        class="c9"
+        class="c10"
       >
         <svg
           aria-hidden="true"
-          class="jqaCLj"
+          class="c11"
           fill="currentColor"
           height="24"
           stroke="currentColor"
@@ -654,6 +695,13 @@ exports[`renders close button 1`] = `
 `;
 
 exports[`renders header 1`] = `
+.c4 {
+  vertical-align: middle;
+  color: #2AAB3F;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c0 {
   box-sizing: border-box;
 }
@@ -667,11 +715,11 @@ exports[`renders header 1`] = `
   grid-area: icon;
 }
 
-.c4 {
+.c5 {
   grid-area: messages;
 }
 
-.c5 {
+.c6 {
   color: #313440;
   margin: 0 0 1rem;
   font-size: 1rem;
@@ -680,7 +728,7 @@ exports[`renders header 1`] = `
   margin: 0 0 0.5rem;
 }
 
-.c7 {
+.c8 {
   color: #313440;
   margin: 0 0 1rem;
   color: #5E637A;
@@ -690,7 +738,7 @@ exports[`renders header 1`] = `
   margin: 0 0 0.75rem;
 }
 
-.c7:last-child {
+.c8:last-child {
   margin-bottom: 0;
 }
 
@@ -712,12 +760,12 @@ exports[`renders header 1`] = `
   border-left: 0.25rem solid #2AAB3F;
 }
 
-.c6 {
+.c7 {
   line-height: 1rem;
   margin-bottom: 0.25rem;
 }
 
-.c8 {
+.c9 {
   color: #313440;
   vertical-align: middle;
 }
@@ -733,7 +781,7 @@ exports[`renders header 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="eQftbt"
+      class="c4"
       color="success"
       fill="currentColor"
       height="24"
@@ -752,10 +800,10 @@ exports[`renders header 1`] = `
     </svg>
   </div>
   <div
-    class="c0 c4"
+    class="c0 c5"
   >
     <h4
-      class="c5 c6"
+      class="c6 c7"
       id=":rd:"
     >
       Header
@@ -764,7 +812,7 @@ exports[`renders header 1`] = `
       class="c0"
     >
       <span
-        class="c7 c8"
+        class="c8 c9"
       >
         Success
       </span>
@@ -775,6 +823,19 @@ exports[`renders header 1`] = `
 `;
 
 exports[`renders with external link 1`] = `
+.c4 {
+  vertical-align: middle;
+  color: #2AAB3F;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.c10 {
+  vertical-align: middle;
+  height: 1rem;
+  width: 1rem;
+}
+
 .c0 {
   box-sizing: border-box;
 }
@@ -788,11 +849,11 @@ exports[`renders with external link 1`] = `
   grid-area: icon;
 }
 
-.c4 {
+.c5 {
   grid-area: messages;
 }
 
-.c7 {
+.c8 {
   -webkit-transition: all 70ms ease-out;
   transition: all 70ms ease-out;
   -webkit-transition-property: color;
@@ -813,22 +874,22 @@ exports[`renders with external link 1`] = `
   align-items: center;
 }
 
-.c7:active {
+.c8:active {
   color: #0024A6;
 }
 
-.c7:hover:not(:active) {
+.c8:hover:not(:active) {
   color: #0024A6;
 }
 
-.c7 svg {
+.c8 svg {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
   margin-left: 0.25rem;
 }
 
-.c5 {
+.c6 {
   color: #313440;
   margin: 0 0 1rem;
   color: #5E637A;
@@ -838,7 +899,7 @@ exports[`renders with external link 1`] = `
   margin: 0 0 0.75rem;
 }
 
-.c5:last-child {
+.c6:last-child {
   margin-bottom: 0;
 }
 
@@ -860,12 +921,12 @@ exports[`renders with external link 1`] = `
   border-left: 0.25rem solid #2AAB3F;
 }
 
-.c6 {
+.c7 {
   color: #313440;
   vertical-align: middle;
 }
 
-.c8 {
+.c9 {
   font-size: 0.875rem;
   vertical-align: middle;
 }
@@ -880,7 +941,7 @@ exports[`renders with external link 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="eQftbt"
+      class="c4"
       color="success"
       fill="currentColor"
       height="24"
@@ -899,19 +960,19 @@ exports[`renders with external link 1`] = `
     </svg>
   </div>
   <div
-    class="c0 c4"
+    class="c0 c5"
   >
     <div
       class="c0"
     >
       <span
-        class="c5 c6"
+        class="c6 c7"
       >
         Success
       </span>
        
       <a
-        class="c7 c8"
+        class="c8 c9"
         href="#"
         target="_blank"
       >
@@ -920,7 +981,7 @@ exports[`renders with external link 1`] = `
         </span>
         <svg
           aria-hidden="true"
-          class="dezehb"
+          class="c10"
           fill="currentColor"
           height="24"
           stroke="currentColor"
@@ -943,6 +1004,13 @@ exports[`renders with external link 1`] = `
 `;
 
 exports[`renders with link 1`] = `
+.c4 {
+  vertical-align: middle;
+  color: #2AAB3F;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c0 {
   box-sizing: border-box;
 }
@@ -956,11 +1024,11 @@ exports[`renders with link 1`] = `
   grid-area: icon;
 }
 
-.c4 {
+.c5 {
   grid-area: messages;
 }
 
-.c7 {
+.c8 {
   -webkit-transition: all 70ms ease-out;
   transition: all 70ms ease-out;
   -webkit-transition-property: color;
@@ -973,15 +1041,15 @@ exports[`renders with link 1`] = `
   text-decoration: none;
 }
 
-.c7:active {
+.c8:active {
   color: #0024A6;
 }
 
-.c7:hover:not(:active) {
+.c8:hover:not(:active) {
   color: #0024A6;
 }
 
-.c5 {
+.c6 {
   color: #313440;
   margin: 0 0 1rem;
   color: #5E637A;
@@ -991,7 +1059,7 @@ exports[`renders with link 1`] = `
   margin: 0 0 0.75rem;
 }
 
-.c5:last-child {
+.c6:last-child {
   margin-bottom: 0;
 }
 
@@ -1013,12 +1081,12 @@ exports[`renders with link 1`] = `
   border-left: 0.25rem solid #2AAB3F;
 }
 
-.c6 {
+.c7 {
   color: #313440;
   vertical-align: middle;
 }
 
-.c8 {
+.c9 {
   font-size: 0.875rem;
   vertical-align: middle;
 }
@@ -1033,7 +1101,7 @@ exports[`renders with link 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="eQftbt"
+      class="c4"
       color="success"
       fill="currentColor"
       height="24"
@@ -1052,19 +1120,19 @@ exports[`renders with link 1`] = `
     </svg>
   </div>
   <div
-    class="c0 c4"
+    class="c0 c5"
   >
     <div
       class="c0"
     >
       <span
-        class="c5 c6"
+        class="c6 c7"
       >
         Success
       </span>
        
       <a
-        class="c7 c8"
+        class="c8 c9"
         href="#"
       >
         Link
diff --git a/packages/big-design/src/components/Button/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Button/__snapshots__/spec.tsx.snap
index 6f35c9086..94171b52e 100644
--- a/packages/big-design/src/components/Button/__snapshots__/spec.tsx.snap
+++ b/packages/big-design/src/components/Button/__snapshots__/spec.tsx.snap
@@ -678,6 +678,12 @@ exports[`render disabled button 1`] = `
 `;
 
 exports[`render icon left and right button 1`] = `
+.c2 {
+  vertical-align: middle;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c0 {
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
@@ -792,7 +798,7 @@ exports[`render icon left and right button 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="brjSIf"
+      class="c2"
       fill="currentColor"
       height="24"
       stroke="currentColor"
@@ -811,7 +817,7 @@ exports[`render icon left and right button 1`] = `
     Button
     <svg
       aria-hidden="true"
-      class="brjSIf"
+      class="c2"
       fill="currentColor"
       height="24"
       stroke="currentColor"
@@ -832,6 +838,12 @@ exports[`render icon left and right button 1`] = `
 `;
 
 exports[`render icon left button 1`] = `
+.c2 {
+  vertical-align: middle;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c0 {
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
@@ -945,7 +957,7 @@ exports[`render icon left button 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="brjSIf"
+      class="c2"
       fill="currentColor"
       height="24"
       stroke="currentColor"
@@ -967,6 +979,12 @@ exports[`render icon left button 1`] = `
 `;
 
 exports[`render icon only button 1`] = `
+.c2 {
+  vertical-align: middle;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c0 {
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
@@ -1081,7 +1099,7 @@ exports[`render icon only button 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="brjSIf"
+      class="c2"
       fill="currentColor"
       height="24"
       stroke="currentColor"
@@ -1102,6 +1120,12 @@ exports[`render icon only button 1`] = `
 `;
 
 exports[`render icon right button 1`] = `
+.c2 {
+  vertical-align: middle;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c0 {
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
@@ -1216,7 +1240,7 @@ exports[`render icon right button 1`] = `
     Button
     <svg
       aria-hidden="true"
-      class="brjSIf"
+      class="c2"
       fill="currentColor"
       height="24"
       stroke="currentColor"
diff --git a/packages/big-design/src/components/Checkbox/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Checkbox/__snapshots__/spec.tsx.snap
index d1607c7da..ac2afe0c6 100644
--- a/packages/big-design/src/components/Checkbox/__snapshots__/spec.tsx.snap
+++ b/packages/big-design/src/components/Checkbox/__snapshots__/spec.tsx.snap
@@ -1,7 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`render Checkbox checked 1`] = `
-.c6 {
+.c5 {
+  vertical-align: middle;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.c7 {
   color: #313440;
   margin: 0 0 1rem;
   font-size: 1rem;
@@ -9,15 +15,15 @@ exports[`render Checkbox checked 1`] = `
   line-height: 1.5rem;
 }
 
-.c6:last-child {
+.c7:last-child {
   margin-bottom: 0;
 }
 
-.c7 {
+.c8 {
   cursor: pointer;
 }
 
-.c5 {
+.c6 {
   margin-left: 0.5rem;
 }
 
@@ -109,7 +115,7 @@ exports[`render Checkbox checked 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="brjSIf"
+      class="c5"
       fill="currentColor"
       height="24"
       stroke="currentColor"
@@ -127,10 +133,10 @@ exports[`render Checkbox checked 1`] = `
     </svg>
   </label>
   <div
-    class="c5"
+    class="c6"
   >
     <label
-      class="c6 c7"
+      class="c7 c8"
       for=":r0:"
       id=":r1:"
     >
@@ -141,7 +147,13 @@ exports[`render Checkbox checked 1`] = `
 `;
 
 exports[`render Checkbox disabled checked 1`] = `
-.c6 {
+.c5 {
+  vertical-align: middle;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.c7 {
   color: #313440;
   margin: 0 0 1rem;
   font-size: 1rem;
@@ -149,16 +161,16 @@ exports[`render Checkbox disabled checked 1`] = `
   line-height: 1.5rem;
 }
 
-.c6:last-child {
+.c7:last-child {
   margin-bottom: 0;
 }
 
-.c7 {
+.c8 {
   cursor: pointer;
   cursor: not-allowed;
 }
 
-.c5 {
+.c6 {
   margin-left: 0.5rem;
 }
 
@@ -251,7 +263,7 @@ exports[`render Checkbox disabled checked 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="brjSIf"
+      class="c5"
       fill="currentColor"
       height="24"
       stroke="currentColor"
@@ -269,11 +281,11 @@ exports[`render Checkbox disabled checked 1`] = `
     </svg>
   </label>
   <div
-    class="c5"
+    class="c6"
   >
     <label
       aria-hidden="true"
-      class="c6 c7"
+      class="c7 c8"
       disabled=""
       for=":ri:"
       id=":rj:"
@@ -285,7 +297,13 @@ exports[`render Checkbox disabled checked 1`] = `
 `;
 
 exports[`render Checkbox disabled indeterminate 1`] = `
-.c6 {
+.c5 {
+  vertical-align: middle;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.c7 {
   color: #313440;
   margin: 0 0 1rem;
   font-size: 1rem;
@@ -293,16 +311,16 @@ exports[`render Checkbox disabled indeterminate 1`] = `
   line-height: 1.5rem;
 }
 
-.c6:last-child {
+.c7:last-child {
   margin-bottom: 0;
 }
 
-.c7 {
+.c8 {
   cursor: pointer;
   cursor: not-allowed;
 }
 
-.c5 {
+.c6 {
   margin-left: 0.5rem;
 }
 
@@ -393,7 +411,7 @@ exports[`render Checkbox disabled indeterminate 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="brjSIf"
+      class="c5"
       fill="currentColor"
       height="24"
       stroke="currentColor"
@@ -411,11 +429,11 @@ exports[`render Checkbox disabled indeterminate 1`] = `
     </svg>
   </label>
   <div
-    class="c5"
+    class="c6"
   >
     <label
       aria-hidden="true"
-      class="c6 c7"
+      class="c7 c8"
       disabled=""
       for=":ro:"
       id=":rp:"
@@ -427,7 +445,13 @@ exports[`render Checkbox disabled indeterminate 1`] = `
 `;
 
 exports[`render Checkbox disabled unchecked 1`] = `
-.c6 {
+.c5 {
+  vertical-align: middle;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.c7 {
   color: #313440;
   margin: 0 0 1rem;
   font-size: 1rem;
@@ -435,16 +459,16 @@ exports[`render Checkbox disabled unchecked 1`] = `
   line-height: 1.5rem;
 }
 
-.c6:last-child {
+.c7:last-child {
   margin-bottom: 0;
 }
 
-.c7 {
+.c8 {
   cursor: pointer;
   cursor: not-allowed;
 }
 
-.c5 {
+.c6 {
   margin-left: 0.5rem;
 }
 
@@ -536,7 +560,7 @@ exports[`render Checkbox disabled unchecked 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="brjSIf"
+      class="c5"
       fill="currentColor"
       height="24"
       stroke="currentColor"
@@ -554,11 +578,11 @@ exports[`render Checkbox disabled unchecked 1`] = `
     </svg>
   </label>
   <div
-    class="c5"
+    class="c6"
   >
     <label
       aria-hidden="true"
-      class="c6 c7"
+      class="c7 c8"
       disabled=""
       for=":rl:"
       id=":rm:"
@@ -570,7 +594,13 @@ exports[`render Checkbox disabled unchecked 1`] = `
 `;
 
 exports[`render Checkbox indeterminate 1`] = `
-.c6 {
+.c5 {
+  vertical-align: middle;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.c7 {
   color: #313440;
   margin: 0 0 1rem;
   font-size: 1rem;
@@ -578,15 +608,15 @@ exports[`render Checkbox indeterminate 1`] = `
   line-height: 1.5rem;
 }
 
-.c6:last-child {
+.c7:last-child {
   margin-bottom: 0;
 }
 
-.c7 {
+.c8 {
   cursor: pointer;
 }
 
-.c5 {
+.c6 {
   margin-left: 0.5rem;
 }
 
@@ -676,7 +706,7 @@ exports[`render Checkbox indeterminate 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="brjSIf"
+      class="c5"
       fill="currentColor"
       height="24"
       stroke="currentColor"
@@ -694,10 +724,10 @@ exports[`render Checkbox indeterminate 1`] = `
     </svg>
   </label>
   <div
-    class="c5"
+    class="c6"
   >
     <label
-      class="c6 c7"
+      class="c7 c8"
       for=":rf:"
       id=":rg:"
     >
@@ -708,7 +738,13 @@ exports[`render Checkbox indeterminate 1`] = `
 `;
 
 exports[`render Checkbox unchecked 1`] = `
-.c6 {
+.c5 {
+  vertical-align: middle;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.c7 {
   color: #313440;
   margin: 0 0 1rem;
   font-size: 1rem;
@@ -716,15 +752,15 @@ exports[`render Checkbox unchecked 1`] = `
   line-height: 1.5rem;
 }
 
-.c6:last-child {
+.c7:last-child {
   margin-bottom: 0;
 }
 
-.c7 {
+.c8 {
   cursor: pointer;
 }
 
-.c5 {
+.c6 {
   margin-left: 0.5rem;
 }
 
@@ -815,7 +851,7 @@ exports[`render Checkbox unchecked 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="brjSIf"
+      class="c5"
       fill="currentColor"
       height="24"
       stroke="currentColor"
@@ -833,10 +869,10 @@ exports[`render Checkbox unchecked 1`] = `
     </svg>
   </label>
   <div
-    class="c5"
+    class="c6"
   >
     <label
-      class="c6 c7"
+      class="c7 c8"
       for=":r3:"
       id=":r4:"
     >
@@ -847,7 +883,13 @@ exports[`render Checkbox unchecked 1`] = `
 `;
 
 exports[`render Checkbox with description object 1`] = `
-.c6 {
+.c5 {
+  vertical-align: middle;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.c7 {
   color: #313440;
   margin: 0 0 1rem;
   font-size: 1rem;
@@ -855,11 +897,11 @@ exports[`render Checkbox with description object 1`] = `
   line-height: 1.5rem;
 }
 
-.c6:last-child {
+.c7:last-child {
   margin-bottom: 0;
 }
 
-.c8 {
+.c9 {
   color: #313440;
   margin: 0 0 1rem;
   color: #5E637A;
@@ -869,15 +911,15 @@ exports[`render Checkbox with description object 1`] = `
   margin: 0 0 0.75rem;
 }
 
-.c8:last-child {
+.c9:last-child {
   margin-bottom: 0;
 }
 
-.c7 {
+.c8 {
   cursor: pointer;
 }
 
-.c9 {
+.c10 {
   -webkit-transition: all 70ms ease-out;
   transition: all 70ms ease-out;
   -webkit-transition-property: color;
@@ -890,19 +932,19 @@ exports[`render Checkbox with description object 1`] = `
   text-decoration: none;
 }
 
-.c9:active {
+.c10:active {
   color: #0024A6;
 }
 
-.c9:hover:not(:active) {
+.c10:hover:not(:active) {
   color: #0024A6;
 }
 
-.c10 {
+.c11 {
   font-size: 0.875rem;
 }
 
-.c5 {
+.c6 {
   margin-left: 0.5rem;
 }
 
@@ -994,7 +1036,7 @@ exports[`render Checkbox with description object 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="brjSIf"
+      class="c5"
       fill="currentColor"
       height="24"
       stroke="currentColor"
@@ -1012,22 +1054,22 @@ exports[`render Checkbox with description object 1`] = `
     </svg>
   </label>
   <div
-    class="c5"
+    class="c6"
   >
     <label
-      class="c6 c7"
+      class="c7 c8"
       for=":r6:"
       id=":r7:"
     >
       Unchecked
     </label>
     <p
-      class="c8"
+      class="c9"
     >
       description
        
       <a
-        class="c9 c10"
+        class="c10 c11"
         href="bar"
         target="foo"
       >
@@ -1039,7 +1081,13 @@ exports[`render Checkbox with description object 1`] = `
 `;
 
 exports[`render Checkbox with description string 1`] = `
-.c6 {
+.c5 {
+  vertical-align: middle;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.c7 {
   color: #313440;
   margin: 0 0 1rem;
   font-size: 1rem;
@@ -1047,11 +1095,11 @@ exports[`render Checkbox with description string 1`] = `
   line-height: 1.5rem;
 }
 
-.c6:last-child {
+.c7:last-child {
   margin-bottom: 0;
 }
 
-.c8 {
+.c9 {
   color: #313440;
   margin: 0 0 1rem;
   color: #5E637A;
@@ -1061,15 +1109,15 @@ exports[`render Checkbox with description string 1`] = `
   margin: 0 0 0.75rem;
 }
 
-.c8:last-child {
+.c9:last-child {
   margin-bottom: 0;
 }
 
-.c7 {
+.c8 {
   cursor: pointer;
 }
 
-.c5 {
+.c6 {
   margin-left: 0.5rem;
 }
 
@@ -1161,7 +1209,7 @@ exports[`render Checkbox with description string 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="brjSIf"
+      class="c5"
       fill="currentColor"
       height="24"
       stroke="currentColor"
@@ -1179,17 +1227,17 @@ exports[`render Checkbox with description string 1`] = `
     </svg>
   </label>
   <div
-    class="c5"
+    class="c6"
   >
     <label
-      class="c6 c7"
+      class="c7 c8"
       for=":rc:"
       id=":rd:"
     >
       Unchecked
     </label>
     <p
-      class="c8"
+      class="c9"
     >
       description text
     </p>
diff --git a/packages/big-design/src/components/Chip/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Chip/__snapshots__/spec.tsx.snap
index 30b1a65cb..79c27004d 100644
--- a/packages/big-design/src/components/Chip/__snapshots__/spec.tsx.snap
+++ b/packages/big-design/src/components/Chip/__snapshots__/spec.tsx.snap
@@ -1,6 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders with close button if onRemove is present 1`] = `
+.c6 {
+  vertical-align: middle;
+  height: 1rem;
+  width: 1rem;
+}
+
 .c2 {
   color: #313440;
   margin: 0 0 1rem;
@@ -172,7 +178,7 @@ exports[`renders with close button if onRemove is present 1`] = `
     >
       <svg
         aria-labelledby=":r0:"
-        class="dezehb"
+        class="c6"
         fill="currentColor"
         height="24"
         stroke="currentColor"
diff --git a/packages/big-design/src/components/InlineMessage/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/InlineMessage/__snapshots__/spec.tsx.snap
index c64ae45c9..29cc55abc 100644
--- a/packages/big-design/src/components/InlineMessage/__snapshots__/spec.tsx.snap
+++ b/packages/big-design/src/components/InlineMessage/__snapshots__/spec.tsx.snap
@@ -1,6 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`render default (success) InlineMessage 1`] = `
+.c5 {
+  vertical-align: middle;
+  color: #2AAB3F;
+  height: 1.25rem;
+  width: 1.25rem;
+}
+
 .c0 {
   box-sizing: border-box;
   background-color: #FFFFFF;
@@ -19,11 +26,11 @@ exports[`render default (success) InlineMessage 1`] = `
   grid-area: icon;
 }
 
-.c5 {
+.c6 {
   grid-area: messages;
 }
 
-.c6 {
+.c7 {
   color: #313440;
   margin: 0 0 1rem;
   color: #5E637A;
@@ -33,7 +40,7 @@ exports[`render default (success) InlineMessage 1`] = `
   margin: 0 0 0.75rem;
 }
 
-.c6:last-child {
+.c7:last-child {
   margin-bottom: 0;
 }
 
@@ -48,7 +55,7 @@ exports[`render default (success) InlineMessage 1`] = `
   border-left: 0.25rem solid #2AAB3F;
 }
 
-.c7 {
+.c8 {
   color: #313440;
   vertical-align: middle;
 }
@@ -63,7 +70,7 @@ exports[`render default (success) InlineMessage 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="bcKKRB"
+      class="c5"
       color="success"
       fill="currentColor"
       height="24"
@@ -82,13 +89,13 @@ exports[`render default (success) InlineMessage 1`] = `
     </svg>
   </div>
   <div
-    class="c3 c5"
+    class="c3 c6"
   >
     <div
       class="c3"
     >
       <span
-        class="c6 c7"
+        class="c7 c8"
       >
         Success
       </span>
@@ -99,6 +106,13 @@ exports[`render default (success) InlineMessage 1`] = `
 `;
 
 exports[`render error InlineMessage 1`] = `
+.c5 {
+  vertical-align: middle;
+  color: #DB3643;
+  height: 1.25rem;
+  width: 1.25rem;
+}
+
 .c0 {
   box-sizing: border-box;
   background-color: #FFFFFF;
@@ -117,11 +131,11 @@ exports[`render error InlineMessage 1`] = `
   grid-area: icon;
 }
 
-.c5 {
+.c6 {
   grid-area: messages;
 }
 
-.c6 {
+.c7 {
   color: #313440;
   margin: 0 0 1rem;
   color: #5E637A;
@@ -131,7 +145,7 @@ exports[`render error InlineMessage 1`] = `
   margin: 0 0 0.75rem;
 }
 
-.c6:last-child {
+.c7:last-child {
   margin-bottom: 0;
 }
 
@@ -146,7 +160,7 @@ exports[`render error InlineMessage 1`] = `
   border-left: 0.25rem solid #DB3643;
 }
 
-.c7 {
+.c8 {
   color: #313440;
   vertical-align: middle;
 }
@@ -161,7 +175,7 @@ exports[`render error InlineMessage 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="fBONQE"
+      class="c5"
       color="danger"
       fill="currentColor"
       height="24"
@@ -176,13 +190,13 @@ exports[`render error InlineMessage 1`] = `
     </svg>
   </div>
   <div
-    class="c3 c5"
+    class="c3 c6"
   >
     <div
       class="c3"
     >
       <span
-        class="c6 c7"
+        class="c7 c8"
       >
         Error
       </span>
@@ -193,6 +207,13 @@ exports[`render error InlineMessage 1`] = `
 `;
 
 exports[`render info InlineMessage 1`] = `
+.c5 {
+  vertical-align: middle;
+  color: #0B38D9;
+  height: 1.25rem;
+  width: 1.25rem;
+}
+
 .c0 {
   box-sizing: border-box;
   background-color: #FFFFFF;
@@ -211,11 +232,11 @@ exports[`render info InlineMessage 1`] = `
   grid-area: icon;
 }
 
-.c5 {
+.c6 {
   grid-area: messages;
 }
 
-.c6 {
+.c7 {
   color: #313440;
   margin: 0 0 1rem;
   color: #5E637A;
@@ -225,7 +246,7 @@ exports[`render info InlineMessage 1`] = `
   margin: 0 0 0.75rem;
 }
 
-.c6:last-child {
+.c7:last-child {
   margin-bottom: 0;
 }
 
@@ -240,7 +261,7 @@ exports[`render info InlineMessage 1`] = `
   border-left: 0.25rem solid #0B38D9;
 }
 
-.c7 {
+.c8 {
   color: #313440;
   vertical-align: middle;
 }
@@ -255,7 +276,7 @@ exports[`render info InlineMessage 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="fssZKw"
+      class="c5"
       color="primary60"
       fill="currentColor"
       height="24"
@@ -274,13 +295,13 @@ exports[`render info InlineMessage 1`] = `
     </svg>
   </div>
   <div
-    class="c3 c5"
+    class="c3 c6"
   >
     <div
       class="c3"
     >
       <span
-        class="c6 c7"
+        class="c7 c8"
       >
         Info
       </span>
@@ -291,6 +312,13 @@ exports[`render info InlineMessage 1`] = `
 `;
 
 exports[`render warning InlineMessage 1`] = `
+.c5 {
+  vertical-align: middle;
+  color: #FFAE00;
+  height: 1.25rem;
+  width: 1.25rem;
+}
+
 .c0 {
   box-sizing: border-box;
   background-color: #FFFFFF;
@@ -309,11 +337,11 @@ exports[`render warning InlineMessage 1`] = `
   grid-area: icon;
 }
 
-.c5 {
+.c6 {
   grid-area: messages;
 }
 
-.c6 {
+.c7 {
   color: #313440;
   margin: 0 0 1rem;
   color: #5E637A;
@@ -323,7 +351,7 @@ exports[`render warning InlineMessage 1`] = `
   margin: 0 0 0.75rem;
 }
 
-.c6:last-child {
+.c7:last-child {
   margin-bottom: 0;
 }
 
@@ -338,7 +366,7 @@ exports[`render warning InlineMessage 1`] = `
   border-left: 0.25rem solid #FFAE00;
 }
 
-.c7 {
+.c8 {
   color: #313440;
   vertical-align: middle;
 }
@@ -353,7 +381,7 @@ exports[`render warning InlineMessage 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="jeyRzs"
+      class="c5"
       color="warning50"
       fill="currentColor"
       height="24"
@@ -368,13 +396,13 @@ exports[`render warning InlineMessage 1`] = `
     </svg>
   </div>
   <div
-    class="c3 c5"
+    class="c3 c6"
   >
     <div
       class="c3"
     >
       <span
-        class="c6 c7"
+        class="c7 c8"
       >
         Warning
       </span>
@@ -385,6 +413,13 @@ exports[`render warning InlineMessage 1`] = `
 `;
 
 exports[`renders actions 1`] = `
+.c5 {
+  vertical-align: middle;
+  color: #2AAB3F;
+  height: 1.25rem;
+  width: 1.25rem;
+}
+
 .c0 {
   box-sizing: border-box;
   background-color: #FFFFFF;
@@ -394,12 +429,12 @@ exports[`renders actions 1`] = `
   box-sizing: border-box;
 }
 
-.c8 {
+.c9 {
   margin-top: 0.5rem;
   box-sizing: border-box;
 }
 
-.c9 {
+.c10 {
   -webkit-align-content: stretch;
   -ms-flex-line-pack: stretch;
   align-content: stretch;
@@ -423,7 +458,7 @@ exports[`renders actions 1`] = `
   display: flex;
 }
 
-.c11 {
+.c12 {
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
   -webkit-transition-property: background-color,border-color,box-shadow,color;
@@ -472,42 +507,42 @@ exports[`renders actions 1`] = `
   color: #3C64F4;
 }
 
-.c11.c11 {
+.c12.c12 {
   margin-bottom: 0.5rem;
   margin-left: 0.25rem;
   margin-right: 0.25rem;
 }
 
-.c11:focus {
+.c12:focus {
   outline: none;
 }
 
-.c11[disabled] {
+.c12[disabled] {
   border-color: #D9DCE9;
   pointer-events: none;
 }
 
-.c11 + .bd-button {
+.c12 + .bd-button {
   margin-left: 0.5rem;
 }
 
-.c11:active {
+.c12:active {
   background-color: #DBE3FE;
 }
 
-.c11:focus {
+.c12:focus {
   box-shadow: 0 0 0 0.25rem #DBE3FE;
 }
 
-.c11:hover:not(:active) {
+.c12:hover:not(:active) {
   background-color: #F0F3FF;
 }
 
-.c11[disabled] {
+.c12[disabled] {
   color: #D9DCE9;
 }
 
-.c12 {
+.c13 {
   -webkit-align-content: center;
   -ms-flex-line-pack: center;
   align-content: center;
@@ -529,11 +564,11 @@ exports[`renders actions 1`] = `
   grid-area: icon;
 }
 
-.c5 {
+.c6 {
   grid-area: messages;
 }
 
-.c6 {
+.c7 {
   color: #313440;
   margin: 0 0 1rem;
   color: #5E637A;
@@ -543,7 +578,7 @@ exports[`renders actions 1`] = `
   margin: 0 0 0.75rem;
 }
 
-.c6:last-child {
+.c7:last-child {
   margin-bottom: 0;
 }
 
@@ -558,26 +593,26 @@ exports[`renders actions 1`] = `
   border-left: 0.25rem solid #2AAB3F;
 }
 
-.c7 {
+.c8 {
   color: #313440;
   vertical-align: middle;
 }
 
-.c10 {
+.c11 {
   margin-bottom: -0.5rem;
   margin-left: -0.25rem;
   margin-right: -0.25rem;
 }
 
 @media (min-width:720px) {
-  .c11 + .bd-button {
+  .c12 + .bd-button {
     margin-top: 0;
     margin-left: 0.5rem;
   }
 }
 
 @media (min-width:720px) {
-  .c11 {
+  .c12 {
     width: auto;
   }
 }
@@ -592,7 +627,7 @@ exports[`renders actions 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="bcKKRB"
+      class="c5"
       color="success"
       fill="currentColor"
       height="24"
@@ -611,35 +646,35 @@ exports[`renders actions 1`] = `
     </svg>
   </div>
   <div
-    class="c3 c5"
+    class="c3 c6"
   >
     <div
       class="c3"
     >
       <span
-        class="c6 c7"
+        class="c7 c8"
       >
         Success
       </span>
        
     </div>
     <div
-      class="c8 c9 c10"
+      class="c9 c10 c11"
     >
       <button
-        class="c11 bd-button"
+        class="c12 bd-button"
       >
         <span
-          class="c12"
+          class="c13"
         >
           First Action
         </span>
       </button>
       <button
-        class="c11 bd-button"
+        class="c12 bd-button"
       >
         <span
-          class="c12"
+          class="c13"
         >
           Second Action
         </span>
@@ -650,6 +685,19 @@ exports[`renders actions 1`] = `
 `;
 
 exports[`renders close button 1`] = `
+.c5 {
+  vertical-align: middle;
+  color: #2AAB3F;
+  height: 1.25rem;
+  width: 1.25rem;
+}
+
+.c12 {
+  vertical-align: middle;
+  height: 1rem;
+  width: 1rem;
+}
+
 .c0 {
   box-sizing: border-box;
   background-color: #FFFFFF;
@@ -659,7 +707,7 @@ exports[`renders close button 1`] = `
   box-sizing: border-box;
 }
 
-.c8 {
+.c9 {
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
   -webkit-transition-property: background-color,border-color,box-shadow,color;
@@ -708,36 +756,36 @@ exports[`renders close button 1`] = `
   font-weight: 600;
 }
 
-.c8:focus {
+.c9:focus {
   outline: none;
 }
 
-.c8[disabled] {
+.c9[disabled] {
   border-color: #D9DCE9;
   pointer-events: none;
 }
 
-.c8 + .bd-button {
+.c9 + .bd-button {
   margin-top: 0.5rem;
 }
 
-.c8:active {
+.c9:active {
   background-color: #0B38D9;
 }
 
-.c8:focus {
+.c9:focus {
   box-shadow: 0 0 0 0.25rem #DBE3FE;
 }
 
-.c8:hover:not(:active) {
+.c9:hover:not(:active) {
   background-color: #2852EB;
 }
 
-.c8[disabled] {
+.c9[disabled] {
   background-color: #D9DCE9;
 }
 
-.c10 {
+.c11 {
   -webkit-align-content: center;
   -ms-flex-line-pack: center;
   align-content: center;
@@ -750,7 +798,7 @@ exports[`renders close button 1`] = `
   grid-gap: 0.5rem;
 }
 
-.c9 {
+.c10 {
   background-color: transparent;
   border: none;
   color: #313440;
@@ -759,19 +807,19 @@ exports[`renders close button 1`] = `
   padding: 0;
 }
 
-.c9:active {
+.c10:active {
   background-color: #DBE3FE;
 }
 
-.c9:focus {
+.c10:focus {
   box-shadow: 0 0 0 0.25rem #DBE3FE;
 }
 
-.c9:hover:not(:active) {
+.c10:hover:not(:active) {
   background-color: #F0F3FF;
 }
 
-.c9[disabled] {
+.c10[disabled] {
   color: #D9DCE9;
 }
 
@@ -784,11 +832,11 @@ exports[`renders close button 1`] = `
   grid-area: icon;
 }
 
-.c5 {
+.c6 {
   grid-area: messages;
 }
 
-.c6 {
+.c7 {
   color: #313440;
   margin: 0 0 1rem;
   color: #5E637A;
@@ -798,7 +846,7 @@ exports[`renders close button 1`] = `
   margin: 0 0 0.75rem;
 }
 
-.c6:last-child {
+.c7:last-child {
   margin-bottom: 0;
 }
 
@@ -813,20 +861,20 @@ exports[`renders close button 1`] = `
   border-left: 0.25rem solid #2AAB3F;
 }
 
-.c7 {
+.c8 {
   color: #313440;
   vertical-align: middle;
 }
 
 @media (min-width:720px) {
-  .c8 + .bd-button {
+  .c9 + .bd-button {
     margin-top: 0;
     margin-left: 0.5rem;
   }
 }
 
 @media (min-width:720px) {
-  .c8 {
+  .c9 {
     width: auto;
     padding: 0;
     min-width: 2.25rem;
@@ -843,7 +891,7 @@ exports[`renders close button 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="bcKKRB"
+      class="c5"
       color="success"
       fill="currentColor"
       height="24"
@@ -862,13 +910,13 @@ exports[`renders close button 1`] = `
     </svg>
   </div>
   <div
-    class="c3 c5"
+    class="c3 c6"
   >
     <div
       class="c3"
     >
       <span
-        class="c6 c7"
+        class="c7 c8"
       >
         Success
       </span>
@@ -879,14 +927,14 @@ exports[`renders close button 1`] = `
     class="c3 "
   >
     <button
-      class="c8 c9"
+      class="c9 c10"
     >
       <span
-        class="c10"
+        class="c11"
       >
         <svg
           aria-labelledby=":ra:"
-          class="dezehb"
+          class="c12"
           fill="currentColor"
           height="24"
           stroke="currentColor"
@@ -914,6 +962,13 @@ exports[`renders close button 1`] = `
 `;
 
 exports[`renders header 1`] = `
+.c5 {
+  vertical-align: middle;
+  color: #2AAB3F;
+  height: 1.25rem;
+  width: 1.25rem;
+}
+
 .c0 {
   box-sizing: border-box;
   background-color: #FFFFFF;
@@ -932,11 +987,11 @@ exports[`renders header 1`] = `
   grid-area: icon;
 }
 
-.c5 {
+.c6 {
   grid-area: messages;
 }
 
-.c6 {
+.c7 {
   color: #313440;
   margin: 0 0 1rem;
   font-size: 1rem;
@@ -945,7 +1000,7 @@ exports[`renders header 1`] = `
   margin: 0 0 0.5rem;
 }
 
-.c8 {
+.c9 {
   color: #313440;
   margin: 0 0 1rem;
   color: #5E637A;
@@ -955,7 +1010,7 @@ exports[`renders header 1`] = `
   margin: 0 0 0.75rem;
 }
 
-.c8:last-child {
+.c9:last-child {
   margin-bottom: 0;
 }
 
@@ -970,13 +1025,13 @@ exports[`renders header 1`] = `
   border-left: 0.25rem solid #2AAB3F;
 }
 
-.c7 {
+.c8 {
   font-size: 0.875rem;
   line-height: 1.25rem;
   margin-bottom: 0;
 }
 
-.c9 {
+.c10 {
   color: #313440;
   vertical-align: middle;
 }
@@ -991,7 +1046,7 @@ exports[`renders header 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="bcKKRB"
+      class="c5"
       color="success"
       fill="currentColor"
       height="24"
@@ -1010,10 +1065,10 @@ exports[`renders header 1`] = `
     </svg>
   </div>
   <div
-    class="c3 c5"
+    class="c3 c6"
   >
     <h4
-      class="c6 c7"
+      class="c7 c8"
     >
       Header
     </h4>
@@ -1021,7 +1076,7 @@ exports[`renders header 1`] = `
       class="c3"
     >
       <span
-        class="c8 c9"
+        class="c9 c10"
       >
         Success
       </span>
@@ -1032,6 +1087,19 @@ exports[`renders header 1`] = `
 `;
 
 exports[`renders with external link 1`] = `
+.c5 {
+  vertical-align: middle;
+  color: #2AAB3F;
+  height: 1.25rem;
+  width: 1.25rem;
+}
+
+.c11 {
+  vertical-align: middle;
+  height: 1rem;
+  width: 1rem;
+}
+
 .c0 {
   box-sizing: border-box;
   background-color: #FFFFFF;
@@ -1050,11 +1118,11 @@ exports[`renders with external link 1`] = `
   grid-area: icon;
 }
 
-.c5 {
+.c6 {
   grid-area: messages;
 }
 
-.c8 {
+.c9 {
   -webkit-transition: all 70ms ease-out;
   transition: all 70ms ease-out;
   -webkit-transition-property: color;
@@ -1075,22 +1143,22 @@ exports[`renders with external link 1`] = `
   align-items: center;
 }
 
-.c8:active {
+.c9:active {
   color: #0024A6;
 }
 
-.c8:hover:not(:active) {
+.c9:hover:not(:active) {
   color: #0024A6;
 }
 
-.c8 svg {
+.c9 svg {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
   margin-left: 0.25rem;
 }
 
-.c6 {
+.c7 {
   color: #313440;
   margin: 0 0 1rem;
   color: #5E637A;
@@ -1100,7 +1168,7 @@ exports[`renders with external link 1`] = `
   margin: 0 0 0.75rem;
 }
 
-.c6:last-child {
+.c7:last-child {
   margin-bottom: 0;
 }
 
@@ -1115,12 +1183,12 @@ exports[`renders with external link 1`] = `
   border-left: 0.25rem solid #2AAB3F;
 }
 
-.c7 {
+.c8 {
   color: #313440;
   vertical-align: middle;
 }
 
-.c9 {
+.c10 {
   font-size: 0.875rem;
   vertical-align: middle;
 }
@@ -1135,7 +1203,7 @@ exports[`renders with external link 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="bcKKRB"
+      class="c5"
       color="success"
       fill="currentColor"
       height="24"
@@ -1154,19 +1222,19 @@ exports[`renders with external link 1`] = `
     </svg>
   </div>
   <div
-    class="c3 c5"
+    class="c3 c6"
   >
     <div
       class="c3"
     >
       <span
-        class="c6 c7"
+        class="c7 c8"
       >
         Success
       </span>
        
       <a
-        class="c8 c9"
+        class="c9 c10"
         href="#"
         target="_blank"
       >
@@ -1175,7 +1243,7 @@ exports[`renders with external link 1`] = `
         </span>
         <svg
           aria-hidden="true"
-          class="dezehb"
+          class="c11"
           fill="currentColor"
           height="24"
           stroke="currentColor"
@@ -1198,6 +1266,13 @@ exports[`renders with external link 1`] = `
 `;
 
 exports[`renders with link 1`] = `
+.c5 {
+  vertical-align: middle;
+  color: #2AAB3F;
+  height: 1.25rem;
+  width: 1.25rem;
+}
+
 .c0 {
   box-sizing: border-box;
   background-color: #FFFFFF;
@@ -1216,11 +1291,11 @@ exports[`renders with link 1`] = `
   grid-area: icon;
 }
 
-.c5 {
+.c6 {
   grid-area: messages;
 }
 
-.c8 {
+.c9 {
   -webkit-transition: all 70ms ease-out;
   transition: all 70ms ease-out;
   -webkit-transition-property: color;
@@ -1233,15 +1308,15 @@ exports[`renders with link 1`] = `
   text-decoration: none;
 }
 
-.c8:active {
+.c9:active {
   color: #0024A6;
 }
 
-.c8:hover:not(:active) {
+.c9:hover:not(:active) {
   color: #0024A6;
 }
 
-.c6 {
+.c7 {
   color: #313440;
   margin: 0 0 1rem;
   color: #5E637A;
@@ -1251,7 +1326,7 @@ exports[`renders with link 1`] = `
   margin: 0 0 0.75rem;
 }
 
-.c6:last-child {
+.c7:last-child {
   margin-bottom: 0;
 }
 
@@ -1266,12 +1341,12 @@ exports[`renders with link 1`] = `
   border-left: 0.25rem solid #2AAB3F;
 }
 
-.c7 {
+.c8 {
   color: #313440;
   vertical-align: middle;
 }
 
-.c9 {
+.c10 {
   font-size: 0.875rem;
   vertical-align: middle;
 }
@@ -1286,7 +1361,7 @@ exports[`renders with link 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="bcKKRB"
+      class="c5"
       color="success"
       fill="currentColor"
       height="24"
@@ -1305,19 +1380,19 @@ exports[`renders with link 1`] = `
     </svg>
   </div>
   <div
-    class="c3 c5"
+    class="c3 c6"
   >
     <div
       class="c3"
     >
       <span
-        class="c6 c7"
+        class="c7 c8"
       >
         Success
       </span>
        
       <a
-        class="c8 c9"
+        class="c9 c10"
         href="#"
       >
         Link
diff --git a/packages/big-design/src/components/Input/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Input/__snapshots__/spec.tsx.snap
index ddbbe479c..55bc36782 100644
--- a/packages/big-design/src/components/Input/__snapshots__/spec.tsx.snap
+++ b/packages/big-design/src/components/Input/__snapshots__/spec.tsx.snap
@@ -1,6 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders all together 1`] = `
+.c5 {
+  vertical-align: middle;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c0 {
   color: #313440;
   margin: 0 0 1rem;
@@ -55,7 +61,7 @@ exports[`renders all together 1`] = `
   background-color: #ECEEF5;
 }
 
-.c6 {
+.c7 {
   background-color: inherit;
   border: 0;
   box-sizing: border-box;
@@ -72,36 +78,36 @@ exports[`renders all together 1`] = `
   min-height: 2.125rem;
 }
 
-.c6:focus {
+.c7:focus {
   outline: none;
 }
 
-.c6::-webkit-input-placeholder {
+.c7::-webkit-input-placeholder {
   color: #B4BAD1;
   font-size: 1rem;
 }
 
-.c6::-moz-placeholder {
+.c7::-moz-placeholder {
   color: #B4BAD1;
   font-size: 1rem;
 }
 
-.c6:-ms-input-placeholder {
+.c7:-ms-input-placeholder {
   color: #B4BAD1;
   font-size: 1rem;
 }
 
-.c6::placeholder {
+.c7::placeholder {
   color: #B4BAD1;
   font-size: 1rem;
 }
 
-.c6:-webkit-autofill {
+.c7:-webkit-autofill {
   background-color: #F0F3FF !important;
   -webkit-box-shadow: 0 0 0px 1000px #F0F3FF inset;
 }
 
-.c6[disabled] {
+.c7[disabled] {
   background-color: #ECEEF5;
   color: #5E637A;
 }
@@ -124,7 +130,7 @@ exports[`renders all together 1`] = `
   left: 0;
 }
 
-.c7 {
+.c8 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -142,7 +148,7 @@ exports[`renders all together 1`] = `
   right: 0;
 }
 
-.c5 {
+.c6 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -193,7 +199,7 @@ exports[`renders all together 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="brjSIf"
+        class="c5"
         data-testid="icon-left"
         fill="currentColor"
         height="24"
@@ -212,19 +218,19 @@ exports[`renders all together 1`] = `
       </svg>
     </div>
     <div
-      class="c5"
+      class="c6"
     >
       <input
-        class="c6"
+        class="c7"
         id=":rp:"
       />
     </div>
     <div
-      class="c7"
+      class="c8"
     >
       <svg
         aria-hidden="true"
-        class="brjSIf"
+        class="c5"
         data-testid="icon-right"
         fill="currentColor"
         height="24"
diff --git a/packages/big-design/src/components/Link/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Link/__snapshots__/spec.tsx.snap
index daa6d3eec..f41d4c2c9 100644
--- a/packages/big-design/src/components/Link/__snapshots__/spec.tsx.snap
+++ b/packages/big-design/src/components/Link/__snapshots__/spec.tsx.snap
@@ -31,6 +31,12 @@ exports[`render link 1`] = `
 `;
 
 exports[`renders with external icon 1`] = `
+.c1 {
+  vertical-align: middle;
+  height: 1rem;
+  width: 1rem;
+}
+
 .c0 {
   -webkit-transition: all 70ms ease-out;
   transition: all 70ms ease-out;
@@ -77,7 +83,7 @@ exports[`renders with external icon 1`] = `
   </span>
   <svg
     aria-hidden="true"
-    class="dezehb"
+    class="c1"
     fill="currentColor"
     height="24"
     stroke="currentColor"
diff --git a/packages/big-design/src/components/Message/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Message/__snapshots__/spec.tsx.snap
index b03d0f27e..a7ee9161e 100644
--- a/packages/big-design/src/components/Message/__snapshots__/spec.tsx.snap
+++ b/packages/big-design/src/components/Message/__snapshots__/spec.tsx.snap
@@ -1,6 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`render default (success) Message 1`] = `
+.c5 {
+  vertical-align: middle;
+  color: #2AAB3F;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c0 {
   box-sizing: border-box;
   background-color: #FFFFFF;
@@ -19,11 +26,11 @@ exports[`render default (success) Message 1`] = `
   grid-area: icon;
 }
 
-.c5 {
+.c6 {
   grid-area: messages;
 }
 
-.c6 {
+.c7 {
   color: #313440;
   margin: 0 0 1rem;
   color: #5E637A;
@@ -33,7 +40,7 @@ exports[`render default (success) Message 1`] = `
   margin: 0 0 0.75rem;
 }
 
-.c6:last-child {
+.c7:last-child {
   margin-bottom: 0;
 }
 
@@ -47,7 +54,7 @@ exports[`render default (success) Message 1`] = `
   border-left: 0.25rem solid #2AAB3F;
 }
 
-.c7 {
+.c8 {
   color: #313440;
   vertical-align: middle;
 }
@@ -62,7 +69,7 @@ exports[`render default (success) Message 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="eQftbt"
+      class="c5"
       color="success"
       fill="currentColor"
       height="24"
@@ -81,13 +88,13 @@ exports[`render default (success) Message 1`] = `
     </svg>
   </div>
   <div
-    class="c3 c5"
+    class="c3 c6"
   >
     <div
       class="c3"
     >
       <span
-        class="c6 c7"
+        class="c7 c8"
       >
         Success
       </span>
@@ -98,6 +105,13 @@ exports[`render default (success) Message 1`] = `
 `;
 
 exports[`render error Message 1`] = `
+.c5 {
+  vertical-align: middle;
+  color: #DB3643;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c0 {
   box-sizing: border-box;
   background-color: #FFFFFF;
@@ -116,11 +130,11 @@ exports[`render error Message 1`] = `
   grid-area: icon;
 }
 
-.c5 {
+.c6 {
   grid-area: messages;
 }
 
-.c6 {
+.c7 {
   color: #313440;
   margin: 0 0 1rem;
   color: #5E637A;
@@ -130,7 +144,7 @@ exports[`render error Message 1`] = `
   margin: 0 0 0.75rem;
 }
 
-.c6:last-child {
+.c7:last-child {
   margin-bottom: 0;
 }
 
@@ -144,7 +158,7 @@ exports[`render error Message 1`] = `
   border-left: 0.25rem solid #DB3643;
 }
 
-.c7 {
+.c8 {
   color: #313440;
   vertical-align: middle;
 }
@@ -159,7 +173,7 @@ exports[`render error Message 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="fxNXfI"
+      class="c5"
       color="danger"
       fill="currentColor"
       height="24"
@@ -174,13 +188,13 @@ exports[`render error Message 1`] = `
     </svg>
   </div>
   <div
-    class="c3 c5"
+    class="c3 c6"
   >
     <div
       class="c3"
     >
       <span
-        class="c6 c7"
+        class="c7 c8"
       >
         Error
       </span>
@@ -191,6 +205,13 @@ exports[`render error Message 1`] = `
 `;
 
 exports[`render info Message 1`] = `
+.c5 {
+  vertical-align: middle;
+  color: #0B38D9;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c0 {
   box-sizing: border-box;
   background-color: #FFFFFF;
@@ -209,11 +230,11 @@ exports[`render info Message 1`] = `
   grid-area: icon;
 }
 
-.c5 {
+.c6 {
   grid-area: messages;
 }
 
-.c6 {
+.c7 {
   color: #313440;
   margin: 0 0 1rem;
   color: #5E637A;
@@ -223,7 +244,7 @@ exports[`render info Message 1`] = `
   margin: 0 0 0.75rem;
 }
 
-.c6:last-child {
+.c7:last-child {
   margin-bottom: 0;
 }
 
@@ -237,7 +258,7 @@ exports[`render info Message 1`] = `
   border-left: 0.25rem solid #0B38D9;
 }
 
-.c7 {
+.c8 {
   color: #313440;
   vertical-align: middle;
 }
@@ -252,7 +273,7 @@ exports[`render info Message 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="bTIztk"
+      class="c5"
       color="primary60"
       fill="currentColor"
       height="24"
@@ -271,13 +292,13 @@ exports[`render info Message 1`] = `
     </svg>
   </div>
   <div
-    class="c3 c5"
+    class="c3 c6"
   >
     <div
       class="c3"
     >
       <span
-        class="c6 c7"
+        class="c7 c8"
       >
         Info
       </span>
@@ -288,6 +309,13 @@ exports[`render info Message 1`] = `
 `;
 
 exports[`render warning Message 1`] = `
+.c5 {
+  vertical-align: middle;
+  color: #FFAE00;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c0 {
   box-sizing: border-box;
   background-color: #FFFFFF;
@@ -306,11 +334,11 @@ exports[`render warning Message 1`] = `
   grid-area: icon;
 }
 
-.c5 {
+.c6 {
   grid-area: messages;
 }
 
-.c6 {
+.c7 {
   color: #313440;
   margin: 0 0 1rem;
   color: #5E637A;
@@ -320,7 +348,7 @@ exports[`render warning Message 1`] = `
   margin: 0 0 0.75rem;
 }
 
-.c6:last-child {
+.c7:last-child {
   margin-bottom: 0;
 }
 
@@ -334,7 +362,7 @@ exports[`render warning Message 1`] = `
   border-left: 0.25rem solid #FFAE00;
 }
 
-.c7 {
+.c8 {
   color: #313440;
   vertical-align: middle;
 }
@@ -349,7 +377,7 @@ exports[`render warning Message 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="LZgDY"
+      class="c5"
       color="warning50"
       fill="currentColor"
       height="24"
@@ -364,13 +392,13 @@ exports[`render warning Message 1`] = `
     </svg>
   </div>
   <div
-    class="c3 c5"
+    class="c3 c6"
   >
     <div
       class="c3"
     >
       <span
-        class="c6 c7"
+        class="c7 c8"
       >
         Warning
       </span>
@@ -381,6 +409,13 @@ exports[`render warning Message 1`] = `
 `;
 
 exports[`renders actions 1`] = `
+.c5 {
+  vertical-align: middle;
+  color: #2AAB3F;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c0 {
   box-sizing: border-box;
   background-color: #FFFFFF;
@@ -390,12 +425,12 @@ exports[`renders actions 1`] = `
   box-sizing: border-box;
 }
 
-.c8 {
+.c9 {
   margin-top: 0.5rem;
   box-sizing: border-box;
 }
 
-.c9 {
+.c10 {
   -webkit-align-content: stretch;
   -ms-flex-line-pack: stretch;
   align-content: stretch;
@@ -419,7 +454,7 @@ exports[`renders actions 1`] = `
   display: flex;
 }
 
-.c11 {
+.c12 {
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
   -webkit-transition-property: background-color,border-color,box-shadow,color;
@@ -468,42 +503,42 @@ exports[`renders actions 1`] = `
   color: #3C64F4;
 }
 
-.c11.c11 {
+.c12.c12 {
   margin-bottom: 0.5rem;
   margin-left: 0.25rem;
   margin-right: 0.25rem;
 }
 
-.c11:focus {
+.c12:focus {
   outline: none;
 }
 
-.c11[disabled] {
+.c12[disabled] {
   border-color: #D9DCE9;
   pointer-events: none;
 }
 
-.c11 + .bd-button {
+.c12 + .bd-button {
   margin-left: 0.5rem;
 }
 
-.c11:active {
+.c12:active {
   background-color: #DBE3FE;
 }
 
-.c11:focus {
+.c12:focus {
   box-shadow: 0 0 0 0.25rem #DBE3FE;
 }
 
-.c11:hover:not(:active) {
+.c12:hover:not(:active) {
   background-color: #F0F3FF;
 }
 
-.c11[disabled] {
+.c12[disabled] {
   color: #D9DCE9;
 }
 
-.c12 {
+.c13 {
   -webkit-align-content: center;
   -ms-flex-line-pack: center;
   align-content: center;
@@ -525,11 +560,11 @@ exports[`renders actions 1`] = `
   grid-area: icon;
 }
 
-.c5 {
+.c6 {
   grid-area: messages;
 }
 
-.c6 {
+.c7 {
   color: #313440;
   margin: 0 0 1rem;
   color: #5E637A;
@@ -539,7 +574,7 @@ exports[`renders actions 1`] = `
   margin: 0 0 0.75rem;
 }
 
-.c6:last-child {
+.c7:last-child {
   margin-bottom: 0;
 }
 
@@ -553,26 +588,26 @@ exports[`renders actions 1`] = `
   border-left: 0.25rem solid #2AAB3F;
 }
 
-.c7 {
+.c8 {
   color: #313440;
   vertical-align: middle;
 }
 
-.c10 {
+.c11 {
   margin-bottom: -0.5rem;
   margin-left: -0.25rem;
   margin-right: -0.25rem;
 }
 
 @media (min-width:720px) {
-  .c11 + .bd-button {
+  .c12 + .bd-button {
     margin-top: 0;
     margin-left: 0.5rem;
   }
 }
 
 @media (min-width:720px) {
-  .c11 {
+  .c12 {
     width: auto;
   }
 }
@@ -587,7 +622,7 @@ exports[`renders actions 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="eQftbt"
+      class="c5"
       color="success"
       fill="currentColor"
       height="24"
@@ -606,35 +641,35 @@ exports[`renders actions 1`] = `
     </svg>
   </div>
   <div
-    class="c3 c5"
+    class="c3 c6"
   >
     <div
       class="c3"
     >
       <span
-        class="c6 c7"
+        class="c7 c8"
       >
         Success
       </span>
        
     </div>
     <div
-      class="c8 c9 c10"
+      class="c9 c10 c11"
     >
       <button
-        class="c11 bd-button"
+        class="c12 bd-button"
       >
         <span
-          class="c12"
+          class="c13"
         >
           First Action
         </span>
       </button>
       <button
-        class="c11 bd-button"
+        class="c12 bd-button"
       >
         <span
-          class="c12"
+          class="c13"
         >
           Second Action
         </span>
@@ -645,6 +680,19 @@ exports[`renders actions 1`] = `
 `;
 
 exports[`renders close button 1`] = `
+.c5 {
+  vertical-align: middle;
+  color: #2AAB3F;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.c12 {
+  vertical-align: middle;
+  height: 1.25rem;
+  width: 1.25rem;
+}
+
 .c0 {
   box-sizing: border-box;
   background-color: #FFFFFF;
@@ -654,7 +702,7 @@ exports[`renders close button 1`] = `
   box-sizing: border-box;
 }
 
-.c8 {
+.c9 {
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
   -webkit-transition-property: background-color,border-color,box-shadow,color;
@@ -703,36 +751,36 @@ exports[`renders close button 1`] = `
   font-weight: 600;
 }
 
-.c8:focus {
+.c9:focus {
   outline: none;
 }
 
-.c8[disabled] {
+.c9[disabled] {
   border-color: #D9DCE9;
   pointer-events: none;
 }
 
-.c8 + .bd-button {
+.c9 + .bd-button {
   margin-top: 0.5rem;
 }
 
-.c8:active {
+.c9:active {
   background-color: #0B38D9;
 }
 
-.c8:focus {
+.c9:focus {
   box-shadow: 0 0 0 0.25rem #DBE3FE;
 }
 
-.c8:hover:not(:active) {
+.c9:hover:not(:active) {
   background-color: #2852EB;
 }
 
-.c8[disabled] {
+.c9[disabled] {
   background-color: #D9DCE9;
 }
 
-.c10 {
+.c11 {
   -webkit-align-content: center;
   -ms-flex-line-pack: center;
   align-content: center;
@@ -745,7 +793,7 @@ exports[`renders close button 1`] = `
   grid-gap: 0.5rem;
 }
 
-.c9 {
+.c10 {
   background-color: transparent;
   border: none;
   color: #313440;
@@ -754,19 +802,19 @@ exports[`renders close button 1`] = `
   padding: 0;
 }
 
-.c9:active {
+.c10:active {
   background-color: #DBE3FE;
 }
 
-.c9:focus {
+.c10:focus {
   box-shadow: 0 0 0 0.25rem #DBE3FE;
 }
 
-.c9:hover:not(:active) {
+.c10:hover:not(:active) {
   background-color: #F0F3FF;
 }
 
-.c9[disabled] {
+.c10[disabled] {
   color: #D9DCE9;
 }
 
@@ -779,11 +827,11 @@ exports[`renders close button 1`] = `
   grid-area: icon;
 }
 
-.c5 {
+.c6 {
   grid-area: messages;
 }
 
-.c6 {
+.c7 {
   color: #313440;
   margin: 0 0 1rem;
   color: #5E637A;
@@ -793,7 +841,7 @@ exports[`renders close button 1`] = `
   margin: 0 0 0.75rem;
 }
 
-.c6:last-child {
+.c7:last-child {
   margin-bottom: 0;
 }
 
@@ -807,20 +855,20 @@ exports[`renders close button 1`] = `
   border-left: 0.25rem solid #2AAB3F;
 }
 
-.c7 {
+.c8 {
   color: #313440;
   vertical-align: middle;
 }
 
 @media (min-width:720px) {
-  .c8 + .bd-button {
+  .c9 + .bd-button {
     margin-top: 0;
     margin-left: 0.5rem;
   }
 }
 
 @media (min-width:720px) {
-  .c8 {
+  .c9 {
     width: auto;
     padding: 0;
     min-width: 2.25rem;
@@ -837,7 +885,7 @@ exports[`renders close button 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="eQftbt"
+      class="c5"
       color="success"
       fill="currentColor"
       height="24"
@@ -856,13 +904,13 @@ exports[`renders close button 1`] = `
     </svg>
   </div>
   <div
-    class="c3 c5"
+    class="c3 c6"
   >
     <div
       class="c3"
     >
       <span
-        class="c6 c7"
+        class="c7 c8"
       >
         Success
       </span>
@@ -873,14 +921,14 @@ exports[`renders close button 1`] = `
     class="c3 "
   >
     <button
-      class="c8 c9"
+      class="c9 c10"
     >
       <span
-        class="c10"
+        class="c11"
       >
         <svg
           aria-labelledby=":ra:"
-          class="jqaCLj"
+          class="c12"
           fill="currentColor"
           height="24"
           stroke="currentColor"
@@ -908,6 +956,13 @@ exports[`renders close button 1`] = `
 `;
 
 exports[`renders header 1`] = `
+.c5 {
+  vertical-align: middle;
+  color: #2AAB3F;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c0 {
   box-sizing: border-box;
   background-color: #FFFFFF;
@@ -926,11 +981,11 @@ exports[`renders header 1`] = `
   grid-area: icon;
 }
 
-.c5 {
+.c6 {
   grid-area: messages;
 }
 
-.c6 {
+.c7 {
   color: #313440;
   margin: 0 0 1rem;
   font-size: 1rem;
@@ -939,7 +994,7 @@ exports[`renders header 1`] = `
   margin: 0 0 0.5rem;
 }
 
-.c8 {
+.c9 {
   color: #313440;
   margin: 0 0 1rem;
   color: #5E637A;
@@ -949,7 +1004,7 @@ exports[`renders header 1`] = `
   margin: 0 0 0.75rem;
 }
 
-.c8:last-child {
+.c9:last-child {
   margin-bottom: 0;
 }
 
@@ -963,12 +1018,12 @@ exports[`renders header 1`] = `
   border-left: 0.25rem solid #2AAB3F;
 }
 
-.c7 {
+.c8 {
   line-height: 1.25rem;
   margin-bottom: 0;
 }
 
-.c9 {
+.c10 {
   color: #313440;
   vertical-align: middle;
 }
@@ -983,7 +1038,7 @@ exports[`renders header 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="eQftbt"
+      class="c5"
       color="success"
       fill="currentColor"
       height="24"
@@ -1002,10 +1057,10 @@ exports[`renders header 1`] = `
     </svg>
   </div>
   <div
-    class="c3 c5"
+    class="c3 c6"
   >
     <h4
-      class="c6 c7"
+      class="c7 c8"
     >
       Header
     </h4>
@@ -1013,7 +1068,7 @@ exports[`renders header 1`] = `
       class="c3"
     >
       <span
-        class="c8 c9"
+        class="c9 c10"
       >
         Success
       </span>
@@ -1024,6 +1079,19 @@ exports[`renders header 1`] = `
 `;
 
 exports[`renders with external link 1`] = `
+.c5 {
+  vertical-align: middle;
+  color: #2AAB3F;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.c11 {
+  vertical-align: middle;
+  height: 1rem;
+  width: 1rem;
+}
+
 .c0 {
   box-sizing: border-box;
   background-color: #FFFFFF;
@@ -1042,11 +1110,11 @@ exports[`renders with external link 1`] = `
   grid-area: icon;
 }
 
-.c5 {
+.c6 {
   grid-area: messages;
 }
 
-.c8 {
+.c9 {
   -webkit-transition: all 70ms ease-out;
   transition: all 70ms ease-out;
   -webkit-transition-property: color;
@@ -1067,22 +1135,22 @@ exports[`renders with external link 1`] = `
   align-items: center;
 }
 
-.c8:active {
+.c9:active {
   color: #0024A6;
 }
 
-.c8:hover:not(:active) {
+.c9:hover:not(:active) {
   color: #0024A6;
 }
 
-.c8 svg {
+.c9 svg {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
   margin-left: 0.25rem;
 }
 
-.c6 {
+.c7 {
   color: #313440;
   margin: 0 0 1rem;
   color: #5E637A;
@@ -1092,7 +1160,7 @@ exports[`renders with external link 1`] = `
   margin: 0 0 0.75rem;
 }
 
-.c6:last-child {
+.c7:last-child {
   margin-bottom: 0;
 }
 
@@ -1106,12 +1174,12 @@ exports[`renders with external link 1`] = `
   border-left: 0.25rem solid #2AAB3F;
 }
 
-.c7 {
+.c8 {
   color: #313440;
   vertical-align: middle;
 }
 
-.c9 {
+.c10 {
   font-size: 0.875rem;
   vertical-align: middle;
 }
@@ -1126,7 +1194,7 @@ exports[`renders with external link 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="eQftbt"
+      class="c5"
       color="success"
       fill="currentColor"
       height="24"
@@ -1145,19 +1213,19 @@ exports[`renders with external link 1`] = `
     </svg>
   </div>
   <div
-    class="c3 c5"
+    class="c3 c6"
   >
     <div
       class="c3"
     >
       <span
-        class="c6 c7"
+        class="c7 c8"
       >
         Success
       </span>
        
       <a
-        class="c8 c9"
+        class="c9 c10"
         href="#"
         target="_blank"
       >
@@ -1166,7 +1234,7 @@ exports[`renders with external link 1`] = `
         </span>
         <svg
           aria-hidden="true"
-          class="dezehb"
+          class="c11"
           fill="currentColor"
           height="24"
           stroke="currentColor"
@@ -1189,6 +1257,13 @@ exports[`renders with external link 1`] = `
 `;
 
 exports[`renders with link 1`] = `
+.c5 {
+  vertical-align: middle;
+  color: #2AAB3F;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c0 {
   box-sizing: border-box;
   background-color: #FFFFFF;
@@ -1207,11 +1282,11 @@ exports[`renders with link 1`] = `
   grid-area: icon;
 }
 
-.c5 {
+.c6 {
   grid-area: messages;
 }
 
-.c8 {
+.c9 {
   -webkit-transition: all 70ms ease-out;
   transition: all 70ms ease-out;
   -webkit-transition-property: color;
@@ -1224,15 +1299,15 @@ exports[`renders with link 1`] = `
   text-decoration: none;
 }
 
-.c8:active {
+.c9:active {
   color: #0024A6;
 }
 
-.c8:hover:not(:active) {
+.c9:hover:not(:active) {
   color: #0024A6;
 }
 
-.c6 {
+.c7 {
   color: #313440;
   margin: 0 0 1rem;
   color: #5E637A;
@@ -1242,7 +1317,7 @@ exports[`renders with link 1`] = `
   margin: 0 0 0.75rem;
 }
 
-.c6:last-child {
+.c7:last-child {
   margin-bottom: 0;
 }
 
@@ -1256,12 +1331,12 @@ exports[`renders with link 1`] = `
   border-left: 0.25rem solid #2AAB3F;
 }
 
-.c7 {
+.c8 {
   color: #313440;
   vertical-align: middle;
 }
 
-.c9 {
+.c10 {
   font-size: 0.875rem;
   vertical-align: middle;
 }
@@ -1276,7 +1351,7 @@ exports[`renders with link 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="eQftbt"
+      class="c5"
       color="success"
       fill="currentColor"
       height="24"
@@ -1295,19 +1370,19 @@ exports[`renders with link 1`] = `
     </svg>
   </div>
   <div
-    class="c3 c5"
+    class="c3 c6"
   >
     <div
       class="c3"
     >
       <span
-        class="c6 c7"
+        class="c7 c8"
       >
         Success
       </span>
        
       <a
-        class="c8 c9"
+        class="c9 c10"
         href="#"
       >
         Link
diff --git a/packages/big-design/src/components/Modal/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Modal/__snapshots__/spec.tsx.snap
index 533801746..d6ccec4eb 100644
--- a/packages/big-design/src/components/Modal/__snapshots__/spec.tsx.snap
+++ b/packages/big-design/src/components/Modal/__snapshots__/spec.tsx.snap
@@ -10,6 +10,12 @@ exports[`render closed modal 1`] = `
 `;
 
 exports[`render open modal 1`] = `
+.c8 {
+  vertical-align: middle;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c1 {
   box-sizing: border-box;
 }
@@ -191,7 +197,7 @@ exports[`render open modal 1`] = `
   right: 0.25rem;
 }
 
-.c8 {
+.c9 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -238,7 +244,7 @@ exports[`render open modal 1`] = `
 }
 
 @media (min-width:720px) {
-  .c8 {
+  .c9 {
     padding: 0 1.5rem;
   }
 }
@@ -269,7 +275,7 @@ exports[`render open modal 1`] = `
             >
               <svg
                 aria-labelledby=":r1:"
-                class="brjSIf"
+                class="c8"
                 fill="currentColor"
                 height="24"
                 stroke="currentColor"
@@ -294,7 +300,7 @@ exports[`render open modal 1`] = `
           </button>
         </div>
         <div
-          class="c8"
+          class="c9"
         >
           This is a modal
         </div>
@@ -305,6 +311,12 @@ exports[`render open modal 1`] = `
 `;
 
 exports[`render open modal without backdrop 1`] = `
+.c8 {
+  vertical-align: middle;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c1 {
   box-sizing: border-box;
 }
@@ -485,7 +497,7 @@ exports[`render open modal without backdrop 1`] = `
   right: 0.25rem;
 }
 
-.c8 {
+.c9 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -532,7 +544,7 @@ exports[`render open modal without backdrop 1`] = `
 }
 
 @media (min-width:720px) {
-  .c8 {
+  .c9 {
     padding: 0 1.5rem;
   }
 }
@@ -563,7 +575,7 @@ exports[`render open modal without backdrop 1`] = `
             >
               <svg
                 aria-labelledby=":r3:"
-                class="brjSIf"
+                class="c8"
                 fill="currentColor"
                 height="24"
                 stroke="currentColor"
@@ -588,7 +600,7 @@ exports[`render open modal without backdrop 1`] = `
           </button>
         </div>
         <div
-          class="c8"
+          class="c9"
         >
           This is a modal
         </div>
diff --git a/packages/big-design/src/components/Pagination/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Pagination/__snapshots__/spec.tsx.snap
index 1da868bfd..4a73ec6ac 100644
--- a/packages/big-design/src/components/Pagination/__snapshots__/spec.tsx.snap
+++ b/packages/big-design/src/components/Pagination/__snapshots__/spec.tsx.snap
@@ -1,11 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`render pagination component 1`] = `
+.c7 {
+  vertical-align: middle;
+  height: 2rem;
+  width: 2rem;
+}
+
+.c12 {
+  vertical-align: middle;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c0 {
   box-sizing: border-box;
 }
 
-.c7 {
+.c8 {
   box-sizing: border-box;
   z-index: 1060;
 }
@@ -133,7 +145,7 @@ exports[`render pagination component 1`] = `
   color: #D9DCE9;
 }
 
-.c10 {
+.c11 {
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
   -webkit-transition-property: background-color,border-color,box-shadow,color;
@@ -182,32 +194,32 @@ exports[`render pagination component 1`] = `
   color: #3C64F4;
 }
 
-.c10:focus {
+.c11:focus {
   outline: none;
 }
 
-.c10[disabled] {
+.c11[disabled] {
   border-color: #D9DCE9;
   pointer-events: none;
 }
 
-.c10 + .bd-button {
+.c11 + .bd-button {
   margin-top: 0.5rem;
 }
 
-.c10:active {
+.c11:active {
   background-color: #DBE3FE;
 }
 
-.c10:focus {
+.c11:focus {
   box-shadow: 0 0 0 0.25rem #DBE3FE;
 }
 
-.c10:hover:not(:active) {
+.c11:hover:not(:active) {
   background-color: #F0F3FF;
 }
 
-.c10[disabled] {
+.c11[disabled] {
   border-color: transparent;
   color: #D9DCE9;
 }
@@ -225,7 +237,7 @@ exports[`render pagination component 1`] = `
   grid-gap: 0.5rem;
 }
 
-.c8 {
+.c9 {
   border-radius: 0.25rem;
   box-shadow: 0px 1px 6px rgba(49,52,64,0.2);
   height: 100%;
@@ -233,7 +245,7 @@ exports[`render pagination component 1`] = `
   overflow: hidden;
 }
 
-.c9 {
+.c10 {
   border-radius: 0.25rem;
   box-shadow: 0px 1px 6px rgba(49,52,64,0.2);
   background-color: #FFFFFF;
@@ -269,14 +281,14 @@ exports[`render pagination component 1`] = `
 }
 
 @media (min-width:720px) {
-  .c10 + .bd-button {
+  .c11 + .bd-button {
     margin-top: 0;
     margin-left: 0.5rem;
   }
 }
 
 @media (min-width:720px) {
-  .c10 {
+  .c11 {
     width: auto;
     padding: 0;
     min-width: 2.25rem;
@@ -311,7 +323,7 @@ exports[`render pagination component 1`] = `
           1 - 3 of 10
           <svg
             aria-hidden="true"
-            class="hNTNsv"
+            class="c7"
             fill="currentColor"
             height="24"
             stroke="currentColor"
@@ -330,15 +342,15 @@ exports[`render pagination component 1`] = `
         </span>
       </button>
       <div
-        class="c7"
+        class="c8"
         style="position: fixed; left: 0px; top: 0px; transform: translate(0px, 4px);"
       >
         <div
-          class="c8"
+          class="c9"
         >
           <ul
             aria-labelledby=":r0:-label"
-            class="c9"
+            class="c10"
             id=":r0:-menu"
             role="menu"
           />
@@ -350,7 +362,7 @@ exports[`render pagination component 1`] = `
     class="c0 c2"
   >
     <button
-      class="c10 c5"
+      class="c11 c5"
       disabled=""
       type="button"
     >
@@ -359,7 +371,7 @@ exports[`render pagination component 1`] = `
       >
         <svg
           aria-labelledby=":r3:"
-          class="brjSIf"
+          class="c12"
           fill="currentColor"
           height="24"
           stroke="currentColor"
@@ -383,7 +395,7 @@ exports[`render pagination component 1`] = `
       </span>
     </button>
     <button
-      class="c10 c5"
+      class="c11 c5"
       type="button"
     >
       <span
@@ -391,7 +403,7 @@ exports[`render pagination component 1`] = `
       >
         <svg
           aria-labelledby=":r4:"
-          class="brjSIf"
+          class="c12"
           fill="currentColor"
           height="24"
           stroke="currentColor"
@@ -419,11 +431,23 @@ exports[`render pagination component 1`] = `
 `;
 
 exports[`render pagination component with invalid page info 1`] = `
+.c7 {
+  vertical-align: middle;
+  height: 2rem;
+  width: 2rem;
+}
+
+.c12 {
+  vertical-align: middle;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c0 {
   box-sizing: border-box;
 }
 
-.c7 {
+.c8 {
   box-sizing: border-box;
   z-index: 1060;
 }
@@ -551,7 +575,7 @@ exports[`render pagination component with invalid page info 1`] = `
   color: #D9DCE9;
 }
 
-.c10 {
+.c11 {
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
   -webkit-transition-property: background-color,border-color,box-shadow,color;
@@ -600,32 +624,32 @@ exports[`render pagination component with invalid page info 1`] = `
   color: #3C64F4;
 }
 
-.c10:focus {
+.c11:focus {
   outline: none;
 }
 
-.c10[disabled] {
+.c11[disabled] {
   border-color: #D9DCE9;
   pointer-events: none;
 }
 
-.c10 + .bd-button {
+.c11 + .bd-button {
   margin-top: 0.5rem;
 }
 
-.c10:active {
+.c11:active {
   background-color: #DBE3FE;
 }
 
-.c10:focus {
+.c11:focus {
   box-shadow: 0 0 0 0.25rem #DBE3FE;
 }
 
-.c10:hover:not(:active) {
+.c11:hover:not(:active) {
   background-color: #F0F3FF;
 }
 
-.c10[disabled] {
+.c11[disabled] {
   border-color: transparent;
   color: #D9DCE9;
 }
@@ -643,7 +667,7 @@ exports[`render pagination component with invalid page info 1`] = `
   grid-gap: 0.5rem;
 }
 
-.c8 {
+.c9 {
   border-radius: 0.25rem;
   box-shadow: 0px 1px 6px rgba(49,52,64,0.2);
   height: 100%;
@@ -651,7 +675,7 @@ exports[`render pagination component with invalid page info 1`] = `
   overflow: hidden;
 }
 
-.c9 {
+.c10 {
   border-radius: 0.25rem;
   box-shadow: 0px 1px 6px rgba(49,52,64,0.2);
   background-color: #FFFFFF;
@@ -687,14 +711,14 @@ exports[`render pagination component with invalid page info 1`] = `
 }
 
 @media (min-width:720px) {
-  .c10 + .bd-button {
+  .c11 + .bd-button {
     margin-top: 0;
     margin-left: 0.5rem;
   }
 }
 
 @media (min-width:720px) {
-  .c10 {
+  .c11 {
     width: auto;
     padding: 0;
     min-width: 2.25rem;
@@ -729,7 +753,7 @@ exports[`render pagination component with invalid page info 1`] = `
           -8 - -6 of 10
           <svg
             aria-hidden="true"
-            class="hNTNsv"
+            class="c7"
             fill="currentColor"
             height="24"
             stroke="currentColor"
@@ -748,15 +772,15 @@ exports[`render pagination component with invalid page info 1`] = `
         </span>
       </button>
       <div
-        class="c7"
+        class="c8"
         style="position: fixed; left: 0px; top: 0px; transform: translate(0px, 4px);"
       >
         <div
-          class="c8"
+          class="c9"
         >
           <ul
             aria-labelledby=":r5:-label"
-            class="c9"
+            class="c10"
             id=":r5:-menu"
             role="menu"
           />
@@ -768,7 +792,7 @@ exports[`render pagination component with invalid page info 1`] = `
     class="c0 c2"
   >
     <button
-      class="c10 c5"
+      class="c11 c5"
       disabled=""
       type="button"
     >
@@ -777,7 +801,7 @@ exports[`render pagination component with invalid page info 1`] = `
       >
         <svg
           aria-labelledby=":r8:"
-          class="brjSIf"
+          class="c12"
           fill="currentColor"
           height="24"
           stroke="currentColor"
@@ -801,7 +825,7 @@ exports[`render pagination component with invalid page info 1`] = `
       </span>
     </button>
     <button
-      class="c10 c5"
+      class="c11 c5"
       type="button"
     >
       <span
@@ -809,7 +833,7 @@ exports[`render pagination component with invalid page info 1`] = `
       >
         <svg
           aria-labelledby=":r9:"
-          class="brjSIf"
+          class="c12"
           fill="currentColor"
           height="24"
           stroke="currentColor"
@@ -837,11 +861,23 @@ exports[`render pagination component with invalid page info 1`] = `
 `;
 
 exports[`render pagination component with invalid range info 1`] = `
+.c7 {
+  vertical-align: middle;
+  height: 2rem;
+  width: 2rem;
+}
+
+.c12 {
+  vertical-align: middle;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c0 {
   box-sizing: border-box;
 }
 
-.c7 {
+.c8 {
   box-sizing: border-box;
   z-index: 1060;
 }
@@ -969,7 +1005,7 @@ exports[`render pagination component with invalid range info 1`] = `
   color: #D9DCE9;
 }
 
-.c10 {
+.c11 {
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
   -webkit-transition-property: background-color,border-color,box-shadow,color;
@@ -1018,32 +1054,32 @@ exports[`render pagination component with invalid range info 1`] = `
   color: #3C64F4;
 }
 
-.c10:focus {
+.c11:focus {
   outline: none;
 }
 
-.c10[disabled] {
+.c11[disabled] {
   border-color: #D9DCE9;
   pointer-events: none;
 }
 
-.c10 + .bd-button {
+.c11 + .bd-button {
   margin-top: 0.5rem;
 }
 
-.c10:active {
+.c11:active {
   background-color: #DBE3FE;
 }
 
-.c10:focus {
+.c11:focus {
   box-shadow: 0 0 0 0.25rem #DBE3FE;
 }
 
-.c10:hover:not(:active) {
+.c11:hover:not(:active) {
   background-color: #F0F3FF;
 }
 
-.c10[disabled] {
+.c11[disabled] {
   border-color: transparent;
   color: #D9DCE9;
 }
@@ -1061,7 +1097,7 @@ exports[`render pagination component with invalid range info 1`] = `
   grid-gap: 0.5rem;
 }
 
-.c8 {
+.c9 {
   border-radius: 0.25rem;
   box-shadow: 0px 1px 6px rgba(49,52,64,0.2);
   height: 100%;
@@ -1069,7 +1105,7 @@ exports[`render pagination component with invalid range info 1`] = `
   overflow: hidden;
 }
 
-.c9 {
+.c10 {
   border-radius: 0.25rem;
   box-shadow: 0px 1px 6px rgba(49,52,64,0.2);
   background-color: #FFFFFF;
@@ -1105,14 +1141,14 @@ exports[`render pagination component with invalid range info 1`] = `
 }
 
 @media (min-width:720px) {
-  .c10 + .bd-button {
+  .c11 + .bd-button {
     margin-top: 0;
     margin-left: 0.5rem;
   }
 }
 
 @media (min-width:720px) {
-  .c10 {
+  .c11 {
     width: auto;
     padding: 0;
     min-width: 2.25rem;
@@ -1147,7 +1183,7 @@ exports[`render pagination component with invalid range info 1`] = `
           1 - -5 of 10
           <svg
             aria-hidden="true"
-            class="hNTNsv"
+            class="c7"
             fill="currentColor"
             height="24"
             stroke="currentColor"
@@ -1166,15 +1202,15 @@ exports[`render pagination component with invalid range info 1`] = `
         </span>
       </button>
       <div
-        class="c7"
+        class="c8"
         style="position: fixed; left: 0px; top: 0px; transform: translate(0px, 4px);"
       >
         <div
-          class="c8"
+          class="c9"
         >
           <ul
             aria-labelledby=":ra:-label"
-            class="c9"
+            class="c10"
             id=":ra:-menu"
             role="menu"
           />
@@ -1186,7 +1222,7 @@ exports[`render pagination component with invalid range info 1`] = `
     class="c0 c2"
   >
     <button
-      class="c10 c5"
+      class="c11 c5"
       disabled=""
       type="button"
     >
@@ -1195,7 +1231,7 @@ exports[`render pagination component with invalid range info 1`] = `
       >
         <svg
           aria-labelledby=":rd:"
-          class="brjSIf"
+          class="c12"
           fill="currentColor"
           height="24"
           stroke="currentColor"
@@ -1219,7 +1255,7 @@ exports[`render pagination component with invalid range info 1`] = `
       </span>
     </button>
     <button
-      class="c10 c5"
+      class="c11 c5"
       disabled=""
       type="button"
     >
@@ -1228,7 +1264,7 @@ exports[`render pagination component with invalid range info 1`] = `
       >
         <svg
           aria-labelledby=":re:"
-          class="brjSIf"
+          class="c12"
           fill="currentColor"
           height="24"
           stroke="currentColor"
@@ -1256,11 +1292,23 @@ exports[`render pagination component with invalid range info 1`] = `
 `;
 
 exports[`render pagination component with no items 1`] = `
+.c7 {
+  vertical-align: middle;
+  height: 2rem;
+  width: 2rem;
+}
+
+.c12 {
+  vertical-align: middle;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c0 {
   box-sizing: border-box;
 }
 
-.c7 {
+.c8 {
   box-sizing: border-box;
   z-index: 1060;
 }
@@ -1388,7 +1436,7 @@ exports[`render pagination component with no items 1`] = `
   color: #D9DCE9;
 }
 
-.c10 {
+.c11 {
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
   -webkit-transition-property: background-color,border-color,box-shadow,color;
@@ -1437,32 +1485,32 @@ exports[`render pagination component with no items 1`] = `
   color: #3C64F4;
 }
 
-.c10:focus {
+.c11:focus {
   outline: none;
 }
 
-.c10[disabled] {
+.c11[disabled] {
   border-color: #D9DCE9;
   pointer-events: none;
 }
 
-.c10 + .bd-button {
+.c11 + .bd-button {
   margin-top: 0.5rem;
 }
 
-.c10:active {
+.c11:active {
   background-color: #DBE3FE;
 }
 
-.c10:focus {
+.c11:focus {
   box-shadow: 0 0 0 0.25rem #DBE3FE;
 }
 
-.c10:hover:not(:active) {
+.c11:hover:not(:active) {
   background-color: #F0F3FF;
 }
 
-.c10[disabled] {
+.c11[disabled] {
   border-color: transparent;
   color: #D9DCE9;
 }
@@ -1480,7 +1528,7 @@ exports[`render pagination component with no items 1`] = `
   grid-gap: 0.5rem;
 }
 
-.c8 {
+.c9 {
   border-radius: 0.25rem;
   box-shadow: 0px 1px 6px rgba(49,52,64,0.2);
   height: 100%;
@@ -1488,7 +1536,7 @@ exports[`render pagination component with no items 1`] = `
   overflow: hidden;
 }
 
-.c9 {
+.c10 {
   border-radius: 0.25rem;
   box-shadow: 0px 1px 6px rgba(49,52,64,0.2);
   background-color: #FFFFFF;
@@ -1524,14 +1572,14 @@ exports[`render pagination component with no items 1`] = `
 }
 
 @media (min-width:720px) {
-  .c10 + .bd-button {
+  .c11 + .bd-button {
     margin-top: 0;
     margin-left: 0.5rem;
   }
 }
 
 @media (min-width:720px) {
-  .c10 {
+  .c11 {
     width: auto;
     padding: 0;
     min-width: 2.25rem;
@@ -1566,7 +1614,7 @@ exports[`render pagination component with no items 1`] = `
           0 of 0
           <svg
             aria-hidden="true"
-            class="hNTNsv"
+            class="c7"
             fill="currentColor"
             height="24"
             stroke="currentColor"
@@ -1585,15 +1633,15 @@ exports[`render pagination component with no items 1`] = `
         </span>
       </button>
       <div
-        class="c7"
+        class="c8"
         style="position: fixed; left: 0px; top: 0px; transform: translate(0px, 4px);"
       >
         <div
-          class="c8"
+          class="c9"
         >
           <ul
             aria-labelledby=":rf:-label"
-            class="c9"
+            class="c10"
             id=":rf:-menu"
             role="menu"
           />
@@ -1605,7 +1653,7 @@ exports[`render pagination component with no items 1`] = `
     class="c0 c2"
   >
     <button
-      class="c10 c5"
+      class="c11 c5"
       disabled=""
       type="button"
     >
@@ -1614,7 +1662,7 @@ exports[`render pagination component with no items 1`] = `
       >
         <svg
           aria-labelledby=":ri:"
-          class="brjSIf"
+          class="c12"
           fill="currentColor"
           height="24"
           stroke="currentColor"
@@ -1638,7 +1686,7 @@ exports[`render pagination component with no items 1`] = `
       </span>
     </button>
     <button
-      class="c10 c5"
+      class="c11 c5"
       disabled=""
       type="button"
     >
@@ -1647,7 +1695,7 @@ exports[`render pagination component with no items 1`] = `
       >
         <svg
           aria-labelledby=":rj:"
-          class="brjSIf"
+          class="c12"
           fill="currentColor"
           height="24"
           stroke="currentColor"
diff --git a/packages/big-design/src/components/PillTabs/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/PillTabs/__snapshots__/spec.tsx.snap
index 93dba9b6e..d6248b377 100644
--- a/packages/big-design/src/components/PillTabs/__snapshots__/spec.tsx.snap
+++ b/packages/big-design/src/components/PillTabs/__snapshots__/spec.tsx.snap
@@ -1,11 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`dropdown is not visible if items fit 1`] = `
+.c8 {
+  vertical-align: middle;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c0 {
   box-sizing: border-box;
 }
 
-.c8 {
+.c9 {
   box-sizing: border-box;
   z-index: 1060;
 }
@@ -228,7 +234,7 @@ exports[`dropdown is not visible if items fit 1`] = `
   grid-gap: 0.5rem;
 }
 
-.c9 {
+.c10 {
   border-radius: 0.25rem;
   box-shadow: 0px 1px 6px rgba(49,52,64,0.2);
   height: 100%;
@@ -236,7 +242,7 @@ exports[`dropdown is not visible if items fit 1`] = `
   overflow: hidden;
 }
 
-.c10 {
+.c11 {
   border-radius: 0.25rem;
   box-shadow: 0px 1px 6px rgba(49,52,64,0.2);
   background-color: #FFFFFF;
@@ -330,7 +336,7 @@ exports[`dropdown is not visible if items fit 1`] = `
         >
           <svg
             aria-labelledby=":r5:"
-            class="brjSIf"
+            class="c8"
             fill="currentColor"
             height="24"
             stroke="currentColor"
@@ -354,15 +360,15 @@ exports[`dropdown is not visible if items fit 1`] = `
         </span>
       </button>
       <div
-        class="c8"
+        class="c9"
         style="position: absolute; left: 0px; top: 0px;"
       >
         <div
-          class="c9"
+          class="c10"
         >
           <ul
             aria-labelledby=":r3:-label"
-            class="c10"
+            class="c11"
             id=":r3:-menu"
             role="menu"
           />
@@ -374,11 +380,17 @@ exports[`dropdown is not visible if items fit 1`] = `
 `;
 
 exports[`it renders the given tabs 1`] = `
+.c8 {
+  vertical-align: middle;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c0 {
   box-sizing: border-box;
 }
 
-.c8 {
+.c9 {
   box-sizing: border-box;
   z-index: 1060;
 }
@@ -601,7 +613,7 @@ exports[`it renders the given tabs 1`] = `
   grid-gap: 0.5rem;
 }
 
-.c9 {
+.c10 {
   border-radius: 0.25rem;
   box-shadow: 0px 1px 6px rgba(49,52,64,0.2);
   height: 100%;
@@ -609,7 +621,7 @@ exports[`it renders the given tabs 1`] = `
   overflow: hidden;
 }
 
-.c10 {
+.c11 {
   border-radius: 0.25rem;
   box-shadow: 0px 1px 6px rgba(49,52,64,0.2);
   background-color: #FFFFFF;
@@ -703,7 +715,7 @@ exports[`it renders the given tabs 1`] = `
         >
           <svg
             aria-labelledby=":r2:"
-            class="brjSIf"
+            class="c8"
             fill="currentColor"
             height="24"
             stroke="currentColor"
@@ -727,15 +739,15 @@ exports[`it renders the given tabs 1`] = `
         </span>
       </button>
       <div
-        class="c8"
+        class="c9"
         style="position: absolute; left: 0px; top: 0px;"
       >
         <div
-          class="c9"
+          class="c10"
         >
           <ul
             aria-labelledby=":r0:-label"
-            class="c10"
+            class="c11"
             id=":r0:-menu"
             role="menu"
           />
@@ -747,11 +759,17 @@ exports[`it renders the given tabs 1`] = `
 `;
 
 exports[`only the pills that fit are visible 1`] = `
+.c8 {
+  vertical-align: middle;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c0 {
   box-sizing: border-box;
 }
 
-.c8 {
+.c9 {
   box-sizing: border-box;
   z-index: 1060;
 }
@@ -974,7 +992,7 @@ exports[`only the pills that fit are visible 1`] = `
   grid-gap: 0.5rem;
 }
 
-.c9 {
+.c10 {
   border-radius: 0.25rem;
   box-shadow: 0px 1px 6px rgba(49,52,64,0.2);
   height: 100%;
@@ -982,7 +1000,7 @@ exports[`only the pills that fit are visible 1`] = `
   overflow: hidden;
 }
 
-.c10 {
+.c11 {
   border-radius: 0.25rem;
   box-shadow: 0px 1px 6px rgba(49,52,64,0.2);
   background-color: #FFFFFF;
@@ -1108,7 +1126,7 @@ exports[`only the pills that fit are visible 1`] = `
         >
           <svg
             aria-labelledby=":re:"
-            class="brjSIf"
+            class="c8"
             fill="currentColor"
             height="24"
             stroke="currentColor"
@@ -1132,15 +1150,15 @@ exports[`only the pills that fit are visible 1`] = `
         </span>
       </button>
       <div
-        class="c8"
+        class="c9"
         style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 4px);"
       >
         <div
-          class="c9"
+          class="c10"
         >
           <ul
             aria-labelledby=":rc:-label"
-            class="c10"
+            class="c11"
             id=":rc:-menu"
             role="menu"
           />
@@ -1152,11 +1170,17 @@ exports[`only the pills that fit are visible 1`] = `
 `;
 
 exports[`only the pills that fit are visible 2 1`] = `
+.c8 {
+  vertical-align: middle;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c0 {
   box-sizing: border-box;
 }
 
-.c8 {
+.c9 {
   box-sizing: border-box;
   z-index: 1060;
 }
@@ -1379,7 +1403,7 @@ exports[`only the pills that fit are visible 2 1`] = `
   grid-gap: 0.5rem;
 }
 
-.c9 {
+.c10 {
   border-radius: 0.25rem;
   box-shadow: 0px 1px 6px rgba(49,52,64,0.2);
   height: 100%;
@@ -1387,7 +1411,7 @@ exports[`only the pills that fit are visible 2 1`] = `
   overflow: hidden;
 }
 
-.c10 {
+.c11 {
   border-radius: 0.25rem;
   box-shadow: 0px 1px 6px rgba(49,52,64,0.2);
   background-color: #FFFFFF;
@@ -1512,7 +1536,7 @@ exports[`only the pills that fit are visible 2 1`] = `
         >
           <svg
             aria-labelledby=":rh:"
-            class="brjSIf"
+            class="c8"
             fill="currentColor"
             height="24"
             stroke="currentColor"
@@ -1536,15 +1560,15 @@ exports[`only the pills that fit are visible 2 1`] = `
         </span>
       </button>
       <div
-        class="c8"
+        class="c9"
         style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 4px);"
       >
         <div
-          class="c9"
+          class="c10"
         >
           <ul
             aria-labelledby=":rf:-label"
-            class="c10"
+            class="c11"
             id=":rf:-menu"
             role="menu"
           />
@@ -1556,11 +1580,17 @@ exports[`only the pills that fit are visible 2 1`] = `
 `;
 
 exports[`renders all the filters if they fit 1`] = `
+.c8 {
+  vertical-align: middle;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c0 {
   box-sizing: border-box;
 }
 
-.c8 {
+.c9 {
   box-sizing: border-box;
   z-index: 1060;
 }
@@ -1783,7 +1813,7 @@ exports[`renders all the filters if they fit 1`] = `
   grid-gap: 0.5rem;
 }
 
-.c9 {
+.c10 {
   border-radius: 0.25rem;
   box-shadow: 0px 1px 6px rgba(49,52,64,0.2);
   height: 100%;
@@ -1791,7 +1821,7 @@ exports[`renders all the filters if they fit 1`] = `
   overflow: hidden;
 }
 
-.c10 {
+.c11 {
   border-radius: 0.25rem;
   box-shadow: 0px 1px 6px rgba(49,52,64,0.2);
   background-color: #FFFFFF;
@@ -1915,7 +1945,7 @@ exports[`renders all the filters if they fit 1`] = `
         >
           <svg
             aria-labelledby=":rb:"
-            class="brjSIf"
+            class="c8"
             fill="currentColor"
             height="24"
             stroke="currentColor"
@@ -1939,15 +1969,15 @@ exports[`renders all the filters if they fit 1`] = `
         </span>
       </button>
       <div
-        class="c8"
+        class="c9"
         style="position: absolute; left: 0px; top: 0px;"
       >
         <div
-          class="c9"
+          class="c10"
         >
           <ul
             aria-labelledby=":r9:-label"
-            class="c10"
+            class="c11"
             id=":r9:-menu"
             role="menu"
           />
@@ -1959,11 +1989,17 @@ exports[`renders all the filters if they fit 1`] = `
 `;
 
 exports[`renders dropdown if items do not fit 1`] = `
+.c8 {
+  vertical-align: middle;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c0 {
   box-sizing: border-box;
 }
 
-.c8 {
+.c9 {
   box-sizing: border-box;
   z-index: 1060;
 }
@@ -2186,7 +2222,7 @@ exports[`renders dropdown if items do not fit 1`] = `
   grid-gap: 0.5rem;
 }
 
-.c9 {
+.c10 {
   border-radius: 0.25rem;
   box-shadow: 0px 1px 6px rgba(49,52,64,0.2);
   height: 100%;
@@ -2194,7 +2230,7 @@ exports[`renders dropdown if items do not fit 1`] = `
   overflow: hidden;
 }
 
-.c10 {
+.c11 {
   border-radius: 0.25rem;
   box-shadow: 0px 1px 6px rgba(49,52,64,0.2);
   background-color: #FFFFFF;
@@ -2305,7 +2341,7 @@ exports[`renders dropdown if items do not fit 1`] = `
         >
           <svg
             aria-labelledby=":r8:"
-            class="brjSIf"
+            class="c8"
             fill="currentColor"
             height="24"
             stroke="currentColor"
@@ -2329,15 +2365,15 @@ exports[`renders dropdown if items do not fit 1`] = `
         </span>
       </button>
       <div
-        class="c8"
+        class="c9"
         style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 4px);"
       >
         <div
-          class="c9"
+          class="c10"
         >
           <ul
             aria-labelledby=":r6:-label"
-            class="c10"
+            class="c11"
             id=":r6:-menu"
             role="menu"
           />
diff --git a/packages/big-design/src/components/ProgressCircle/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/ProgressCircle/__snapshots__/spec.tsx.snap
index c4bda532c..fa60b2954 100644
--- a/packages/big-design/src/components/ProgressCircle/__snapshots__/spec.tsx.snap
+++ b/packages/big-design/src/components/ProgressCircle/__snapshots__/spec.tsx.snap
@@ -1,13 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`render completed determinant progress circle 1`] = `
+.c0 {
+  vertical-align: middle;
+  color: #2AAB3F;
+  height: 3rem;
+  width: 3rem;
+}
+
 <div>
   <svg
     aria-hidden="true"
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="100"
-    class="epKZXt"
+    class="c0"
     color="success"
     fill="currentColor"
     height="24"
@@ -95,6 +102,13 @@ exports[`render determinant progress circle 1`] = `
 `;
 
 exports[`render error determinant progress circle 1`] = `
+.c0 {
+  vertical-align: middle;
+  color: #DB3643;
+  height: 3rem;
+  width: 3rem;
+}
+
 <div>
   <svg
     aria-hidden="true"
@@ -102,7 +116,7 @@ exports[`render error determinant progress circle 1`] = `
     aria-valuemin="0"
     aria-valuenow="0"
     aria-valuetext="Error"
-    class="iuILBQ"
+    class="c0"
     color="danger"
     fill="currentColor"
     height="24"
diff --git a/packages/big-design/src/components/Stepper/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Stepper/__snapshots__/spec.tsx.snap
index aa59f725b..38475ccfe 100644
--- a/packages/big-design/src/components/Stepper/__snapshots__/spec.tsx.snap
+++ b/packages/big-design/src/components/Stepper/__snapshots__/spec.tsx.snap
@@ -16,27 +16,27 @@ exports[`renders Stepper 1`] = `
   background-color: #3C64F4;
 }
 
-.c8 {
+.c9 {
   box-sizing: border-box;
   background-color: #3C64F4;
 }
 
-.c12 {
+.c13 {
   margin-bottom: 1.5rem;
   box-sizing: border-box;
 }
 
-.c15 {
+.c16 {
   box-sizing: border-box;
   background-color: #D9DCE9;
 }
 
-.c16 {
+.c17 {
   box-sizing: border-box;
   background-color: #8C93AD;
 }
 
-.c17 {
+.c18 {
   box-sizing: border-box;
   background-color: #D9DCE9;
 }
@@ -89,17 +89,24 @@ exports[`renders Stepper 1`] = `
   display: flex;
 }
 
+.c8 {
+  vertical-align: middle;
+  color: #FFFFFF;
+  height: 1.25rem;
+  width: 1.25rem;
+}
+
 .c3 {
   gap: 1rem;
   display: grid;
 }
 
-.c13 {
+.c14 {
   gap: 1rem;
   display: grid;
 }
 
-.c10 {
+.c11 {
   color: #313440;
   margin: 0 0 1rem;
   font-size: 1rem;
@@ -107,11 +114,11 @@ exports[`renders Stepper 1`] = `
   line-height: 1.5rem;
 }
 
-.c10:last-child {
+.c11:last-child {
   margin-bottom: 0;
 }
 
-.c18 {
+.c19 {
   color: #8C93AD;
   margin: 0 0 1rem;
   font-size: 1rem;
@@ -119,7 +126,7 @@ exports[`renders Stepper 1`] = `
   line-height: 1.5rem;
 }
 
-.c18:last-child {
+.c19:last-child {
   margin-bottom: 0;
 }
 
@@ -142,7 +149,7 @@ exports[`renders Stepper 1`] = `
   user-select: none;
 }
 
-.c9 {
+.c10 {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -151,7 +158,7 @@ exports[`renders Stepper 1`] = `
   width: 100%;
 }
 
-.c11 {
+.c12 {
   grid-area: text;
 }
 
@@ -202,83 +209,83 @@ exports[`renders Stepper 1`] = `
 }
 
 @media (min-width:0px) {
-  .c8 {
+  .c9 {
     display: none;
   }
 }
 
 @media (min-width:720px) {
-  .c8 {
+  .c9 {
     display: block;
   }
 }
 
 @media (min-width:0px) {
-  .c12 {
+  .c13 {
     display: grid;
   }
 }
 
 @media (min-width:720px) {
-  .c12 {
+  .c13 {
     display: grid;
   }
 }
 
 @media (min-width:720px) {
-  .c12 {
+  .c13 {
     margin-right: 0.5rem;
   }
 }
 
 @media (min-width:0px) {
-  .c15 {
+  .c16 {
     display: none;
   }
 }
 
 @media (min-width:720px) {
-  .c15 {
+  .c16 {
     display: block;
   }
 }
 
 @media (min-width:0px) {
-  .c16 {
+  .c17 {
     padding-top: 0.25rem;
     padding-bottom: 0.25rem;
   }
 }
 
 @media (min-width:720px) {
-  .c16 {
+  .c17 {
     padding-top: 0;
     padding-bottom: 0;
   }
 }
 
 @media (min-width:0px) {
-  .c16 {
+  .c17 {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
 }
 
 @media (min-width:720px) {
-  .c16 {
+  .c17 {
     padding-left: 0;
     padding-right: 0;
   }
 }
 
 @media (min-width:0px) {
-  .c17 {
+  .c18 {
     display: none;
   }
 }
 
 @media (min-width:720px) {
-  .c17 {
+  .c18 {
     display: none;
   }
 }
@@ -296,13 +303,13 @@ exports[`renders Stepper 1`] = `
 }
 
 @media (min-width:0px) {
-  .c13 {
+  .c14 {
     display: grid;
   }
 }
 
 @media (min-width:720px) {
-  .c13 {
+  .c14 {
     display: grid;
   }
 }
@@ -317,7 +324,7 @@ exports[`renders Stepper 1`] = `
 }
 
 @media (min-width:720px) {
-  .c14 {
+  .c15 {
     border: 0;
     -webkit-clip: rect(0 0 0 0);
     clip: rect(0 0 0 0);
@@ -356,7 +363,7 @@ exports[`renders Stepper 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="kBlamc"
+        class="c8"
         color="white"
         fill="currentColor"
         height="24"
@@ -375,18 +382,18 @@ exports[`renders Stepper 1`] = `
       </svg>
     </div>
     <div
-      class="c8 c9"
+      class="c9 c10"
       display="[object Object]"
     />
     <p
-      class="c10 c11"
+      class="c11 c12"
       color="secondary70"
     >
       Login
     </p>
   </div>
   <div
-    class="c12 c13 c4"
+    class="c13 c14 c4"
     display="[object Object]"
   >
     <div
@@ -394,13 +401,13 @@ exports[`renders Stepper 1`] = `
     >
       <span>
         <span
-          class="c14"
+          class="c15"
         >
           Step
         </span>
          2 
         <span
-          class="c14"
+          class="c15"
         >
           of 
           3
@@ -408,11 +415,11 @@ exports[`renders Stepper 1`] = `
       </span>
     </div>
     <div
-      class="c15 c9"
+      class="c16 c10"
       display="[object Object]"
     />
     <p
-      class="c10 c11"
+      class="c11 c12"
       color="secondary70"
     >
       Settings
@@ -423,17 +430,17 @@ exports[`renders Stepper 1`] = `
     display="[object Object]"
   >
     <div
-      class="c16 c6 c7"
+      class="c17 c6 c7"
     >
       <span>
         <span
-          class="c14"
+          class="c15"
         >
           Step
         </span>
          3 
         <span
-          class="c14"
+          class="c15"
         >
           of 
           3
@@ -441,11 +448,11 @@ exports[`renders Stepper 1`] = `
       </span>
     </div>
     <div
-      class="c17 c9"
+      class="c18 c10"
       display="[object Object]"
     />
     <p
-      class="c18 c11"
+      class="c19 c12"
       color="secondary50"
     >
       Import
diff --git a/packages/big-design/src/components/Table/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Table/__snapshots__/spec.tsx.snap
index 474113067..8fb7695ec 100644
--- a/packages/big-design/src/components/Table/__snapshots__/spec.tsx.snap
+++ b/packages/big-design/src/components/Table/__snapshots__/spec.tsx.snap
@@ -1,11 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders a pagination component 1`] = `
+.c10 {
+  vertical-align: middle;
+  height: 2rem;
+  width: 2rem;
+}
+
+.c15 {
+  vertical-align: middle;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c1 {
   box-sizing: border-box;
 }
 
-.c10 {
+.c11 {
   box-sizing: border-box;
   z-index: 1060;
 }
@@ -152,7 +164,7 @@ exports[`renders a pagination component 1`] = `
   color: #D9DCE9;
 }
 
-.c13 {
+.c14 {
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
   -webkit-transition-property: background-color,border-color,box-shadow,color;
@@ -201,32 +213,32 @@ exports[`renders a pagination component 1`] = `
   color: #3C64F4;
 }
 
-.c13:focus {
+.c14:focus {
   outline: none;
 }
 
-.c13[disabled] {
+.c14[disabled] {
   border-color: #D9DCE9;
   pointer-events: none;
 }
 
-.c13 + .bd-button {
+.c14 + .bd-button {
   margin-top: 0.5rem;
 }
 
-.c13:active {
+.c14:active {
   background-color: #DBE3FE;
 }
 
-.c13:focus {
+.c14:focus {
   box-shadow: 0 0 0 0.25rem #DBE3FE;
 }
 
-.c13:hover:not(:active) {
+.c14:hover:not(:active) {
   background-color: #F0F3FF;
 }
 
-.c13[disabled] {
+.c14[disabled] {
   border-color: transparent;
   color: #D9DCE9;
 }
@@ -244,7 +256,7 @@ exports[`renders a pagination component 1`] = `
   grid-gap: 0.5rem;
 }
 
-.c11 {
+.c12 {
   border-radius: 0.25rem;
   box-shadow: 0px 1px 6px rgba(49,52,64,0.2);
   height: 100%;
@@ -252,7 +264,7 @@ exports[`renders a pagination component 1`] = `
   overflow: hidden;
 }
 
-.c12 {
+.c13 {
   border-radius: 0.25rem;
   box-shadow: 0px 1px 6px rgba(49,52,64,0.2);
   background-color: #FFFFFF;
@@ -312,14 +324,14 @@ exports[`renders a pagination component 1`] = `
 }
 
 @media (min-width:720px) {
-  .c13 + .bd-button {
+  .c14 + .bd-button {
     margin-top: 0;
     margin-left: 0.5rem;
   }
 }
 
 @media (min-width:720px) {
-  .c13 {
+  .c14 {
     width: auto;
     padding: 0;
     min-width: 2.25rem;
@@ -361,7 +373,7 @@ exports[`renders a pagination component 1`] = `
               1 - 3 of 5
               <svg
                 aria-hidden="true"
-                class="hNTNsv"
+                class="c10"
                 fill="currentColor"
                 height="24"
                 stroke="currentColor"
@@ -380,15 +392,15 @@ exports[`renders a pagination component 1`] = `
             </span>
           </button>
           <div
-            class="c10"
+            class="c11"
             style="position: fixed; left: 0px; top: 0px; transform: translate(0px, 4px);"
           >
             <div
-              class="c11"
+              class="c12"
             >
               <ul
                 aria-labelledby=":r13:-label"
-                class="c12"
+                class="c13"
                 id=":r13:-menu"
                 role="menu"
               />
@@ -400,7 +412,7 @@ exports[`renders a pagination component 1`] = `
         class="c1 c5"
       >
         <button
-          class="c13 c8"
+          class="c14 c8"
           disabled=""
           type="button"
         >
@@ -409,7 +421,7 @@ exports[`renders a pagination component 1`] = `
           >
             <svg
               aria-labelledby=":r16:"
-              class="brjSIf"
+              class="c15"
               fill="currentColor"
               height="24"
               stroke="currentColor"
@@ -433,7 +445,7 @@ exports[`renders a pagination component 1`] = `
           </span>
         </button>
         <button
-          class="c13 c8"
+          class="c14 c8"
           type="button"
         >
           <span
@@ -441,7 +453,7 @@ exports[`renders a pagination component 1`] = `
           >
             <svg
               aria-labelledby=":r17:"
-              class="brjSIf"
+              class="c15"
               fill="currentColor"
               height="24"
               stroke="currentColor"
@@ -725,6 +737,12 @@ exports[`renders a table figure 1`] = `
 `;
 
 exports[`selectable renders selectable actions and checkboxes 1`] = `
+.c10 {
+  vertical-align: middle;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c1 {
   margin-right: 0.25rem;
   box-sizing: border-box;
@@ -734,7 +752,7 @@ exports[`selectable renders selectable actions and checkboxes 1`] = `
   box-sizing: border-box;
 }
 
-.c14 {
+.c15 {
   margin-right: 1rem;
   box-sizing: border-box;
 }
@@ -782,7 +800,7 @@ exports[`selectable renders selectable actions and checkboxes 1`] = `
   flex-shrink: 0;
 }
 
-.c11 {
+.c12 {
   color: #313440;
   margin: 0 0 1rem;
   font-size: 1rem;
@@ -790,11 +808,11 @@ exports[`selectable renders selectable actions and checkboxes 1`] = `
   line-height: 1.5rem;
 }
 
-.c11:last-child {
+.c12:last-child {
   margin-bottom: 0;
 }
 
-.c13 {
+.c14 {
   color: #313440;
   margin: 0 0 1rem;
   font-size: 1rem;
@@ -803,11 +821,11 @@ exports[`selectable renders selectable actions and checkboxes 1`] = `
   margin-left: 0.75rem;
 }
 
-.c13:last-child {
+.c14:last-child {
   margin-bottom: 0;
 }
 
-.c15 {
+.c16 {
   color: #313440;
   margin: 0 0 1rem;
   font-size: 1rem;
@@ -816,11 +834,11 @@ exports[`selectable renders selectable actions and checkboxes 1`] = `
   margin: 0;
 }
 
-.c15:last-child {
+.c16:last-child {
   margin-bottom: 0;
 }
 
-.c12 {
+.c13 {
   cursor: pointer;
   border: 0;
   -webkit-clip: rect(0 0 0 0);
@@ -834,7 +852,7 @@ exports[`selectable renders selectable actions and checkboxes 1`] = `
   width: 1px;
 }
 
-.c10 {
+.c11 {
   margin-left: 0.5rem;
 }
 
@@ -955,7 +973,7 @@ exports[`selectable renders selectable actions and checkboxes 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="brjSIf"
+            class="c10"
             fill="currentColor"
             height="24"
             stroke="currentColor"
@@ -973,10 +991,10 @@ exports[`selectable renders selectable actions and checkboxes 1`] = `
           </svg>
         </label>
         <div
-          class="c10"
+          class="c11"
         >
           <label
-            class="c11 c12"
+            class="c12 c13"
             for=":r1l:"
             hidden=""
             id=":r1m:"
@@ -986,17 +1004,17 @@ exports[`selectable renders selectable actions and checkboxes 1`] = `
         </div>
       </div>
       <p
-        class="c13"
+        class="c14"
       >
         5
       </p>
     </div>
   </div>
   <div
-    class="c14 c2"
+    class="c15 c2"
   >
     <p
-      class="c15"
+      class="c16"
     >
       Product
     </p>
diff --git a/packages/big-design/src/components/TableNext/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/TableNext/__snapshots__/spec.tsx.snap
index aee7f6789..bf48e68fa 100644
--- a/packages/big-design/src/components/TableNext/__snapshots__/spec.tsx.snap
+++ b/packages/big-design/src/components/TableNext/__snapshots__/spec.tsx.snap
@@ -1,11 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`pagination renders a pagination component 1`] = `
+.c10 {
+  vertical-align: middle;
+  height: 2rem;
+  width: 2rem;
+}
+
+.c15 {
+  vertical-align: middle;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c1 {
   box-sizing: border-box;
 }
 
-.c10 {
+.c11 {
   box-sizing: border-box;
   z-index: 1060;
 }
@@ -152,7 +164,7 @@ exports[`pagination renders a pagination component 1`] = `
   color: #D9DCE9;
 }
 
-.c13 {
+.c14 {
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
   -webkit-transition-property: background-color,border-color,box-shadow,color;
@@ -201,32 +213,32 @@ exports[`pagination renders a pagination component 1`] = `
   color: #3C64F4;
 }
 
-.c13:focus {
+.c14:focus {
   outline: none;
 }
 
-.c13[disabled] {
+.c14[disabled] {
   border-color: #D9DCE9;
   pointer-events: none;
 }
 
-.c13 + .bd-button {
+.c14 + .bd-button {
   margin-top: 0.5rem;
 }
 
-.c13:active {
+.c14:active {
   background-color: #DBE3FE;
 }
 
-.c13:focus {
+.c14:focus {
   box-shadow: 0 0 0 0.25rem #DBE3FE;
 }
 
-.c13:hover:not(:active) {
+.c14:hover:not(:active) {
   background-color: #F0F3FF;
 }
 
-.c13[disabled] {
+.c14[disabled] {
   border-color: transparent;
   color: #D9DCE9;
 }
@@ -244,7 +256,7 @@ exports[`pagination renders a pagination component 1`] = `
   grid-gap: 0.5rem;
 }
 
-.c11 {
+.c12 {
   border-radius: 0.25rem;
   box-shadow: 0px 1px 6px rgba(49,52,64,0.2);
   height: 100%;
@@ -252,7 +264,7 @@ exports[`pagination renders a pagination component 1`] = `
   overflow: hidden;
 }
 
-.c12 {
+.c13 {
   border-radius: 0.25rem;
   box-shadow: 0px 1px 6px rgba(49,52,64,0.2);
   background-color: #FFFFFF;
@@ -312,14 +324,14 @@ exports[`pagination renders a pagination component 1`] = `
 }
 
 @media (min-width:720px) {
-  .c13 + .bd-button {
+  .c14 + .bd-button {
     margin-top: 0;
     margin-left: 0.5rem;
   }
 }
 
 @media (min-width:720px) {
-  .c13 {
+  .c14 {
     width: auto;
     padding: 0;
     min-width: 2.25rem;
@@ -361,7 +373,7 @@ exports[`pagination renders a pagination component 1`] = `
               1 - 3 of 5
               <svg
                 aria-hidden="true"
-                class="hNTNsv"
+                class="c10"
                 fill="currentColor"
                 height="24"
                 stroke="currentColor"
@@ -380,15 +392,15 @@ exports[`pagination renders a pagination component 1`] = `
             </span>
           </button>
           <div
-            class="c10"
+            class="c11"
             style="position: fixed; left: 0px; top: 0px; transform: translate(0px, 4px);"
           >
             <div
-              class="c11"
+              class="c12"
             >
               <ul
                 aria-labelledby=":r13:-label"
-                class="c12"
+                class="c13"
                 id=":r13:-menu"
                 role="menu"
               />
@@ -400,7 +412,7 @@ exports[`pagination renders a pagination component 1`] = `
         class="c1 c5"
       >
         <button
-          class="c13 c8"
+          class="c14 c8"
           disabled=""
           type="button"
         >
@@ -409,7 +421,7 @@ exports[`pagination renders a pagination component 1`] = `
           >
             <svg
               aria-labelledby=":r16:"
-              class="brjSIf"
+              class="c15"
               fill="currentColor"
               height="24"
               stroke="currentColor"
@@ -433,7 +445,7 @@ exports[`pagination renders a pagination component 1`] = `
           </span>
         </button>
         <button
-          class="c13 c8"
+          class="c14 c8"
           type="button"
         >
           <span
@@ -441,7 +453,7 @@ exports[`pagination renders a pagination component 1`] = `
           >
             <svg
               aria-labelledby=":r17:"
-              class="brjSIf"
+              class="c15"
               fill="currentColor"
               height="24"
               stroke="currentColor"
@@ -785,6 +797,12 @@ exports[`renders a table figure 1`] = `
 `;
 
 exports[`selectable renders selectable actions and checkboxes 1`] = `
+.c10 {
+  vertical-align: middle;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c1 {
   margin-right: 0.25rem;
   box-sizing: border-box;
@@ -794,7 +812,7 @@ exports[`selectable renders selectable actions and checkboxes 1`] = `
   box-sizing: border-box;
 }
 
-.c14 {
+.c15 {
   margin-right: 1rem;
   box-sizing: border-box;
 }
@@ -842,7 +860,7 @@ exports[`selectable renders selectable actions and checkboxes 1`] = `
   flex-shrink: 0;
 }
 
-.c11 {
+.c12 {
   color: #313440;
   margin: 0 0 1rem;
   font-size: 1rem;
@@ -850,11 +868,11 @@ exports[`selectable renders selectable actions and checkboxes 1`] = `
   line-height: 1.5rem;
 }
 
-.c11:last-child {
+.c12:last-child {
   margin-bottom: 0;
 }
 
-.c13 {
+.c14 {
   color: #313440;
   margin: 0 0 1rem;
   font-size: 1rem;
@@ -863,11 +881,11 @@ exports[`selectable renders selectable actions and checkboxes 1`] = `
   margin-left: 0.75rem;
 }
 
-.c13:last-child {
+.c14:last-child {
   margin-bottom: 0;
 }
 
-.c15 {
+.c16 {
   color: #313440;
   margin: 0 0 1rem;
   font-size: 1rem;
@@ -876,11 +894,11 @@ exports[`selectable renders selectable actions and checkboxes 1`] = `
   margin: 0;
 }
 
-.c15:last-child {
+.c16:last-child {
   margin-bottom: 0;
 }
 
-.c12 {
+.c13 {
   cursor: pointer;
   border: 0;
   -webkit-clip: rect(0 0 0 0);
@@ -894,7 +912,7 @@ exports[`selectable renders selectable actions and checkboxes 1`] = `
   width: 1px;
 }
 
-.c10 {
+.c11 {
   margin-left: 0.5rem;
 }
 
@@ -1015,7 +1033,7 @@ exports[`selectable renders selectable actions and checkboxes 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="brjSIf"
+            class="c10"
             fill="currentColor"
             height="24"
             stroke="currentColor"
@@ -1033,10 +1051,10 @@ exports[`selectable renders selectable actions and checkboxes 1`] = `
           </svg>
         </label>
         <div
-          class="c10"
+          class="c11"
         >
           <label
-            class="c11 c12"
+            class="c12 c13"
             for=":r77:"
             hidden=""
             id=":r78:"
@@ -1046,17 +1064,17 @@ exports[`selectable renders selectable actions and checkboxes 1`] = `
         </div>
       </div>
       <p
-        class="c13"
+        class="c14"
       >
         5
       </p>
     </div>
   </div>
   <div
-    class="c14 c2"
+    class="c15 c2"
   >
     <p
-      class="c15"
+      class="c16"
     >
       Product
     </p>
@@ -1065,6 +1083,12 @@ exports[`selectable renders selectable actions and checkboxes 1`] = `
 `;
 
 exports[`selectable selectable by default (isChildrenRowsSelectable prop is not used or is set to false) when isChildrenRowsSelectable prop is not used or is set to false, as default renders checkboxes just for parent rows 1`] = `
+.c10 {
+  vertical-align: middle;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c1 {
   margin-right: 0.25rem;
   box-sizing: border-box;
@@ -1074,7 +1098,7 @@ exports[`selectable selectable by default (isChildrenRowsSelectable prop is not
   box-sizing: border-box;
 }
 
-.c14 {
+.c15 {
   margin-right: 1rem;
   box-sizing: border-box;
 }
@@ -1122,7 +1146,7 @@ exports[`selectable selectable by default (isChildrenRowsSelectable prop is not
   flex-shrink: 0;
 }
 
-.c11 {
+.c12 {
   color: #313440;
   margin: 0 0 1rem;
   font-size: 1rem;
@@ -1130,11 +1154,11 @@ exports[`selectable selectable by default (isChildrenRowsSelectable prop is not
   line-height: 1.5rem;
 }
 
-.c11:last-child {
+.c12:last-child {
   margin-bottom: 0;
 }
 
-.c13 {
+.c14 {
   color: #313440;
   margin: 0 0 1rem;
   font-size: 1rem;
@@ -1143,11 +1167,11 @@ exports[`selectable selectable by default (isChildrenRowsSelectable prop is not
   margin-left: 0.75rem;
 }
 
-.c13:last-child {
+.c14:last-child {
   margin-bottom: 0;
 }
 
-.c15 {
+.c16 {
   color: #313440;
   margin: 0 0 1rem;
   font-size: 1rem;
@@ -1156,11 +1180,11 @@ exports[`selectable selectable by default (isChildrenRowsSelectable prop is not
   margin: 0;
 }
 
-.c15:last-child {
+.c16:last-child {
   margin-bottom: 0;
 }
 
-.c12 {
+.c13 {
   cursor: pointer;
   border: 0;
   -webkit-clip: rect(0 0 0 0);
@@ -1174,7 +1198,7 @@ exports[`selectable selectable by default (isChildrenRowsSelectable prop is not
   width: 1px;
 }
 
-.c10 {
+.c11 {
   margin-left: 0.5rem;
 }
 
@@ -1303,7 +1327,7 @@ exports[`selectable selectable by default (isChildrenRowsSelectable prop is not
         >
           <svg
             aria-hidden="true"
-            class="brjSIf"
+            class="c10"
             fill="currentColor"
             height="24"
             stroke="currentColor"
@@ -1321,10 +1345,10 @@ exports[`selectable selectable by default (isChildrenRowsSelectable prop is not
           </svg>
         </label>
         <div
-          class="c10"
+          class="c11"
         >
           <label
-            class="c11 c12"
+            class="c12 c13"
             for=":r7t:"
             hidden=""
             id=":r7u:"
@@ -1334,17 +1358,17 @@ exports[`selectable selectable by default (isChildrenRowsSelectable prop is not
         </div>
       </div>
       <p
-        class="c13"
+        class="c14"
       >
         5
       </p>
     </div>
   </div>
   <div
-    class="c14 c2"
+    class="c15 c2"
   >
     <p
-      class="c15"
+      class="c16"
     >
       Product
     </p>
@@ -1353,6 +1377,12 @@ exports[`selectable selectable by default (isChildrenRowsSelectable prop is not
 `;
 
 exports[`selectable selectable by not default (isChildrenRowsSelectable prop is used and it is set to true renders checkboxes for parent rows and children rows) 1`] = `
+.c10 {
+  vertical-align: middle;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c1 {
   margin-right: 0.25rem;
   box-sizing: border-box;
@@ -1362,7 +1392,7 @@ exports[`selectable selectable by not default (isChildrenRowsSelectable prop is
   box-sizing: border-box;
 }
 
-.c14 {
+.c15 {
   margin-right: 1rem;
   box-sizing: border-box;
 }
@@ -1410,7 +1440,7 @@ exports[`selectable selectable by not default (isChildrenRowsSelectable prop is
   flex-shrink: 0;
 }
 
-.c11 {
+.c12 {
   color: #313440;
   margin: 0 0 1rem;
   font-size: 1rem;
@@ -1418,11 +1448,11 @@ exports[`selectable selectable by not default (isChildrenRowsSelectable prop is
   line-height: 1.5rem;
 }
 
-.c11:last-child {
+.c12:last-child {
   margin-bottom: 0;
 }
 
-.c13 {
+.c14 {
   color: #313440;
   margin: 0 0 1rem;
   font-size: 1rem;
@@ -1431,11 +1461,11 @@ exports[`selectable selectable by not default (isChildrenRowsSelectable prop is
   margin-left: 0.75rem;
 }
 
-.c13:last-child {
+.c14:last-child {
   margin-bottom: 0;
 }
 
-.c15 {
+.c16 {
   color: #313440;
   margin: 0 0 1rem;
   font-size: 1rem;
@@ -1444,11 +1474,11 @@ exports[`selectable selectable by not default (isChildrenRowsSelectable prop is
   margin: 0;
 }
 
-.c15:last-child {
+.c16:last-child {
   margin-bottom: 0;
 }
 
-.c12 {
+.c13 {
   cursor: pointer;
   border: 0;
   -webkit-clip: rect(0 0 0 0);
@@ -1462,7 +1492,7 @@ exports[`selectable selectable by not default (isChildrenRowsSelectable prop is
   width: 1px;
 }
 
-.c10 {
+.c11 {
   margin-left: 0.5rem;
 }
 
@@ -1591,7 +1621,7 @@ exports[`selectable selectable by not default (isChildrenRowsSelectable prop is
         >
           <svg
             aria-hidden="true"
-            class="brjSIf"
+            class="c10"
             fill="currentColor"
             height="24"
             stroke="currentColor"
@@ -1609,10 +1639,10 @@ exports[`selectable selectable by not default (isChildrenRowsSelectable prop is
           </svg>
         </label>
         <div
-          class="c10"
+          class="c11"
         >
           <label
-            class="c11 c12"
+            class="c12 c13"
             for=":rbk:"
             hidden=""
             id=":rbl:"
@@ -1622,17 +1652,17 @@ exports[`selectable selectable by not default (isChildrenRowsSelectable prop is
         </div>
       </div>
       <p
-        class="c13"
+        class="c14"
       >
         5
       </p>
     </div>
   </div>
   <div
-    class="c14 c2"
+    class="c15 c2"
   >
     <p
-      class="c15"
+      class="c16"
     >
       Product
     </p>