diff --git a/.storybook/components/Icons.js b/.storybook/components/Icons.js
index c47e7e6f87..421f50b0c8 100644
--- a/.storybook/components/Icons.js
+++ b/.storybook/components/Icons.js
@@ -73,10 +73,11 @@ const Size = styled.p`
   font-style: italic;
 `;
 
-const iconStyles = color => theme => css`
+const iconStyles = (color, size) => theme => css`
   height: 3rem;
   width: auto;
   max-width: 6rem;
+  padding: ${size === 'small' ? '0.5rem' : '0'};
   color: ${theme.colors[color]};
   background-color: ${color === 'white'
     ? theme.colors.n900
@@ -170,7 +171,11 @@ const Icons = () => {
                 const Icon = iconComponents[componentName];
                 return (
                   <Wrapper key={id}>
-                    <Icon id={id} size={icon.size} css={iconStyles(color)} />
+                    <Icon
+                      id={id}
+                      size={icon.size}
+                      css={iconStyles(color, icon.size)}
+                    />
                     <Label htmlFor="id">
                       {icon.name}
                       {size === 'all' && <Size>{icon.size}</Size>}
diff --git a/docs/advanced/icons.story.mdx b/docs/advanced/icons.story.mdx
index a0e4fdd6a8..3256eeaf53 100644
--- a/docs/advanced/icons.story.mdx
+++ b/docs/advanced/icons.story.mdx
@@ -6,9 +6,10 @@ import { Meta, Icons } from '../../.storybook/components';
 
 The icons used throughout Circuit UI come from [SumUp's icon library](https://github.com/sumup-oss/icons). The [`@sumup/icons`](https://www.npmjs.com/package/@sumup/icons) package is a required peer dependency of [`@sumup/circuit-ui`](https://www.npmjs.com/package/@sumup/circuit-ui). You can install the package by running the following command in your project:
 
-```bash
+```sh
+# With yarn:
 yarn add @sumup/icons
-# Or if you prefer npm:
+# With npm:
 npm install @sumup/icons
 ```
 
diff --git a/docs/introduction/getting-started.story.mdx b/docs/introduction/getting-started.story.mdx
index 64272017f7..48d34ccfea 100644
--- a/docs/introduction/getting-started.story.mdx
+++ b/docs/introduction/getting-started.story.mdx
@@ -47,9 +47,9 @@ Circuit UI relies on some mandatory peer dependencies, namely [@sumup/icons](htt
 
 ```bash
 # With yarn:
-yarn add @sumup/icons react react-dom @emotion/core @emotion/styled emotion-theming
+yarn add @sumup/design-tokens @sumup/icons react react-dom @emotion/core @emotion/styled emotion-theming
 # With npm:
-npm install @sumup/icons react react-dom @emotion/core @emotion/styled emotion-theming
+npm install @sumup/design-tokens @sumup/icons react react-dom @emotion/core @emotion/styled emotion-theming
 ```
 
 ### Configuring the theme
diff --git a/package.json b/package.json
index 468f17e36b..8f457f2e65 100644
--- a/package.json
+++ b/package.json
@@ -96,7 +96,7 @@
     "@storybook/source-loader": "^5.2.4",
     "@sumup/design-tokens": "^1.0.0-alpha.2",
     "@sumup/foundry": "^2.1.0",
-    "@sumup/icons": "^1.0.0-canary.7",
+    "@sumup/icons": "^1.0.0",
     "@sumup/intl": "^1.0.0",
     "@svgr/webpack": "^4.3.3",
     "@testing-library/dom": "^6.5.0",
diff --git a/src/__snapshots__/storyshots.spec.js.snap b/src/__snapshots__/storyshots.spec.js.snap
index 3d141dda57..bd059a8db5 100644
--- a/src/__snapshots__/storyshots.spec.js.snap
+++ b/src/__snapshots__/storyshots.spec.js.snap
@@ -736,15 +736,15 @@ exports[`Storyshots Components/Button With Icon 1`] = `
 >
   <svg
     fill="none"
-    height="24"
+    height="16"
     role="presentation"
-    viewBox="0 0 24 24"
-    width="24"
+    viewBox="0 0 16 16"
+    width="16"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       clip-rule="evenodd"
-      d="M13.316 9.2V6.8c0-.994-.819-1.8-1.829-1.8l-2.439 5.4V17h6.877a1.214 1.214 0 001.22-1.02l.841-5.4a1.187 1.187 0 00-.285-.968 1.228 1.228 0 00-.934-.412h-3.45zM9.048 17H7.22A1.21 1.21 0 016 15.8v-4.2c0-.663.546-1.2 1.22-1.2h1.828V17z"
+      d="M9.316 5.2V2.8c0-.994-.819-1.8-1.829-1.8L5.048 6.4V13h6.877a1.214 1.214 0 001.22-1.02l.841-5.4a1.187 1.187 0 00-.285-.968 1.228 1.228 0 00-.934-.412h-3.45zM5.048 13H3.22A1.21 1.21 0 012 11.8V7.6c0-.663.546-1.2 1.22-1.2h1.828V13z"
       stroke="currentColor"
       stroke-linecap="round"
       stroke-linejoin="round"
@@ -1008,14 +1008,14 @@ exports[`Storyshots Components/Button/CloseButton Base 1`] = `
 >
   <svg
     fill="none"
-    height="24"
+    height="16"
     role="presentation"
-    viewBox="0 0 24 24"
-    width="24"
+    viewBox="0 0 16 16"
+    width="16"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M7 7l10 10m0-10L7 17"
+      d="M3 3l10 10m0-10L3 13"
       stroke="currentColor"
       stroke-linecap="round"
       stroke-width="2"
@@ -1108,19 +1108,32 @@ exports[`Storyshots Components/Button/IconButton Base 1`] = `
 >
   <svg
     fill="none"
-    height="24"
+    height="16"
     role="presentation"
-    viewBox="0 0 24 24"
-    width="24"
+    viewBox="0 0 16 16"
+    width="16"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <path
-      d="M19 16v3H5v-3m7-11v9m0 0l4-4m-4 4l-4-4"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="2"
-    />
+    <g
+      clip-path="url(#download_small_svg__clip0)"
+    >
+      <path
+        clip-rule="evenodd"
+        d="M9 1a1 1 0 00-2 0v6.586L4.707 5.293a1 1 0 00-1.414 1.414l4 4a1 1 0 001.414 0l4-4a1 1 0 00-1.414-1.414L9 7.586V1zM2 12a1 1 0 10-2 0v3a1 1 0 001 1h14a1 1 0 001-1v-3a1 1 0 10-2 0v2H2v-2z"
+        fill="currentColor"
+        fill-rule="evenodd"
+      />
+    </g>
+    <defs>
+      <clippath
+        id="download_small_svg__clip0"
+      >
+        <path
+          d="M0 0h16v16H0V0z"
+          fill="#fff"
+        />
+      </clippath>
+    </defs>
   </svg>
   <span
     class="circuit-0"
@@ -2586,13 +2599,13 @@ exports[`Storyshots Components/Calendar/RangePicker Base 1`] = `
           <svg
             class="circuit-0 circuit-1"
             fill="none"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M6 12h10m0 0l-5-5m5 5l-5 5"
+              d="M2 8h10m0 0L7 3m5 5l-5 5"
               stroke="currentColor"
               stroke-linecap="round"
               stroke-linejoin="round"
@@ -2629,13 +2642,13 @@ exports[`Storyshots Components/Calendar/RangePicker Base 1`] = `
           <svg
             class="circuit-2 circuit-3"
             fill="none"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M7 7l10 10m0-10L7 17"
+              d="M3 3l10 10m0-10L3 13"
               stroke="currentColor"
               stroke-linecap="round"
               stroke-width="2"
@@ -4693,14 +4706,14 @@ HTMLCollection [
       >
         <svg
           fill="none"
-          height="24"
+          height="16"
           role="presentation"
-          viewBox="0 0 24 24"
-          width="24"
+          viewBox="0 0 16 16"
+          width="16"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M7 7l10 10m0-10L7 17"
+            d="M3 3l10 10m0-10L3 13"
             stroke="currentColor"
             stroke-linecap="round"
             stroke-width="2"
@@ -5228,13 +5241,13 @@ exports[`Storyshots Components/Carousel Composed 1`] = `
           >
             <svg
               fill="none"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M14 8l-4 4 4 4"
+                d="M10 4L6 8l4 4"
                 stroke="currentColor"
                 stroke-linecap="round"
                 stroke-linejoin="round"
@@ -5260,13 +5273,13 @@ exports[`Storyshots Components/Carousel Composed 1`] = `
           >
             <svg
               fill="none"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M10 16l4-4-4-4"
+                d="M6 12l4-4-4-4"
                 stroke="currentColor"
                 stroke-linecap="round"
                 stroke-linejoin="round"
@@ -5808,13 +5821,13 @@ exports[`Storyshots Components/Carousel Stateful 1`] = `
           >
             <svg
               fill="none"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M14 8l-4 4 4 4"
+                d="M10 4L6 8l4 4"
                 stroke="currentColor"
                 stroke-linecap="round"
                 stroke-linejoin="round"
@@ -5832,13 +5845,13 @@ exports[`Storyshots Components/Carousel Stateful 1`] = `
           >
             <svg
               fill="none"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M10 16l4-4-4-4"
+                d="M6 12l4-4-4-4"
                 stroke="currentColor"
                 stroke-linecap="round"
                 stroke-linejoin="round"
@@ -6030,13 +6043,13 @@ exports[`Storyshots Components/Carousel/Buttons All Buttons 1`] = `
     >
       <svg
         fill="none"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M14 8l-4 4 4 4"
+          d="M10 4L6 8l4 4"
           stroke="currentColor"
           stroke-linecap="round"
           stroke-linejoin="round"
@@ -6054,13 +6067,13 @@ exports[`Storyshots Components/Carousel/Buttons All Buttons 1`] = `
     >
       <svg
         fill="none"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M10 16l4-4-4-4"
+          d="M6 12l4-4-4-4"
           stroke="currentColor"
           stroke-linecap="round"
           stroke-linejoin="round"
@@ -7651,14 +7664,14 @@ exports[`Storyshots Components/Modal/Embedded With Title And Close Button 1`] =
     >
       <svg
         fill="none"
-        height="24"
+        height="16"
         role="presentation"
-        viewBox="0 0 24 24"
-        width="24"
+        viewBox="0 0 16 16"
+        width="16"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M7 7l10 10m0-10L7 17"
+          d="M3 3l10 10m0-10L3 13"
           stroke="currentColor"
           stroke-linecap="round"
           stroke-width="2"
@@ -10243,14 +10256,14 @@ exports[`Storyshots Components/Sidebar Base 1`] = `
   >
     <svg
       fill="none"
-      height="24"
+      height="16"
       role="presentation"
-      viewBox="0 0 24 24"
-      width="24"
+      viewBox="0 0 16 16"
+      width="16"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M7 7l10 10m0-10L7 17"
+        d="M3 3l10 10m0-10L3 13"
         stroke="currentColor"
         stroke-linecap="round"
         stroke-width="2"
@@ -10404,11 +10417,11 @@ label + .circuit-10 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-0 {
@@ -11089,8 +11102,8 @@ tbody .circuit-22:last-child td {
 }
 
 .circuit-0 {
-  margin-top: -7px;
-  margin-bottom: -7px;
+  margin-top: -3px;
+  margin-bottom: -3px;
 }
 
 .circuit-8 {
@@ -11328,13 +11341,13 @@ tbody .circuit-36:hover th {
               <svg
                 class="circuit-0"
                 fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M8 14l4-4 4 4"
+                  d="M4 10l4-4 4 4"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -11344,13 +11357,13 @@ tbody .circuit-36:hover th {
               <svg
                 class="circuit-0"
                 fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M8 10l4 4 4-4"
+                  d="M4 6l4 4 4-4"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -11387,13 +11400,13 @@ tbody .circuit-36:hover th {
               <svg
                 class="circuit-0"
                 fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M8 14l4-4 4 4"
+                  d="M4 10l4-4 4 4"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -11403,13 +11416,13 @@ tbody .circuit-36:hover th {
               <svg
                 class="circuit-0"
                 fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M8 10l4 4 4-4"
+                  d="M4 6l4 4 4-4"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -11731,8 +11744,8 @@ tbody .circuit-10:last-child td {
 }
 
 .circuit-0 {
-  margin-top: -7px;
-  margin-bottom: -7px;
+  margin-top: -3px;
+  margin-bottom: -3px;
 }
 
 .circuit-8 {
@@ -11829,13 +11842,13 @@ tbody .circuit-10:last-child td {
               <svg
                 class="circuit-0"
                 fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M8 14l4-4 4 4"
+                  d="M4 10l4-4 4 4"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -11845,13 +11858,13 @@ tbody .circuit-10:last-child td {
               <svg
                 class="circuit-0"
                 fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M8 10l4 4 4-4"
+                  d="M4 6l4 4 4-4"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -12148,8 +12161,8 @@ tbody .circuit-18:last-child td {
 }
 
 .circuit-0 {
-  margin-top: -7px;
-  margin-bottom: -7px;
+  margin-top: -3px;
+  margin-bottom: -3px;
 }
 
 .circuit-8 {
@@ -12308,13 +12321,13 @@ tbody .circuit-18:last-child td {
               <svg
                 class="circuit-0"
                 fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M8 14l4-4 4 4"
+                  d="M4 10l4-4 4 4"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -12324,13 +12337,13 @@ tbody .circuit-18:last-child td {
               <svg
                 class="circuit-0"
                 fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M8 10l4 4 4-4"
+                  d="M4 6l4 4 4-4"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -12367,13 +12380,13 @@ tbody .circuit-18:last-child td {
               <svg
                 class="circuit-0"
                 fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M8 14l4-4 4 4"
+                  d="M4 10l4-4 4 4"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -12383,13 +12396,13 @@ tbody .circuit-18:last-child td {
               <svg
                 class="circuit-0"
                 fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M8 10l4 4 4-4"
+                  d="M4 6l4 4 4-4"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -13655,14 +13668,14 @@ exports[`Storyshots Components/Tag Removable 1`] = `
   >
     <svg
       fill="none"
-      height="24"
+      height="16"
       role="presentation"
-      viewBox="0 0 24 24"
-      width="24"
+      viewBox="0 0 16 16"
+      width="16"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M7 7l10 10m0-10L7 17"
+        d="M3 3l10 10m0-10L3 13"
         stroke="currentColor"
         stroke-linecap="round"
         stroke-width="2"
@@ -13734,13 +13747,13 @@ exports[`Storyshots Components/Tag With Prefix 1`] = `
   <svg
     class="circuit-0"
     fill="none"
-    height="24"
-    viewBox="0 0 24 24"
-    width="24"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M6 12.79L10 17l8-9"
+      d="M2 8.79L6 13l8-9"
       stroke="currentColor"
       stroke-linecap="round"
       stroke-linejoin="round"
@@ -13781,13 +13794,13 @@ exports[`Storyshots Components/Tag With Suffix 1`] = `
   <svg
     class="circuit-0"
     fill="none"
-    height="24"
-    viewBox="0 0 24 24"
-    width="24"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M6 12.79L10 17l8-9"
+      d="M2 8.79L6 13l8-9"
       stroke="currentColor"
       stroke-linecap="round"
       stroke-linejoin="round"
@@ -13864,18 +13877,31 @@ exports[`Storyshots Components/Tooltip Base 1`] = `
   </div>
   <svg
     fill="none"
-    height="24"
-    viewBox="0 0 24 24"
-    width="24"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <path
-      d="M12 8.5V8m0 7.5v-4m0 7.5a7 7 0 100-14 7 7 0 000 14z"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="2"
-    />
+    <g
+      clip-path="url(#circle_info_small_svg__clip0)"
+    >
+      <path
+        clip-rule="evenodd"
+        d="M2 8a6 6 0 1112 0A6 6 0 012 8zm6-8a8 8 0 100 16A8 8 0 008 0zm1 4a1 1 0 00-2 0v.5a1 1 0 002 0V4zm0 3.5a1 1 0 00-2 0v4a1 1 0 102 0v-4z"
+        fill="currentColor"
+        fill-rule="evenodd"
+      />
+    </g>
+    <defs>
+      <clippath
+        id="circle_info_small_svg__clip0"
+      >
+        <path
+          d="M0 0h16v16H0V0z"
+          fill="#fff"
+        />
+      </clippath>
+    </defs>
   </svg>
 </div>
 `;
@@ -13942,18 +13968,31 @@ exports[`Storyshots Components/Tooltip Bottom Right 1`] = `
   </div>
   <svg
     fill="none"
-    height="24"
-    viewBox="0 0 24 24"
-    width="24"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <path
-      d="M12 8.5V8m0 7.5v-4m0 7.5a7 7 0 100-14 7 7 0 000 14z"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="2"
-    />
+    <g
+      clip-path="url(#circle_info_small_svg__clip0)"
+    >
+      <path
+        clip-rule="evenodd"
+        d="M2 8a6 6 0 1112 0A6 6 0 012 8zm6-8a8 8 0 100 16A8 8 0 008 0zm1 4a1 1 0 00-2 0v.5a1 1 0 002 0V4zm0 3.5a1 1 0 00-2 0v4a1 1 0 102 0v-4z"
+        fill="currentColor"
+        fill-rule="evenodd"
+      />
+    </g>
+    <defs>
+      <clippath
+        id="circle_info_small_svg__clip0"
+      >
+        <path
+          d="M0 0h16v16H0V0z"
+          fill="#fff"
+        />
+      </clippath>
+    </defs>
   </svg>
 </div>
 `;
@@ -14025,18 +14064,31 @@ exports[`Storyshots Components/Tooltip Left Center 1`] = `
   </div>
   <svg
     fill="none"
-    height="24"
-    viewBox="0 0 24 24"
-    width="24"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <path
-      d="M12 8.5V8m0 7.5v-4m0 7.5a7 7 0 100-14 7 7 0 000 14z"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="2"
-    />
+    <g
+      clip-path="url(#circle_info_small_svg__clip0)"
+    >
+      <path
+        clip-rule="evenodd"
+        d="M2 8a6 6 0 1112 0A6 6 0 012 8zm6-8a8 8 0 100 16A8 8 0 008 0zm1 4a1 1 0 00-2 0v.5a1 1 0 002 0V4zm0 3.5a1 1 0 00-2 0v4a1 1 0 102 0v-4z"
+        fill="currentColor"
+        fill-rule="evenodd"
+      />
+    </g>
+    <defs>
+      <clippath
+        id="circle_info_small_svg__clip0"
+      >
+        <path
+          d="M0 0h16v16H0V0z"
+          fill="#fff"
+        />
+      </clippath>
+    </defs>
   </svg>
 </div>
 `;
@@ -14103,18 +14155,31 @@ exports[`Storyshots Components/Tooltip Top Left 1`] = `
   </div>
   <svg
     fill="none"
-    height="24"
-    viewBox="0 0 24 24"
-    width="24"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <path
-      d="M12 8.5V8m0 7.5v-4m0 7.5a7 7 0 100-14 7 7 0 000 14z"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="2"
-    />
+    <g
+      clip-path="url(#circle_info_small_svg__clip0)"
+    >
+      <path
+        clip-rule="evenodd"
+        d="M2 8a6 6 0 1112 0A6 6 0 012 8zm6-8a8 8 0 100 16A8 8 0 008 0zm1 4a1 1 0 00-2 0v.5a1 1 0 002 0V4zm0 3.5a1 1 0 00-2 0v4a1 1 0 102 0v-4z"
+        fill="currentColor"
+        fill-rule="evenodd"
+      />
+    </g>
+    <defs>
+      <clippath
+        id="circle_info_small_svg__clip0"
+      >
+        <path
+          d="M0 0h16v16H0V0z"
+          fill="#fff"
+        />
+      </clippath>
+    </defs>
   </svg>
 </div>
 `;
@@ -14192,6 +14257,7 @@ exports[`Storyshots Forms/Checkbox Base 1`] = `
 .circuit-2 svg {
   height: 16px;
   width: 16px;
+  padding: 2px;
   box-sizing: border-box;
   color: #3388FF;
   display: block;
@@ -14226,13 +14292,13 @@ exports[`Storyshots Forms/Checkbox Base 1`] = `
     <svg
       aria-hidden="true"
       fill="none"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M6 12.79L10 17l8-9"
+        d="M2 8.79L6 13l8-9"
         stroke="currentColor"
         stroke-linecap="round"
         stroke-linejoin="round"
@@ -14319,6 +14385,7 @@ exports[`Storyshots Forms/Checkbox Disabled 1`] = `
 .circuit-2 svg {
   height: 16px;
   width: 16px;
+  padding: 2px;
   box-sizing: border-box;
   color: #3388FF;
   display: block;
@@ -14370,13 +14437,13 @@ exports[`Storyshots Forms/Checkbox Disabled 1`] = `
     <svg
       aria-hidden="true"
       fill="none"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M6 12.79L10 17l8-9"
+        d="M2 8.79L6 13l8-9"
         stroke="currentColor"
         stroke-linecap="round"
         stroke-linejoin="round"
@@ -14460,6 +14527,7 @@ exports[`Storyshots Forms/Checkbox Invalid 1`] = `
 .circuit-2 svg {
   height: 16px;
   width: 16px;
+  padding: 2px;
   box-sizing: border-box;
   color: #3388FF;
   display: block;
@@ -14544,13 +14612,13 @@ exports[`Storyshots Forms/Checkbox Invalid 1`] = `
     <svg
       aria-hidden="true"
       fill="none"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M6 12.79L10 17l8-9"
+        d="M2 8.79L6 13l8-9"
         stroke="currentColor"
         stroke-linecap="round"
         stroke-linejoin="round"
@@ -14640,6 +14708,7 @@ HTMLCollection [
 .circuit-2 svg {
   height: 16px;
   width: 16px;
+  padding: 2px;
   box-sizing: border-box;
   color: #3388FF;
   display: block;
@@ -14674,13 +14743,13 @@ HTMLCollection [
       <svg
         aria-hidden="true"
         fill="none"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M6 12.79L10 17l8-9"
+          d="M2 8.79L6 13l8-9"
           stroke="currentColor"
           stroke-linecap="round"
           stroke-linejoin="round"
@@ -14761,6 +14830,7 @@ HTMLCollection [
 .circuit-2 svg {
   height: 16px;
   width: 16px;
+  padding: 2px;
   box-sizing: border-box;
   color: #3388FF;
   display: block;
@@ -14795,13 +14865,13 @@ HTMLCollection [
       <svg
         aria-hidden="true"
         fill="none"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M6 12.79L10 17l8-9"
+          d="M2 8.79L6 13l8-9"
           stroke="currentColor"
           stroke-linecap="round"
           stroke-linejoin="round"
@@ -14882,6 +14952,7 @@ HTMLCollection [
 .circuit-2 svg {
   height: 16px;
   width: 16px;
+  padding: 2px;
   box-sizing: border-box;
   color: #3388FF;
   display: block;
@@ -14916,13 +14987,13 @@ HTMLCollection [
       <svg
         aria-hidden="true"
         fill="none"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M6 12.79L10 17l8-9"
+          d="M2 8.79L6 13l8-9"
           stroke="currentColor"
           stroke-linecap="round"
           stroke-linejoin="round"
@@ -15142,11 +15213,11 @@ label + .circuit-6 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-2 {
@@ -15329,11 +15400,11 @@ exports[`Storyshots Forms/Input Inline 1`] = `
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-0 {
@@ -15465,11 +15536,11 @@ label + .circuit-9 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-7 {
@@ -15611,19 +15682,32 @@ label + .circuit-9 {
         <svg
           class="circuit-4"
           fill="none"
-          height="24"
+          height="16"
           role="img"
-          viewBox="0 0 24 24"
-          width="24"
+          viewBox="0 0 16 16"
+          width="16"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <path
-            d="M9.5 14.5l5-5m-5 0l5 5M12 19a7 7 0 100-14 7 7 0 000 14z"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-          />
+          <g
+            clip-path="url(#circle_cross_small_svg__clip0)"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M2 8a6 6 0 1112 0A6 6 0 012 8zm6-8a8 8 0 100 16A8 8 0 008 0zM6.207 4.793a1 1 0 00-1.414 1.414L6.586 8 4.793 9.793a1 1 0 001.414 1.414L8 9.414l1.793 1.793a1 1 0 001.414-1.414L9.414 8l1.793-1.793a1 1 0 00-1.414-1.414L8 6.586 6.207 4.793z"
+              fill="currentColor"
+              fill-rule="evenodd"
+            />
+          </g>
+          <defs>
+            <clippath
+              id="circle_cross_small_svg__clip0"
+            >
+              <path
+                d="M0 0h16v16H0V0z"
+                fill="#fff"
+              />
+            </clippath>
+          </defs>
         </svg>
       </div>
       <div
@@ -15659,11 +15743,11 @@ label + .circuit-7 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-2 {
@@ -15764,19 +15848,32 @@ label + .circuit-7 {
         <svg
           class="circuit-4"
           fill="none"
-          height="24"
+          height="16"
           role="img"
-          viewBox="0 0 24 24"
-          width="24"
+          viewBox="0 0 16 16"
+          width="16"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <path
-            d="M9.5 14.5l5-5m-5 0l5 5M12 19a7 7 0 100-14 7 7 0 000 14z"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-          />
+          <g
+            clip-path="url(#circle_cross_small_svg__clip0)"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M2 8a6 6 0 1112 0A6 6 0 012 8zm6-8a8 8 0 100 16A8 8 0 008 0zM6.207 4.793a1 1 0 00-1.414 1.414L6.586 8 4.793 9.793a1 1 0 001.414 1.414L8 9.414l1.793 1.793a1 1 0 001.414-1.414L9.414 8l1.793-1.793a1 1 0 00-1.414-1.414L8 6.586 6.207 4.793z"
+              fill="currentColor"
+              fill-rule="evenodd"
+            />
+          </g>
+          <defs>
+            <clippath
+              id="circle_cross_small_svg__clip0"
+            >
+              <path
+                d="M0 0h16v16H0V0z"
+                fill="#fff"
+              />
+            </clippath>
+          </defs>
         </svg>
       </div>
     </div>
@@ -15810,11 +15907,11 @@ label + .circuit-6 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-2 {
@@ -15918,11 +16015,11 @@ label + .circuit-6 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-2 {
@@ -16073,11 +16170,11 @@ label + .circuit-9 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-4 {
@@ -16152,26 +16249,32 @@ label + .circuit-9 {
         <svg
           class="circuit-4"
           fill="none"
-          height="24"
+          height="16"
           role="img"
-          viewBox="0 0 24 24"
-          width="24"
+          viewBox="0 0 16 16"
+          width="16"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <path
-            d="M9.031 12.532l2 2 4-5"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-          />
-          <path
-            d="M12 19a7 7 0 100-14 7 7 0 000 14z"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-          />
+          <g
+            clip-path="url(#circle_checkmark_small_svg__clip0)"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M2 8a6 6 0 1112 0A6 6 0 012 8zm6-8a8 8 0 100 16A8 8 0 008 0zm3.812 6.156a1 1 0 00-1.562-1.249L6.948 9.035l-1.21-1.21a1 1 0 00-1.414 1.414l2 2a1 1 0 001.488-.083l4-5z"
+              fill="currentColor"
+              fill-rule="evenodd"
+            />
+          </g>
+          <defs>
+            <clippath
+              id="circle_checkmark_small_svg__clip0"
+            >
+              <path
+                d="M0 0h16v16H0V0z"
+                fill="#fff"
+              />
+            </clippath>
+          </defs>
         </svg>
       </div>
       <div
@@ -16254,11 +16357,11 @@ label + .circuit-7 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-4 {
@@ -16292,26 +16395,32 @@ label + .circuit-7 {
         <svg
           class="circuit-4"
           fill="none"
-          height="24"
+          height="16"
           role="img"
-          viewBox="0 0 24 24"
-          width="24"
+          viewBox="0 0 16 16"
+          width="16"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <path
-            d="M9.031 12.532l2 2 4-5"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-          />
-          <path
-            d="M12 19a7 7 0 100-14 7 7 0 000 14z"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-          />
+          <g
+            clip-path="url(#circle_checkmark_small_svg__clip0)"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M2 8a6 6 0 1112 0A6 6 0 012 8zm6-8a8 8 0 100 16A8 8 0 008 0zm3.812 6.156a1 1 0 00-1.562-1.249L6.948 9.035l-1.21-1.21a1 1 0 00-1.414 1.414l2 2a1 1 0 001.488-.083l4-5z"
+              fill="currentColor"
+              fill-rule="evenodd"
+            />
+          </g>
+          <defs>
+            <clippath
+              id="circle_checkmark_small_svg__clip0"
+            >
+              <path
+                d="M0 0h16v16H0V0z"
+                fill="#fff"
+              />
+            </clippath>
+          </defs>
         </svg>
       </div>
     </div>
@@ -16347,11 +16456,11 @@ label + .circuit-9 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-7 {
@@ -16493,19 +16602,32 @@ label + .circuit-9 {
         <svg
           class="circuit-4"
           fill="none"
-          height="24"
+          height="16"
           role="img"
-          viewBox="0 0 24 24"
-          width="24"
+          viewBox="0 0 16 16"
+          width="16"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <path
-            d="M12 12.5V8m0 8v-.5m0 3.5a7 7 0 100-14 7 7 0 000 14z"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-          />
+          <g
+            clip-path="url(#circle_warning_small_svg__clip0)"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M2 8a6 6 0 1112 0A6 6 0 012 8zm6-8a8 8 0 100 16A8 8 0 008 0zm1 4a1 1 0 00-2 0v4.5a1 1 0 002 0V4zm0 7.5a1 1 0 10-2 0v.5a1 1 0 102 0v-.5z"
+              fill="currentColor"
+              fill-rule="evenodd"
+            />
+          </g>
+          <defs>
+            <clippath
+              id="circle_warning_small_svg__clip0"
+            >
+              <path
+                d="M0 0h16v16H0V0z"
+                fill="#fff"
+              />
+            </clippath>
+          </defs>
         </svg>
       </div>
       <div
@@ -16541,11 +16663,11 @@ label + .circuit-7 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-2 {
@@ -16646,19 +16768,32 @@ label + .circuit-7 {
         <svg
           class="circuit-4"
           fill="none"
-          height="24"
+          height="16"
           role="img"
-          viewBox="0 0 24 24"
-          width="24"
+          viewBox="0 0 16 16"
+          width="16"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <path
-            d="M12 12.5V8m0 8v-.5m0 3.5a7 7 0 100-14 7 7 0 000 14z"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-          />
+          <g
+            clip-path="url(#circle_warning_small_svg__clip0)"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M2 8a6 6 0 1112 0A6 6 0 012 8zm6-8a8 8 0 100 16A8 8 0 008 0zm1 4a1 1 0 00-2 0v4.5a1 1 0 002 0V4zm0 7.5a1 1 0 10-2 0v.5a1 1 0 102 0v-.5z"
+              fill="currentColor"
+              fill-rule="evenodd"
+            />
+          </g>
+          <defs>
+            <clippath
+              id="circle_warning_small_svg__clip0"
+            >
+              <path
+                d="M0 0h16v16H0V0z"
+                fill="#fff"
+              />
+            </clippath>
+          </defs>
         </svg>
       </div>
     </div>
@@ -16705,11 +16840,11 @@ label + .circuit-6 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-2 {
@@ -16823,11 +16958,11 @@ label + .circuit-8 {
   position: absolute;
   top: 1px;
   left: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-4 {
@@ -16887,11 +17022,11 @@ label + .circuit-8 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 <label
@@ -16964,11 +17099,11 @@ label + .circuit-8 {
   position: absolute;
   top: 1px;
   left: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-4 {
@@ -17028,11 +17163,11 @@ label + .circuit-8 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 <label
@@ -17101,11 +17236,11 @@ label + .circuit-8 {
   position: absolute;
   top: 1px;
   left: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-4 {
@@ -17165,11 +17300,11 @@ label + .circuit-8 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 <label
@@ -17243,11 +17378,11 @@ label + .circuit-8 {
   position: absolute;
   top: 1px;
   left: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-4 {
@@ -17307,11 +17442,11 @@ label + .circuit-8 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 <label
@@ -17380,11 +17515,11 @@ label + .circuit-8 {
   position: absolute;
   top: 1px;
   left: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-4 {
@@ -17444,11 +17579,11 @@ label + .circuit-8 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 <label
@@ -17507,11 +17642,11 @@ label + .circuit-5 {
   position: absolute;
   top: 1px;
   left: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-3 {
@@ -17577,17 +17712,16 @@ label + .circuit-5 {
     <svg
       class="circuit-2"
       fill="none"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M11 17a6 6 0 100-12 6 6 0 000 12zm4.5-1.5L19 19"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
+        clip-rule="evenodd"
+        d="M2 7a5 5 0 1110 0A5 5 0 012 7zm5-7a7 7 0 104.192 12.606l3.1 3.101a1 1 0 001.415-1.414l-3.1-3.1A7 7 0 007 0z"
+        fill="currentColor"
+        fill-rule="evenodd"
       />
     </svg>
     <input
@@ -17625,11 +17759,11 @@ label + .circuit-5 {
   position: absolute;
   top: 1px;
   left: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-3 {
@@ -17696,17 +17830,16 @@ label + .circuit-5 {
       <svg
         class="circuit-2"
         fill="none"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M11 17a6 6 0 100-12 6 6 0 000 12zm4.5-1.5L19 19"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
+          clip-rule="evenodd"
+          d="M2 7a5 5 0 1110 0A5 5 0 012 7zm5-7a7 7 0 104.192 12.606l3.1 3.101a1 1 0 001.415-1.414l-3.1-3.1A7 7 0 007 0z"
+          fill="currentColor"
+          fill-rule="evenodd"
         />
       </svg>
       <input
@@ -17733,11 +17866,11 @@ exports[`Storyshots Forms/Input/SearchInput Disabled 1`] = `
   position: absolute;
   top: 1px;
   left: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-5 {
@@ -17819,17 +17952,16 @@ label + .circuit-5 {
     <svg
       class="circuit-2"
       fill="none"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M11 17a6 6 0 100-12 6 6 0 000 12zm4.5-1.5L19 19"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
+        clip-rule="evenodd"
+        d="M2 7a5 5 0 1110 0A5 5 0 012 7zm5-7a7 7 0 104.192 12.606l3.1 3.101a1 1 0 001.415-1.414l-3.1-3.1A7 7 0 007 0z"
+        fill="currentColor"
+        fill-rule="evenodd"
       />
     </svg>
     <input
@@ -18393,11 +18525,11 @@ label + .circuit-6 {
   z-index: 40;
   pointer-events: none;
   position: absolute;
-  height: 24px;
-  width: 24px;
+  height: 40px;
+  width: 40px;
   top: 1px;
   right: 1px;
-  margin: 8px;
+  padding: 12px;
 }
 
 <label
@@ -18436,17 +18568,16 @@ label + .circuit-6 {
     <svg
       class="circuit-4 circuit-5"
       fill="none"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M9 9l3-3 3 3m-6 6l3 3 3-3"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
+        clip-rule="evenodd"
+        d="M8.707 1.293a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L8 3.414l2.293 2.293a1 1 0 101.414-1.414l-3-3zm3 10.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 111.414-1.414L8 12.586l2.293-2.293a1 1 0 111.414 1.414z"
+        fill="currentColor"
+        fill-rule="evenodd"
       />
     </svg>
     
@@ -18520,11 +18651,11 @@ label + .circuit-10 {
   z-index: 40;
   pointer-events: none;
   position: absolute;
-  height: 24px;
-  width: 24px;
+  height: 40px;
+  width: 40px;
   top: 1px;
   right: 1px;
-  margin: 8px;
+  padding: 12px;
   right: calc(1px + 24px);
 }
 
@@ -18534,11 +18665,11 @@ label + .circuit-10 {
   z-index: 40;
   pointer-events: none;
   position: absolute;
-  height: 24px;
-  width: 24px;
+  height: 40px;
+  width: 40px;
   top: 1px;
   right: 1px;
-  margin: 8px;
+  padding: 12px;
   color: #DB4D4D;
 }
 
@@ -18619,34 +18750,46 @@ label + .circuit-10 {
     <svg
       class="circuit-4 circuit-5"
       fill="none"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M9 9l3-3 3 3m-6 6l3 3 3-3"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
+        clip-rule="evenodd"
+        d="M8.707 1.293a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L8 3.414l2.293 2.293a1 1 0 101.414-1.414l-3-3zm3 10.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 111.414-1.414L8 12.586l2.293-2.293a1 1 0 111.414 1.414z"
+        fill="currentColor"
+        fill-rule="evenodd"
       />
     </svg>
     <svg
       class="circuit-6 circuit-7"
       fill="none"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path
-        d="M9.5 14.5l5-5m-5 0l5 5M12 19a7 7 0 100-14 7 7 0 000 14z"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-      />
+      <g
+        clip-path="url(#circle_cross_small_svg__clip0)"
+      >
+        <path
+          clip-rule="evenodd"
+          d="M2 8a6 6 0 1112 0A6 6 0 012 8zm6-8a8 8 0 100 16A8 8 0 008 0zM6.207 4.793a1 1 0 00-1.414 1.414L6.586 8 4.793 9.793a1 1 0 001.414 1.414L8 9.414l1.793 1.793a1 1 0 001.414-1.414L9.414 8l1.793-1.793a1 1 0 00-1.414-1.414L8 6.586 6.207 4.793z"
+          fill="currentColor"
+          fill-rule="evenodd"
+        />
+      </g>
+      <defs>
+        <clippath
+          id="circle_cross_small_svg__clip0"
+        >
+          <path
+            d="M0 0h16v16H0V0z"
+            fill="#fff"
+          />
+        </clippath>
+      </defs>
     </svg>
     <div
       class="circuit-8 circuit-9"
@@ -18682,11 +18825,11 @@ label + .circuit-7 {
   z-index: 40;
   pointer-events: none;
   position: absolute;
-  height: 24px;
-  width: 24px;
+  height: 40px;
+  width: 40px;
   top: 1px;
   right: 1px;
-  margin: 8px;
+  padding: 12px;
 }
 
 .circuit-2 {
@@ -18695,9 +18838,9 @@ label + .circuit-7 {
   top: 1px;
   left: 1px;
   z-index: 40;
-  height: 16px;
-  width: 16px;
-  margin: 12px;
+  height: 40px;
+  width: 40px;
+  padding: 12px;
   pointer-events: none;
 }
 
@@ -18723,7 +18866,7 @@ label + .circuit-7 {
   white-space: nowrap;
   font-size: 16px;
   line-height: 24px;
-  padding-left: calc( 12px + 16px + 12px );
+  padding-left: 40px;
 }
 
 .circuit-3:focus,
@@ -18756,14 +18899,14 @@ label + .circuit-7 {
     <svg
       class="circuit-2"
       fill="none"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
         clip-rule="evenodd"
-        d="M5.5 6h13a2 2 0 012 2v8a2 2 0 01-2 2h-13a2 2 0 01-2-2V8a2 2 0 012-2zm0 .5A1.5 1.5 0 004 8v8a1.5 1.5 0 001.5 1.5h13A1.5 1.5 0 0020 16V8a1.5 1.5 0 00-1.5-1.5h-13z"
+        d="M1.882 2h12.236C15.158 2 16 2.843 16 3.882v7.53c0 1.04-.843 1.882-1.882 1.882H1.882A1.882 1.882 0 010 11.412v-7.53C0 2.842.843 2 1.882 2zm0 .47c-.78 0-1.411.633-1.411 1.412v7.53c0 .78.632 1.411 1.411 1.411h12.236c.78 0 1.411-.632 1.411-1.411v-7.53c0-.78-.632-1.411-1.411-1.411H1.882z"
         fill="#D8DDE1"
         fill-rule="evenodd"
       />
@@ -18773,19 +18916,19 @@ label + .circuit-7 {
         fill-rule="evenodd"
       >
         <path
-          d="M5.6 6.5h12.72c.928 0 1.68.76 1.68 1.699v7.603a1.69 1.69 0 01-1.68 1.698H5.68A1.69 1.69 0 014 15.802V8.117C4 7.224 4.716 6.5 5.6 6.5z"
+          d="M2 2.5h11.925c.87 0 1.575.713 1.575 1.592v7.128c0 .88-.705 1.592-1.575 1.592H2.075C1.205 12.813.5 12.1.5 11.22V4.017C.5 3.179 1.172 2.5 2 2.5z"
           fill="#fff"
         />
         <path
-          d="M19.786 7.309H12V6.5h6.4c.592 0 1.11.325 1.386.809zM12 8.986h8v-.81h-8v.81zm0 1.702h8V9.88h-8v.808zm0 1.703h8v-.808h-8v.808zm-8 1.703h16v-.809H4v.81zm0 1.703h16v-.809H4v.81zm15.786.894H4.214c.276.484.794.809 1.386.809h12.8c.593 0 1.11-.325 1.386-.809z"
+          d="M15.3 3.258H8V2.5h6c.555 0 1.04.305 1.3.758zM8 4.83h7.5v-.758H8v.758zm0 1.597h7.5v-.759H8v.759zm0 1.596h7.5v-.758H8v.758zM.5 9.62h15V8.86H.5v.759zm0 1.596h15v-.758H.5v.758zm14.8.838H.7c.26.454.745.758 1.3.758h12c.556 0 1.04-.304 1.3-.758z"
           fill="#FF2B2D"
         />
         <path
-          d="M4 12.391h8V6.5H5.6c-.884 0-1.6.724-1.6 1.618v4.273z"
+          d="M.5 8.023H8V2.5H2C1.17 2.5.5 3.179.5 4.017v4.006z"
           fill="#1A3179"
         />
         <path
-          d="M5.18 7.273a.18.18 0 01-.052.127.177.177 0 01-.304-.127.18.18 0 01.054-.124.177.177 0 01.302.124zm1.166 0a.18.18 0 01-.053.125.177.177 0 01-.302-.125.18.18 0 01.053-.124.177.177 0 01.302.124zm1.244 0a.18.18 0 01-.052.127.177.177 0 01-.304-.127.18.18 0 01.053-.124.177.177 0 01.303.124zm1.183 0a.18.18 0 01-.052.127.177.177 0 01-.303-.127.18.18 0 01.053-.124.177.177 0 01.302.124zm1.243 0a.18.18 0 01-.052.127.177.177 0 01-.303-.127.18.18 0 01.053-.124.177.177 0 01.303.124zm1.167 0a.18.18 0 01-.178.18.177.177 0 01-.125-.053.18.18 0 01.125-.306c.099 0 .178.08.178.18zm-5.378.513a.18.18 0 01-.053.125.177.177 0 01-.302-.125c0-.1.08-.18.178-.18.098 0 .177.08.177.18zm1.243 0a.18.18 0 01-.053.125.177.177 0 01-.302-.125c0-.1.08-.18.178-.18.098 0 .177.08.177.18zm1.184 0a.18.18 0 01-.053.125.177.177 0 01-.303-.125.178.178 0 11.355 0zm1.243 0a.181.181 0 01-.109.17.176.176 0 01-.234-.1.181.181 0 01-.012-.07.18.18 0 01.052-.127.177.177 0 01.303.127zm1.167 0a.18.18 0 01-.053.125.177.177 0 01-.303-.125c0-.1.08-.18.178-.18.098 0 .178.08.178.18zM5.18 8.36a.181.181 0 01-.11.166.176.176 0 01-.194-.04.18.18 0 01.126-.306c.098 0 .178.08.178.18zm1.166 0a.18.18 0 01-.053.125.177.177 0 01-.302-.125.18.18 0 01.052-.127.177.177 0 01.303.127zm1.244 0a.181.181 0 01-.11.166.176.176 0 01-.194-.04.18.18 0 01.126-.306c.098 0 .178.08.178.18zm1.183 0a.181.181 0 01-.11.166.176.176 0 01-.193-.04.18.18 0 01.125-.306.18.18 0 01.178.18zm1.243 0a.182.182 0 01-.11.166.176.176 0 01-.193-.04.18.18 0 01.126-.306.18.18 0 01.177.18zm1.167 0a.18.18 0 01-.178.18.175.175 0 01-.164-.111.18.18 0 01-.013-.07.182.182 0 01.109-.169.176.176 0 01.234.1.18.18 0 01.012.07zm-5.378.513a.18.18 0 01-.053.125.177.177 0 01-.302-.125c0-.1.08-.18.178-.18.098 0 .177.08.177.18zm1.243 0a.18.18 0 01-.053.125.177.177 0 01-.302-.125.181.181 0 01.109-.17.176.176 0 01.234.1.181.181 0 01.012.07zm1.184 0a.18.18 0 01-.053.125.177.177 0 01-.303-.125.178.178 0 11.355 0zm1.243 0a.182.182 0 01-.109.17.176.176 0 01-.234-.1.181.181 0 01-.012-.07.18.18 0 01.052-.127.177.177 0 01.303.127zm1.167 0a.18.18 0 01-.053.125.177.177 0 01-.303-.125c0-.1.08-.18.178-.18.098 0 .178.08.178.18zm-5.462.573a.181.181 0 01-.11.165.176.176 0 01-.232-.097.181.181 0 01.039-.196.177.177 0 01.303.128zm1.166 0a.18.18 0 01-.053.124.177.177 0 01-.302-.124c0-.1.08-.18.178-.18.098 0 .177.08.177.18zm1.244 0a.18.18 0 01-.053.127.177.177 0 01-.303-.128.18.18 0 01.052-.127.177.177 0 01.304.128zm1.183 0a.181.181 0 01-.11.165.176.176 0 01-.232-.097.181.181 0 01.04-.196.177.177 0 01.302.128zm1.243 0a.18.18 0 01-.052.127.177.177 0 01-.303-.128.18.18 0 01.052-.127.177.177 0 01.303.128zm1.167 0a.18.18 0 01-.178.179.175.175 0 01-.164-.11.18.18 0 01.164-.25.176.176 0 01.165.112.182.182 0 01.013.069zm-5.378.513a.178.178 0 01-.276.149.179.179 0 01-.076-.184.18.18 0 01.14-.141.176.176 0 01.182.076c.02.03.03.064.03.1zm1.243 0a.178.178 0 01-.276.149.179.179 0 01-.076-.184.18.18 0 01.14-.141.176.176 0 01.182.076c.02.03.03.064.03.1zm1.184 0a.181.181 0 01-.11.166.175.175 0 01-.194-.04.179.179 0 01-.052-.126.18.18 0 01.052-.128.177.177 0 01.304.128zm1.243 0a.181.181 0 01-.11.166.176.176 0 01-.193-.04.18.18 0 01.125-.306c.098 0 .178.08.178.18zm1.167 0a.18.18 0 01-.052.127.177.177 0 01-.252 0 .18.18 0 01.126-.307c.047 0 .092.019.126.052a.18.18 0 01.052.128zm-5.462.572a.18.18 0 01-.052.127.177.177 0 01-.252 0 .18.18 0 01-.052-.127.177.177 0 01.355 0zm1.166 0a.18.18 0 01-.053.125.177.177 0 01-.249 0 .18.18 0 01-.053-.125.177.177 0 01.355 0zm1.244 0a.18.18 0 01-.052.127.177.177 0 01-.252 0 .18.18 0 01-.052-.127.177.177 0 01.355 0zm1.183 0a.18.18 0 01-.052.127.177.177 0 01-.251 0 .18.18 0 01-.052-.127.177.177 0 01.355 0zm1.243 0a.18.18 0 01-.052.127.177.177 0 01-.25 0 .18.18 0 01-.053-.127.177.177 0 01.355 0zm1.167 0a.18.18 0 01-.11.166.176.176 0 01-.193-.039.18.18 0 01.125-.306.177.177 0 01.165.11.18.18 0 01.013.07zm-5.378.513a.18.18 0 01-.053.125.177.177 0 01-.249 0 .18.18 0 01-.053-.125c0-.1.08-.18.178-.18.098 0 .177.08.177.18zm1.243 0a.18.18 0 01-.053.125.177.177 0 01-.249 0 .18.18 0 01-.053-.125c0-.1.08-.18.178-.18.098 0 .177.08.177.18zm1.184 0a.177.177 0 01-.303.127.18.18 0 01.126-.306c.098 0 .177.08.177.18zm1.243 0a.18.18 0 01-.054.124.177.177 0 01-.247 0 .18.18 0 01-.054-.124.178.178 0 01.245-.166.177.177 0 01.097.098.18.18 0 01.013.068zm1.167 0c0 .1-.08.18-.178.18a.177.177 0 01-.125-.053.18.18 0 01.125-.306c.098 0 .178.08.178.18zm-5.462.573a.18.18 0 01-.054.124.177.177 0 01-.248 0 .18.18 0 01-.054-.124.18.18 0 01.052-.127.177.177 0 01.126-.053c.098 0 .178.08.178.18zm1.166 0a.18.18 0 01-.053.124.177.177 0 01-.249 0 .18.18 0 01-.053-.124c0-.1.08-.18.178-.18a.18.18 0 01.177.18zm1.244 0a.18.18 0 01-.054.124.177.177 0 01-.248 0 .18.18 0 01-.054-.124.18.18 0 01.052-.127.177.177 0 01.126-.053c.098 0 .178.08.178.18zm1.183 0a.18.18 0 01-.053.124.177.177 0 01-.249 0 .18.18 0 01-.053-.124.18.18 0 01.052-.127.177.177 0 01.125-.053c.098 0 .178.08.178.18zm1.243 0a.18.18 0 01-.054.123.177.177 0 11-.123-.303c.098 0 .177.08.177.18zm1.167 0a.18.18 0 01-.178.18.176.176 0 01-.125-.053.18.18 0 010-.254.176.176 0 01.29.058.18.18 0 01.013.069z"
+          d="M1.606 3.225a.17.17 0 01-.049.12.166.166 0 01-.284-.12.17.17 0 01.05-.117.166.166 0 01.283.117zm1.094 0a.17.17 0 01-.05.117.166.166 0 01-.283-.117.17.17 0 01.05-.117.166.166 0 01.283.117zm1.165 0a.17.17 0 01-.049.12.166.166 0 01-.284-.12.17.17 0 01.05-.117.166.166 0 01.283.117zm1.11 0a.17.17 0 01-.049.12.166.166 0 01-.284-.12.17.17 0 01.05-.117.166.166 0 01.283.117zm1.165 0a.17.17 0 01-.048.12.166.166 0 01-.285-.12.17.17 0 01.05-.117.166.166 0 01.283.117zm1.094 0a.17.17 0 01-.103.156.165.165 0 01-.181-.037.17.17 0 01.118-.287c.092 0 .166.075.166.168zm-5.042.481a.17.17 0 01-.05.117.166.166 0 01-.283-.117c0-.093.075-.168.167-.168.092 0 .166.075.166.168zm1.166 0a.17.17 0 01-.05.117.166.166 0 01-.283-.117c0-.093.074-.168.166-.168.092 0 .167.075.167.168zm1.11 0a.17.17 0 01-.05.117.166.166 0 01-.284-.117c0-.093.075-.168.167-.168.092 0 .166.075.166.168zm1.165 0a.17.17 0 01-.102.159.165.165 0 01-.22-.094.17.17 0 01-.011-.065.17.17 0 01.049-.12.166.166 0 01.235.001.17.17 0 01.049.12zm1.094 0a.17.17 0 01-.05.117.166.166 0 01-.283-.117c0-.093.074-.168.166-.168.092 0 .167.075.167.168zm-5.121.537a.17.17 0 01-.103.155.165.165 0 01-.181-.036.169.169 0 01.117-.288c.092 0 .167.076.167.169zm1.094 0a.17.17 0 01-.05.117.166.166 0 01-.283-.117.17.17 0 01.048-.12.166.166 0 01.285.12zm1.165 0a.17.17 0 01-.103.155.165.165 0 01-.181-.036.169.169 0 01.118-.288c.091 0 .166.076.166.169zm1.11 0a.17.17 0 01-.103.155.165.165 0 01-.181-.036.17.17 0 01.117-.288c.092 0 .167.076.167.169zm1.165 0a.17.17 0 01-.103.155.165.165 0 01-.181-.036.169.169 0 01.118-.288c.092 0 .166.076.166.169zm1.094 0a.17.17 0 01-.103.155.165.165 0 01-.181-.036.168.168 0 01-.049-.12.17.17 0 01.102-.158.165.165 0 01.22.093.17.17 0 01.011.066zm-5.042.48a.17.17 0 01-.05.118.166.166 0 01-.283-.117c0-.093.075-.169.167-.169.092 0 .166.076.166.169zm1.166 0a.17.17 0 01-.05.118.166.166 0 01-.283-.117.17.17 0 01.102-.16.165.165 0 01.22.094.17.17 0 01.01.066zm1.11 0a.17.17 0 01-.05.118.166.166 0 01-.284-.117c0-.093.075-.169.167-.169.092 0 .166.076.166.169zm1.165 0a.17.17 0 01-.102.16.165.165 0 01-.22-.094.17.17 0 01-.011-.066.17.17 0 01.049-.119.166.166 0 01.235 0 .17.17 0 01.049.12zm1.094 0a.17.17 0 01-.05.118.166.166 0 01-.283-.117c0-.093.074-.169.166-.169.092 0 .167.076.167.169zm-5.121.538a.17.17 0 01-.103.155.165.165 0 01-.218-.091.17.17 0 01.037-.184.166.166 0 01.235 0 .17.17 0 01.049.12zm1.094 0a.17.17 0 01-.05.117.166.166 0 01-.283-.117c0-.094.074-.169.166-.169.092 0 .167.075.167.169zm1.165 0a.17.17 0 01-.049.119.166.166 0 01-.284-.12.17.17 0 01.05-.119.166.166 0 01.235 0 .17.17 0 01.048.12zm1.11 0a.17.17 0 01-.103.155.165.165 0 01-.218-.091.17.17 0 01.037-.184.166.166 0 01.284.12zm1.165 0a.17.17 0 01-.049.119.166.166 0 01-.284-.12.17.17 0 01.05-.119.166.166 0 01.283.12zm1.094 0a.17.17 0 01-.103.155.165.165 0 01-.181-.036.168.168 0 01-.049-.12.167.167 0 01.23-.155.166.166 0 01.103.156zm-5.042.48a.167.167 0 01-.259.14.168.168 0 01-.07-.172.169.169 0 01.13-.132.165.165 0 01.171.071.17.17 0 01.028.094zm1.166 0a.167.167 0 01-.26.14.168.168 0 01-.07-.172.169.169 0 01.13-.132.165.165 0 01.172.071.17.17 0 01.028.094zm1.11 0a.17.17 0 01-.103.156.165.165 0 01-.218-.09.17.17 0 01.036-.185.166.166 0 01.284.12zm1.165 0a.17.17 0 01-.103.156.165.165 0 01-.181-.036.17.17 0 01.117-.288c.092 0 .167.076.167.169zm1.094 0a.17.17 0 01-.05.12.166.166 0 01-.284-.12.17.17 0 01.05-.119.166.166 0 01.284.12zm-5.121.538a.17.17 0 01-.049.119.166.166 0 01-.284-.12.17.17 0 01.05-.116.166.166 0 01.283.117zm1.094 0a.17.17 0 01-.05.116.166.166 0 01-.283-.116.17.17 0 01.05-.117.166.166 0 01.283.117zm1.165 0a.17.17 0 01-.049.119.166.166 0 01-.284-.12.17.17 0 01.05-.116.166.166 0 01.283.117zm1.11 0a.17.17 0 01-.049.119.166.166 0 01-.284-.12.17.17 0 01.05-.116.166.166 0 01.283.117zm1.165 0a.17.17 0 01-.048.119.166.166 0 01-.285-.12.17.17 0 01.05-.116.166.166 0 01.283.117zm1.094 0a.17.17 0 01-.103.155.165.165 0 01-.181-.037.17.17 0 01.118-.287.165.165 0 01.154.104.17.17 0 01.012.065zm-5.042.48a.17.17 0 01-.05.117.166.166 0 01-.283-.117c0-.093.075-.168.167-.168.092 0 .166.075.166.168zm1.166 0a.17.17 0 01-.05.117.166.166 0 01-.283-.117c0-.093.074-.168.166-.168.092 0 .167.075.167.168zm1.11 0a.166.166 0 01-.284.119.17.17 0 01.117-.287c.092 0 .166.075.166.168zm1.165 0a.17.17 0 01-.05.116.166.166 0 11.037-.18.17.17 0 01.013.064zm1.094 0a.166.166 0 01-.284.119.17.17 0 01.117-.287c.092 0 .167.075.167.168zm-5.121.537a.17.17 0 01-.05.117.166.166 0 01-.283-.117.17.17 0 01.048-.119.166.166 0 01.118-.05c.092 0 .167.076.167.17zm1.094 0a.17.17 0 01-.05.117.166.166 0 01-.283-.117.166.166 0 01.285-.119.17.17 0 01.048.12zm1.165 0a.17.17 0 01-.05.117.166.166 0 01-.283-.117.17.17 0 01.049-.119.166.166 0 01.118-.05c.091 0 .166.076.166.17zm1.11 0a.17.17 0 01-.05.117.166.166 0 01-.283-.117.17.17 0 01.048-.119.166.166 0 01.118-.05c.092 0 .167.076.167.17zm1.165 0a.17.17 0 01-.05.116.166.166 0 11-.116-.284c.092 0 .166.075.166.168zm1.094 0a.167.167 0 01-.166.168.166.166 0 01-.118-.049.17.17 0 01.118-.287.165.165 0 01.154.104.17.17 0 01.012.064z"
           fill="#fff"
         />
       </g>
@@ -18794,7 +18937,7 @@ label + .circuit-7 {
           id="flag_us_small_svg__clip0"
         >
           <path
-            d="M4 6.5h16v11H4z"
+            d="M.5 2.5h15v10.313H.5z"
             fill="#fff"
           />
         </clippath>
@@ -18824,17 +18967,16 @@ label + .circuit-7 {
     <svg
       class="circuit-5 circuit-6"
       fill="none"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M9 9l3-3 3 3m-6 6l3 3 3-3"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
+        clip-rule="evenodd"
+        d="M8.707 1.293a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L8 3.414l2.293 2.293a1 1 0 101.414-1.414l-3-3zm3 10.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 111.414-1.414L8 12.586l2.293-2.293a1 1 0 111.414 1.414z"
+        fill="currentColor"
+        fill-rule="evenodd"
       />
     </svg>
     
@@ -18919,11 +19061,11 @@ label + .circuit-6 {
   z-index: 40;
   pointer-events: none;
   position: absolute;
-  height: 24px;
-  width: 24px;
+  height: 40px;
+  width: 40px;
   top: 1px;
   right: 1px;
-  margin: 8px;
+  padding: 12px;
 }
 
 <label
@@ -18962,17 +19104,16 @@ label + .circuit-6 {
     <svg
       class="circuit-4 circuit-5"
       fill="none"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M9 9l3-3 3 3m-6 6l3 3 3-3"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
+        clip-rule="evenodd"
+        d="M8.707 1.293a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L8 3.414l2.293 2.293a1 1 0 101.414-1.414l-3-3zm3 10.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 111.414-1.414L8 12.586l2.293-2.293a1 1 0 111.414 1.414z"
+        fill="currentColor"
+        fill-rule="evenodd"
       />
     </svg>
     
@@ -19531,11 +19672,11 @@ label + .circuit-6 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-2 {
@@ -19736,11 +19877,11 @@ label + .circuit-9 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-7 {
@@ -19884,19 +20025,32 @@ label + .circuit-9 {
       <svg
         class="circuit-4"
         fill="none"
-        height="24"
+        height="16"
         role="img"
-        viewBox="0 0 24 24"
-        width="24"
+        viewBox="0 0 16 16"
+        width="16"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M9.5 14.5l5-5m-5 0l5 5M12 19a7 7 0 100-14 7 7 0 000 14z"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-        />
+        <g
+          clip-path="url(#circle_cross_small_svg__clip0)"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M2 8a6 6 0 1112 0A6 6 0 012 8zm6-8a8 8 0 100 16A8 8 0 008 0zM6.207 4.793a1 1 0 00-1.414 1.414L6.586 8 4.793 9.793a1 1 0 001.414 1.414L8 9.414l1.793 1.793a1 1 0 001.414-1.414L9.414 8l1.793-1.793a1 1 0 00-1.414-1.414L8 6.586 6.207 4.793z"
+            fill="currentColor"
+            fill-rule="evenodd"
+          />
+        </g>
+        <defs>
+          <clippath
+            id="circle_cross_small_svg__clip0"
+          >
+            <path
+              d="M0 0h16v16H0V0z"
+              fill="#fff"
+            />
+          </clippath>
+        </defs>
       </svg>
     </div>
     <div
@@ -19934,11 +20088,11 @@ label + .circuit-6 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-2 {
@@ -20045,11 +20199,11 @@ label + .circuit-9 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-7 {
@@ -20193,19 +20347,32 @@ label + .circuit-9 {
       <svg
         class="circuit-4"
         fill="none"
-        height="24"
+        height="16"
         role="img"
-        viewBox="0 0 24 24"
-        width="24"
+        viewBox="0 0 16 16"
+        width="16"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M12 12.5V8m0 8v-.5m0 3.5a7 7 0 100-14 7 7 0 000 14z"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-        />
+        <g
+          clip-path="url(#circle_warning_small_svg__clip0)"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M2 8a6 6 0 1112 0A6 6 0 012 8zm6-8a8 8 0 100 16A8 8 0 008 0zm1 4a1 1 0 00-2 0v4.5a1 1 0 002 0V4zm0 7.5a1 1 0 10-2 0v.5a1 1 0 102 0v-.5z"
+            fill="currentColor"
+            fill-rule="evenodd"
+          />
+        </g>
+        <defs>
+          <clippath
+            id="circle_warning_small_svg__clip0"
+          >
+            <path
+              d="M0 0h16v16H0V0z"
+              fill="#fff"
+            />
+          </clippath>
+        </defs>
       </svg>
     </div>
     <div
@@ -20256,11 +20423,11 @@ label + .circuit-6 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-2 {
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index a38c086f33..746d02f8d3 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -171,8 +171,7 @@ const stretchStyles = ({ stretch }: ButtonProps) =>
 
 const iconStyles = (theme: Theme) => css`
   label: button__icon;
-  margin-right: ${theme.spacings.bit};
-  margin-left: -${theme.spacings.bit};
+  margin-right: ${theme.spacings.byte};
 `;
 
 const BaseButton = styled('button')<ButtonProps>(
diff --git a/src/components/Button/__snapshots__/Button.spec.tsx.snap b/src/components/Button/__snapshots__/Button.spec.tsx.snap
index 1d0047168f..78cdd56862 100644
--- a/src/components/Button/__snapshots__/Button.spec.tsx.snap
+++ b/src/components/Button/__snapshots__/Button.spec.tsx.snap
@@ -65,15 +65,15 @@ exports[`Button styles should render a button with icon 1`] = `
 >
   <svg
     fill="none"
-    height="24"
+    height="16"
     role="presentation"
-    viewBox="0 0 24 24"
-    width="24"
+    viewBox="0 0 16 16"
+    width="16"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
       clip-rule="evenodd"
-      d="M13.316 9.2V6.8c0-.994-.819-1.8-1.829-1.8l-2.439 5.4V17h6.877a1.214 1.214 0 001.22-1.02l.841-5.4a1.187 1.187 0 00-.285-.968 1.228 1.228 0 00-.934-.412h-3.45zM9.048 17H7.22A1.21 1.21 0 016 15.8v-4.2c0-.663.546-1.2 1.22-1.2h1.828V17z"
+      d="M9.316 5.2V2.8c0-.994-.819-1.8-1.829-1.8L5.048 6.4V13h6.877a1.214 1.214 0 001.22-1.02l.841-5.4a1.187 1.187 0 00-.285-.968 1.228 1.228 0 00-.934-.412h-3.45zM5.048 13H3.22A1.21 1.21 0 012 11.8V7.6c0-.663.546-1.2 1.22-1.2h1.828V13z"
       stroke="currentColor"
       stroke-linecap="round"
       stroke-linejoin="round"
diff --git a/src/components/Calendar/__snapshots__/RangePicker.spec.js.snap b/src/components/Calendar/__snapshots__/RangePicker.spec.js.snap
index b4c522458c..ae13623f7c 100644
--- a/src/components/Calendar/__snapshots__/RangePicker.spec.js.snap
+++ b/src/components/Calendar/__snapshots__/RangePicker.spec.js.snap
@@ -1225,13 +1225,13 @@ exports[`RangePicker should render with default styles 1`] = `
           <svg
             class="circuit-0 circuit-1"
             fill="none"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M6 12h10m0 0l-5-5m5 5l-5 5"
+              d="M2 8h10m0 0L7 3m5 5l-5 5"
               stroke="currentColor"
               stroke-linecap="round"
               stroke-linejoin="round"
diff --git a/src/components/Carousel/__snapshots__/Carousel.spec.js.snap b/src/components/Carousel/__snapshots__/Carousel.spec.js.snap
index cc05d0a8b1..fe7890cbdf 100644
--- a/src/components/Carousel/__snapshots__/Carousel.spec.js.snap
+++ b/src/components/Carousel/__snapshots__/Carousel.spec.js.snap
@@ -549,13 +549,13 @@ exports[`Carousel styles should render with children as a function 1`] = `
         >
           <svg
             fill="none"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M14 8l-4 4 4 4"
+              d="M10 4L6 8l4 4"
               stroke="currentColor"
               stroke-linecap="round"
               stroke-linejoin="round"
@@ -573,13 +573,13 @@ exports[`Carousel styles should render with children as a function 1`] = `
         >
           <svg
             fill="none"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M10 16l4-4-4-4"
+              d="M6 12l4-4-4-4"
               stroke="currentColor"
               stroke-linecap="round"
               stroke-linejoin="round"
@@ -1144,13 +1144,13 @@ exports[`Carousel styles should render with children as a node 1`] = `
         >
           <svg
             fill="none"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M14 8l-4 4 4 4"
+              d="M10 4L6 8l4 4"
               stroke="currentColor"
               stroke-linecap="round"
               stroke-linejoin="round"
@@ -1168,13 +1168,13 @@ exports[`Carousel styles should render with children as a node 1`] = `
         >
           <svg
             fill="none"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M10 16l4-4-4-4"
+              d="M6 12l4-4-4-4"
               stroke="currentColor"
               stroke-linecap="round"
               stroke-linejoin="round"
@@ -1739,13 +1739,13 @@ exports[`Carousel styles should render with default paused styles 1`] = `
         >
           <svg
             fill="none"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M14 8l-4 4 4 4"
+              d="M10 4L6 8l4 4"
               stroke="currentColor"
               stroke-linecap="round"
               stroke-linejoin="round"
@@ -1763,13 +1763,13 @@ exports[`Carousel styles should render with default paused styles 1`] = `
         >
           <svg
             fill="none"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M10 16l4-4-4-4"
+              d="M6 12l4-4-4-4"
               stroke="currentColor"
               stroke-linecap="round"
               stroke-linejoin="round"
@@ -2307,13 +2307,13 @@ exports[`Carousel styles should render with default styles 1`] = `
         >
           <svg
             fill="none"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M14 8l-4 4 4 4"
+              d="M10 4L6 8l4 4"
               stroke="currentColor"
               stroke-linecap="round"
               stroke-linejoin="round"
@@ -2331,13 +2331,13 @@ exports[`Carousel styles should render with default styles 1`] = `
         >
           <svg
             fill="none"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M10 16l4-4-4-4"
+              d="M6 12l4-4-4-4"
               stroke="currentColor"
               stroke-linecap="round"
               stroke-linejoin="round"
diff --git a/src/components/Carousel/components/Buttons/__snapshots__/Buttons.spec.js.snap b/src/components/Carousel/components/Buttons/__snapshots__/Buttons.spec.js.snap
index ed288eccc3..e21ab4cec4 100644
--- a/src/components/Carousel/components/Buttons/__snapshots__/Buttons.spec.js.snap
+++ b/src/components/Carousel/components/Buttons/__snapshots__/Buttons.spec.js.snap
@@ -177,13 +177,13 @@ exports[`Buttons styles should render with default styles 1`] = `
     >
       <svg
         fill="none"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M14 8l-4 4 4 4"
+          d="M10 4L6 8l4 4"
           stroke="currentColor"
           stroke-linecap="round"
           stroke-linejoin="round"
@@ -201,13 +201,13 @@ exports[`Buttons styles should render with default styles 1`] = `
     >
       <svg
         fill="none"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M10 16l4-4-4-4"
+          d="M6 12l4-4-4-4"
           stroke="currentColor"
           stroke-linecap="round"
           stroke-linejoin="round"
diff --git a/src/components/Checkbox/Checkbox.js b/src/components/Checkbox/Checkbox.js
index effc992864..d36601e104 100644
--- a/src/components/Checkbox/Checkbox.js
+++ b/src/components/Checkbox/Checkbox.js
@@ -51,6 +51,7 @@ const labelBaseStyles = ({ theme }) => css`
 
   svg {
     ${size(theme.spacings.mega)};
+    padding: 2px;
     box-sizing: border-box;
     color: ${theme.colors.p500};
     display: block;
diff --git a/src/components/Checkbox/__snapshots__/Checkbox.spec.js.snap b/src/components/Checkbox/__snapshots__/Checkbox.spec.js.snap
index 8ec6f366e7..6a405c6ce3 100644
--- a/src/components/Checkbox/__snapshots__/Checkbox.spec.js.snap
+++ b/src/components/Checkbox/__snapshots__/Checkbox.spec.js.snap
@@ -73,6 +73,7 @@ exports[`Checkbox should render with a tooltip when passed a validation hint 1`]
 .circuit-2 svg {
   height: 16px;
   width: 16px;
+  padding: 2px;
   box-sizing: border-box;
   color: #3388FF;
   display: block;
@@ -147,13 +148,13 @@ exports[`Checkbox should render with a tooltip when passed a validation hint 1`]
     <svg
       aria-hidden="true"
       fill="none"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M6 12.79L10 17l8-9"
+        d="M2 8.79L6 13l8-9"
         stroke="currentColor"
         stroke-linecap="round"
         stroke-linejoin="round"
@@ -242,6 +243,7 @@ exports[`Checkbox should render with checked styles when passed the checked prop
 .circuit-2 svg {
   height: 16px;
   width: 16px;
+  padding: 2px;
   box-sizing: border-box;
   color: #3388FF;
   display: block;
@@ -276,13 +278,13 @@ exports[`Checkbox should render with checked styles when passed the checked prop
     <svg
       aria-hidden="true"
       fill="none"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M6 12.79L10 17l8-9"
+        d="M2 8.79L6 13l8-9"
         stroke="currentColor"
         stroke-linecap="round"
         stroke-linejoin="round"
@@ -366,6 +368,7 @@ exports[`Checkbox should render with default styles 1`] = `
 .circuit-2 svg {
   height: 16px;
   width: 16px;
+  padding: 2px;
   box-sizing: border-box;
   color: #3388FF;
   display: block;
@@ -399,13 +402,13 @@ exports[`Checkbox should render with default styles 1`] = `
     <svg
       aria-hidden="true"
       fill="none"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M6 12.79L10 17l8-9"
+        d="M2 8.79L6 13l8-9"
         stroke="currentColor"
         stroke-linecap="round"
         stroke-linejoin="round"
@@ -492,6 +495,7 @@ exports[`Checkbox should render with disabled styles when passed the disabled pr
 .circuit-2 svg {
   height: 16px;
   width: 16px;
+  padding: 2px;
   box-sizing: border-box;
   color: #3388FF;
   display: block;
@@ -542,13 +546,13 @@ exports[`Checkbox should render with disabled styles when passed the disabled pr
     <svg
       aria-hidden="true"
       fill="none"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M6 12.79L10 17l8-9"
+        d="M2 8.79L6 13l8-9"
         stroke="currentColor"
         stroke-linecap="round"
         stroke-linejoin="round"
@@ -632,6 +636,7 @@ exports[`Checkbox should render with invalid styles when passed the invalid prop
 .circuit-2 svg {
   height: 16px;
   width: 16px;
+  padding: 2px;
   box-sizing: border-box;
   color: #3388FF;
   display: block;
@@ -674,13 +679,13 @@ exports[`Checkbox should render with invalid styles when passed the invalid prop
     <svg
       aria-hidden="true"
       fill="none"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M6 12.79L10 17l8-9"
+        d="M2 8.79L6 13l8-9"
         stroke="currentColor"
         stroke-linecap="round"
         stroke-linejoin="round"
diff --git a/src/components/CloseButton/__snapshots__/CloseButton.spec.js.snap b/src/components/CloseButton/__snapshots__/CloseButton.spec.js.snap
index 2f3320227d..2c74403f36 100644
--- a/src/components/CloseButton/__snapshots__/CloseButton.spec.js.snap
+++ b/src/components/CloseButton/__snapshots__/CloseButton.spec.js.snap
@@ -80,14 +80,14 @@ exports[`CloseButton should render with default styles 1`] = `
 >
   <svg
     fill="none"
-    height="24"
+    height="16"
     role="presentation"
-    viewBox="0 0 24 24"
-    width="24"
+    viewBox="0 0 16 16"
+    width="16"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M7 7l10 10m0-10L7 17"
+      d="M3 3l10 10m0-10L3 13"
       stroke="currentColor"
       stroke-linecap="round"
       stroke-width="2"
diff --git a/src/components/CurrencyInput/__snapshots__/CurrencyInput.spec.js.snap b/src/components/CurrencyInput/__snapshots__/CurrencyInput.spec.js.snap
index da4e1069d0..e65ca3fd9b 100644
--- a/src/components/CurrencyInput/__snapshots__/CurrencyInput.spec.js.snap
+++ b/src/components/CurrencyInput/__snapshots__/CurrencyInput.spec.js.snap
@@ -26,11 +26,11 @@ label + .circuit-6 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-0 {
@@ -51,11 +51,11 @@ label + .circuit-6 {
   position: absolute;
   top: 1px;
   left: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-2 {
@@ -172,11 +172,11 @@ label + .circuit-6 {
   position: absolute;
   top: 1px;
   left: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-2 {
@@ -236,11 +236,11 @@ label + .circuit-6 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 <label
diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx
index b68c712121..481c9897d2 100644
--- a/src/components/IconButton/IconButton.tsx
+++ b/src/components/IconButton/IconButton.tsx
@@ -39,9 +39,9 @@ const sizeStyles = (size: IconButtonProps['size'] = 'mega') => (
   theme: Theme
 ) => {
   const sizeMap = {
-    kilo: theme.spacings.bit,
-    mega: theme.spacings.byte,
-    giga: theme.spacings.kilo
+    kilo: theme.spacings.byte,
+    mega: theme.spacings.kilo,
+    giga: theme.spacings.mega
   };
 
   return css({
diff --git a/src/components/Input/Input.js b/src/components/Input/Input.js
index e3d37a155b..5025aaae78 100644
--- a/src/components/Input/Input.js
+++ b/src/components/Input/Input.js
@@ -161,10 +161,10 @@ const prefixStyles = theme => css`
   position: absolute;
   top: 1px;
   left: 1px;
-  margin: ${theme.spacings.byte};
   pointer-events: none;
   color: ${theme.colors.n700};
-  ${size(theme.iconSizes.mega)};
+  padding: ${theme.spacings.kilo};
+  ${size(theme.spacings.peta)};
 `;
 
 /**
@@ -176,10 +176,10 @@ const suffixStyles = theme => css`
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: ${theme.spacings.byte};
   pointer-events: none;
   color: ${theme.colors.n700};
-  ${size(theme.iconSizes.mega)};
+  padding: ${theme.spacings.kilo};
+  ${size(theme.spacings.peta)};
 `;
 
 const tooltipBaseStyles = css`
diff --git a/src/components/Input/__snapshots__/Input.spec.js.snap b/src/components/Input/__snapshots__/Input.spec.js.snap
index 15ca5a1801..deb9e11c3f 100644
--- a/src/components/Input/__snapshots__/Input.spec.js.snap
+++ b/src/components/Input/__snapshots__/Input.spec.js.snap
@@ -114,11 +114,11 @@ label + .circuit-5 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-2 {
@@ -233,19 +233,32 @@ label + .circuit-5 {
       <svg
         class="circuit-2"
         fill="none"
-        height="24"
+        height="16"
         role="img"
-        viewBox="0 0 24 24"
-        width="24"
+        viewBox="0 0 16 16"
+        width="16"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M9.5 14.5l5-5m-5 0l5 5M12 19a7 7 0 100-14 7 7 0 000 14z"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-        />
+        <g
+          clip-path="url(#circle_cross_small_svg__clip0)"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M2 8a6 6 0 1112 0A6 6 0 012 8zm6-8a8 8 0 100 16A8 8 0 008 0zM6.207 4.793a1 1 0 00-1.414 1.414L6.586 8 4.793 9.793a1 1 0 001.414 1.414L8 9.414l1.793 1.793a1 1 0 001.414-1.414L9.414 8l1.793-1.793a1 1 0 00-1.414-1.414L8 6.586 6.207 4.793z"
+            fill="currentColor"
+            fill-rule="evenodd"
+          />
+        </g>
+        <defs>
+          <clippath
+            id="circle_cross_small_svg__clip0"
+          >
+            <path
+              d="M0 0h16v16H0V0z"
+              fill="#fff"
+            />
+          </clippath>
+        </defs>
       </svg>
     </div>
   </div>
@@ -279,11 +292,11 @@ label + .circuit-5 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-2 {
@@ -381,19 +394,32 @@ label + .circuit-5 {
       <svg
         class="circuit-2"
         fill="none"
-        height="24"
+        height="16"
         role="img"
-        viewBox="0 0 24 24"
-        width="24"
+        viewBox="0 0 16 16"
+        width="16"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M9.5 14.5l5-5m-5 0l5 5M12 19a7 7 0 100-14 7 7 0 000 14z"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-        />
+        <g
+          clip-path="url(#circle_cross_small_svg__clip0)"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M2 8a6 6 0 1112 0A6 6 0 012 8zm6-8a8 8 0 100 16A8 8 0 008 0zM6.207 4.793a1 1 0 00-1.414 1.414L6.586 8 4.793 9.793a1 1 0 001.414 1.414L8 9.414l1.793 1.793a1 1 0 001.414-1.414L9.414 8l1.793-1.793a1 1 0 00-1.414-1.414L8 6.586 6.207 4.793z"
+            fill="currentColor"
+            fill-rule="evenodd"
+          />
+        </g>
+        <defs>
+          <clippath
+            id="circle_cross_small_svg__clip0"
+          >
+            <path
+              d="M0 0h16v16H0V0z"
+              fill="#fff"
+            />
+          </clippath>
+        </defs>
       </svg>
     </div>
   </div>
@@ -473,11 +499,11 @@ label + .circuit-6 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-4 {
@@ -571,11 +597,11 @@ label + .circuit-4 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-0 {
@@ -747,11 +773,11 @@ exports[`Input should render with custom styles 1`] = `
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-4 {
@@ -907,11 +933,11 @@ label + .circuit-4 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 <label
@@ -1081,11 +1107,11 @@ exports[`Input should render with inline styles when passed the inline prop 1`]
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-4 {
@@ -1148,11 +1174,11 @@ label + .circuit-5 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-0 {
@@ -1247,19 +1273,32 @@ label + .circuit-5 {
       <svg
         class="circuit-2"
         fill="none"
-        height="24"
+        height="16"
         role="img"
-        viewBox="0 0 24 24"
-        width="24"
+        viewBox="0 0 16 16"
+        width="16"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M9.5 14.5l5-5m-5 0l5 5M12 19a7 7 0 100-14 7 7 0 000 14z"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-        />
+        <g
+          clip-path="url(#circle_cross_small_svg__clip0)"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M2 8a6 6 0 1112 0A6 6 0 012 8zm6-8a8 8 0 100 16A8 8 0 008 0zM6.207 4.793a1 1 0 00-1.414 1.414L6.586 8 4.793 9.793a1 1 0 001.414 1.414L8 9.414l1.793 1.793a1 1 0 001.414-1.414L9.414 8l1.793-1.793a1 1 0 00-1.414-1.414L8 6.586 6.207 4.793z"
+            fill="currentColor"
+            fill-rule="evenodd"
+          />
+        </g>
+        <defs>
+          <clippath
+            id="circle_cross_small_svg__clip0"
+          >
+            <path
+              d="M0 0h16v16H0V0z"
+              fill="#fff"
+            />
+          </clippath>
+        </defs>
       </svg>
     </div>
   </div>
@@ -1327,11 +1366,11 @@ exports[`Input should render with no margin styles when passed the noMargin prop
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-4 {
@@ -1392,11 +1431,11 @@ label + .circuit-4 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-0 {
@@ -1494,11 +1533,11 @@ label + .circuit-4 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-0 {
@@ -1642,11 +1681,11 @@ label + .circuit-5 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-2 {
@@ -1674,26 +1713,32 @@ label + .circuit-5 {
       <svg
         class="circuit-2"
         fill="none"
-        height="24"
+        height="16"
         role="img"
-        viewBox="0 0 24 24"
-        width="24"
+        viewBox="0 0 16 16"
+        width="16"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M9.031 12.532l2 2 4-5"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-        />
-        <path
-          d="M12 19a7 7 0 100-14 7 7 0 000 14z"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-        />
+        <g
+          clip-path="url(#circle_checkmark_small_svg__clip0)"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M2 8a6 6 0 1112 0A6 6 0 012 8zm6-8a8 8 0 100 16A8 8 0 008 0zm3.812 6.156a1 1 0 00-1.562-1.249L6.948 9.035l-1.21-1.21a1 1 0 00-1.414 1.414l2 2a1 1 0 001.488-.083l4-5z"
+            fill="currentColor"
+            fill-rule="evenodd"
+          />
+        </g>
+        <defs>
+          <clippath
+            id="circle_checkmark_small_svg__clip0"
+          >
+            <path
+              d="M0 0h16v16H0V0z"
+              fill="#fff"
+            />
+          </clippath>
+        </defs>
       </svg>
     </div>
   </div>
@@ -1794,11 +1839,11 @@ label + .circuit-5 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-2 {
@@ -1826,19 +1871,32 @@ label + .circuit-5 {
       <svg
         class="circuit-2"
         fill="none"
-        height="24"
+        height="16"
         role="img"
-        viewBox="0 0 24 24"
-        width="24"
+        viewBox="0 0 16 16"
+        width="16"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M12 12.5V8m0 8v-.5m0 3.5a7 7 0 100-14 7 7 0 000 14z"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-        />
+        <g
+          clip-path="url(#circle_warning_small_svg__clip0)"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M2 8a6 6 0 1112 0A6 6 0 012 8zm6-8a8 8 0 100 16A8 8 0 008 0zm1 4a1 1 0 00-2 0v4.5a1 1 0 002 0V4zm0 7.5a1 1 0 10-2 0v.5a1 1 0 102 0v-.5z"
+            fill="currentColor"
+            fill-rule="evenodd"
+          />
+        </g>
+        <defs>
+          <clippath
+            id="circle_warning_small_svg__clip0"
+          >
+            <path
+              d="M0 0h16v16H0V0z"
+              fill="#fff"
+            />
+          </clippath>
+        </defs>
       </svg>
     </div>
   </div>
diff --git a/src/components/SearchInput/__snapshots__/SearchInput.spec.js.snap b/src/components/SearchInput/__snapshots__/SearchInput.spec.js.snap
index b9bd23b3b1..cc30723f58 100644
--- a/src/components/SearchInput/__snapshots__/SearchInput.spec.js.snap
+++ b/src/components/SearchInput/__snapshots__/SearchInput.spec.js.snap
@@ -11,11 +11,11 @@ exports[`SearchInput should grey out icon when disabled 1`] = `
   position: absolute;
   top: 1px;
   left: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-1 {
@@ -92,17 +92,16 @@ label + .circuit-3 {
     <svg
       class="circuit-0"
       fill="none"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M11 17a6 6 0 100-12 6 6 0 000 12zm4.5-1.5L19 19"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
+        clip-rule="evenodd"
+        d="M2 7a5 5 0 1110 0A5 5 0 012 7zm5-7a7 7 0 104.192 12.606l3.1 3.101a1 1 0 001.415-1.414l-3.1-3.1A7 7 0 007 0z"
+        fill="currentColor"
+        fill-rule="evenodd"
       />
     </svg>
     <input
@@ -140,11 +139,11 @@ label + .circuit-3 {
   position: absolute;
   top: 1px;
   left: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-1 {
@@ -205,17 +204,16 @@ label + .circuit-3 {
     <svg
       class="circuit-0"
       fill="none"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M11 17a6 6 0 100-12 6 6 0 000 12zm4.5-1.5L19 19"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
+        clip-rule="evenodd"
+        d="M2 7a5 5 0 1110 0A5 5 0 012 7zm5-7a7 7 0 104.192 12.606l3.1 3.101a1 1 0 001.415-1.414l-3.1-3.1A7 7 0 007 0z"
+        fill="currentColor"
+        fill-rule="evenodd"
       />
     </svg>
     <input
diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js
index ae9f892775..602f464553 100644
--- a/src/components/Select/Select.js
+++ b/src/components/Select/Select.js
@@ -89,10 +89,10 @@ const suffixBaseStyles = ({ theme }) => css`
   z-index: 40;
   pointer-events: none;
   position: absolute;
-  ${size(theme.iconSizes.mega)};
+  ${size(theme.spacings.peta)};
   top: 1px;
   right: 1px;
-  margin: ${theme.spacings.byte};
+  padding: ${theme.spacings.kilo};
 `;
 
 const suffixInvalidStyles = ({ theme, invalid }) =>
@@ -148,8 +148,8 @@ const prefixStyles = theme => css`
   top: 1px;
   left: 1px;
   z-index: 40;
-  ${size(theme.iconSizes.kilo)};
-  margin: ${theme.spacings.kilo};
+  ${size(theme.spacings.peta)};
+  padding: ${theme.spacings.kilo};
   pointer-events: none;
 `;
 
@@ -157,9 +157,7 @@ const selectPrefixStyles = ({ theme, hasPrefix }) =>
   hasPrefix &&
   css`
     label: select--prefix;
-    padding-left: calc(
-      ${theme.spacings.kilo} + ${theme.spacings.mega} + ${theme.spacings.kilo}
-    );
+    padding-left: ${theme.spacings.peta};
   `;
 
 const tooltipBaseStyles = css`
diff --git a/src/components/Select/__snapshots__/Select.spec.js.snap b/src/components/Select/__snapshots__/Select.spec.js.snap
index 5b7620d3f6..49ce08e0eb 100644
--- a/src/components/Select/__snapshots__/Select.spec.js.snap
+++ b/src/components/Select/__snapshots__/Select.spec.js.snap
@@ -52,11 +52,11 @@ exports[`Select should not render with invalid styles when also passed the disab
   z-index: 40;
   pointer-events: none;
   position: absolute;
-  height: 24px;
-  width: 24px;
+  height: 40px;
+  width: 40px;
   top: 1px;
   right: 1px;
-  margin: 8px;
+  padding: 12px;
 }
 
 .circuit-4 {
@@ -111,17 +111,16 @@ label + .circuit-4 {
     <svg
       class="circuit-2 circuit-3"
       fill="none"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M9 9l3-3 3 3m-6 6l3 3 3-3"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
+        clip-rule="evenodd"
+        d="M8.707 1.293a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L8 3.414l2.293 2.293a1 1 0 101.414-1.414l-3-3zm3 10.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 111.414-1.414L8 12.586l2.293-2.293a1 1 0 111.414 1.414z"
+        fill="currentColor"
+        fill-rule="evenodd"
       />
     </svg>
   </div>
@@ -153,11 +152,11 @@ label + .circuit-5 {
   z-index: 40;
   pointer-events: none;
   position: absolute;
-  height: 24px;
-  width: 24px;
+  height: 40px;
+  width: 40px;
   top: 1px;
   right: 1px;
-  margin: 8px;
+  padding: 12px;
 }
 
 .circuit-0 {
@@ -166,9 +165,9 @@ label + .circuit-5 {
   top: 1px;
   left: 1px;
   z-index: 40;
-  height: 16px;
-  width: 16px;
-  margin: 12px;
+  height: 40px;
+  width: 40px;
+  padding: 12px;
   pointer-events: none;
 }
 
@@ -194,7 +193,7 @@ label + .circuit-5 {
   white-space: nowrap;
   font-size: 16px;
   line-height: 24px;
-  padding-left: calc( 12px + 16px + 12px );
+  padding-left: 40px;
 }
 
 .circuit-1:focus,
@@ -251,17 +250,16 @@ label + .circuit-5 {
     <svg
       class="circuit-3 circuit-4"
       fill="none"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M9 9l3-3 3 3m-6 6l3 3 3-3"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
+        clip-rule="evenodd"
+        d="M8.707 1.293a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L8 3.414l2.293 2.293a1 1 0 101.414-1.414l-3-3zm3 10.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 111.414-1.414L8 12.586l2.293-2.293a1 1 0 111.414 1.414z"
+        fill="currentColor"
+        fill-rule="evenodd"
       />
     </svg>
   </div>
@@ -332,11 +330,11 @@ label + .circuit-6 {
   z-index: 40;
   pointer-events: none;
   position: absolute;
-  height: 24px;
-  width: 24px;
+  height: 40px;
+  width: 40px;
   top: 1px;
   right: 1px;
-  margin: 8px;
+  padding: 12px;
 }
 
 .circuit-4 {
@@ -415,17 +413,16 @@ label + .circuit-6 {
     <svg
       class="circuit-2 circuit-3"
       fill="none"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M9 9l3-3 3 3m-6 6l3 3 3-3"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
+        clip-rule="evenodd"
+        d="M8.707 1.293a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L8 3.414l2.293 2.293a1 1 0 101.414-1.414l-3-3zm3 10.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 111.414-1.414L8 12.586l2.293-2.293a1 1 0 111.414 1.414z"
+        fill="currentColor"
+        fill-rule="evenodd"
       />
     </svg>
     <div
@@ -501,11 +498,11 @@ label + .circuit-4 {
   z-index: 40;
   pointer-events: none;
   position: absolute;
-  height: 24px;
-  width: 24px;
+  height: 40px;
+  width: 40px;
   top: 1px;
   right: 1px;
-  margin: 8px;
+  padding: 12px;
 }
 
 <label
@@ -543,17 +540,16 @@ label + .circuit-4 {
     <svg
       class="circuit-2 circuit-3"
       fill="none"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M9 9l3-3 3 3m-6 6l3 3 3-3"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
+        clip-rule="evenodd"
+        d="M8.707 1.293a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L8 3.414l2.293 2.293a1 1 0 101.414-1.414l-3-3zm3 10.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 111.414-1.414L8 12.586l2.293-2.293a1 1 0 111.414 1.414z"
+        fill="currentColor"
+        fill-rule="evenodd"
       />
     </svg>
   </div>
@@ -612,11 +608,11 @@ exports[`Select should render with disabled styles when passed the disabled prop
   z-index: 40;
   pointer-events: none;
   position: absolute;
-  height: 24px;
-  width: 24px;
+  height: 40px;
+  width: 40px;
   top: 1px;
   right: 1px;
-  margin: 8px;
+  padding: 12px;
 }
 
 .circuit-4 {
@@ -671,17 +667,16 @@ label + .circuit-4 {
     <svg
       class="circuit-2 circuit-3"
       fill="none"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M9 9l3-3 3 3m-6 6l3 3 3-3"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
+        clip-rule="evenodd"
+        d="M8.707 1.293a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L8 3.414l2.293 2.293a1 1 0 101.414-1.414l-3-3zm3 10.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 111.414-1.414L8 12.586l2.293-2.293a1 1 0 111.414 1.414z"
+        fill="currentColor"
+        fill-rule="evenodd"
       />
     </svg>
   </div>
@@ -740,11 +735,11 @@ exports[`Select should render with inline styles when passed the inline prop 1`]
   z-index: 40;
   pointer-events: none;
   position: absolute;
-  height: 24px;
-  width: 24px;
+  height: 40px;
+  width: 40px;
   top: 1px;
   right: 1px;
-  margin: 8px;
+  padding: 12px;
 }
 
 .circuit-4 {
@@ -796,17 +791,16 @@ label + .circuit-4 {
     <svg
       class="circuit-2 circuit-3"
       fill="none"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M9 9l3-3 3 3m-6 6l3 3 3-3"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
+        clip-rule="evenodd"
+        d="M8.707 1.293a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L8 3.414l2.293 2.293a1 1 0 101.414-1.414l-3-3zm3 10.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 111.414-1.414L8 12.586l2.293-2.293a1 1 0 111.414 1.414z"
+        fill="currentColor"
+        fill-rule="evenodd"
       />
     </svg>
   </div>
@@ -879,11 +873,11 @@ label + .circuit-6 {
   z-index: 40;
   pointer-events: none;
   position: absolute;
-  height: 24px;
-  width: 24px;
+  height: 40px;
+  width: 40px;
   top: 1px;
   right: 1px;
-  margin: 8px;
+  padding: 12px;
   right: calc(1px + 24px);
 }
 
@@ -893,11 +887,11 @@ label + .circuit-6 {
   z-index: 40;
   pointer-events: none;
   position: absolute;
-  height: 24px;
-  width: 24px;
+  height: 40px;
+  width: 40px;
   top: 1px;
   right: 1px;
-  margin: 8px;
+  padding: 12px;
   color: #DB4D4D;
 }
 
@@ -936,34 +930,46 @@ label + .circuit-6 {
     <svg
       class="circuit-2 circuit-3"
       fill="none"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M9 9l3-3 3 3m-6 6l3 3 3-3"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
+        clip-rule="evenodd"
+        d="M8.707 1.293a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L8 3.414l2.293 2.293a1 1 0 101.414-1.414l-3-3zm3 10.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 111.414-1.414L8 12.586l2.293-2.293a1 1 0 111.414 1.414z"
+        fill="currentColor"
+        fill-rule="evenodd"
       />
     </svg>
     <svg
       class="circuit-4 circuit-5"
       fill="none"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path
-        d="M9.5 14.5l5-5m-5 0l5 5M12 19a7 7 0 100-14 7 7 0 000 14z"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-      />
+      <g
+        clip-path="url(#circle_cross_small_svg__clip0)"
+      >
+        <path
+          clip-rule="evenodd"
+          d="M2 8a6 6 0 1112 0A6 6 0 012 8zm6-8a8 8 0 100 16A8 8 0 008 0zM6.207 4.793a1 1 0 00-1.414 1.414L6.586 8 4.793 9.793a1 1 0 001.414 1.414L8 9.414l1.793 1.793a1 1 0 001.414-1.414L9.414 8l1.793-1.793a1 1 0 00-1.414-1.414L8 6.586 6.207 4.793z"
+          fill="currentColor"
+          fill-rule="evenodd"
+        />
+      </g>
+      <defs>
+        <clippath
+          id="circle_cross_small_svg__clip0"
+        >
+          <path
+            d="M0 0h16v16H0V0z"
+            fill="#fff"
+          />
+        </clippath>
+      </defs>
     </svg>
   </div>
 </label>
@@ -1021,11 +1027,11 @@ exports[`Select should render with no margin styles when passed the noMargin pro
   z-index: 40;
   pointer-events: none;
   position: absolute;
-  height: 24px;
-  width: 24px;
+  height: 40px;
+  width: 40px;
   top: 1px;
   right: 1px;
-  margin: 8px;
+  padding: 12px;
 }
 
 .circuit-4 {
@@ -1076,17 +1082,16 @@ label + .circuit-4 {
     <svg
       class="circuit-2 circuit-3"
       fill="none"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M9 9l3-3 3 3m-6 6l3 3 3-3"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
+        clip-rule="evenodd"
+        d="M8.707 1.293a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L8 3.414l2.293 2.293a1 1 0 101.414-1.414l-3-3zm3 10.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 111.414-1.414L8 12.586l2.293-2.293a1 1 0 111.414 1.414z"
+        fill="currentColor"
+        fill-rule="evenodd"
       />
     </svg>
   </div>
diff --git a/src/components/Sidebar/__snapshots__/Sidebar.spec.js.snap b/src/components/Sidebar/__snapshots__/Sidebar.spec.js.snap
index 87a842225f..1691921212 100644
--- a/src/components/Sidebar/__snapshots__/Sidebar.spec.js.snap
+++ b/src/components/Sidebar/__snapshots__/Sidebar.spec.js.snap
@@ -168,14 +168,14 @@ HTMLCollection [
   >
     <svg
       fill="none"
-      height="24"
+      height="16"
       role="presentation"
-      viewBox="0 0 24 24"
-      width="24"
+      viewBox="0 0 16 16"
+      width="16"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M7 7l10 10m0-10L7 17"
+        d="M3 3l10 10m0-10L3 13"
         stroke="currentColor"
         stroke-linecap="round"
         stroke-width="2"
@@ -342,14 +342,14 @@ HTMLCollection [
   >
     <svg
       fill="none"
-      height="24"
+      height="16"
       role="presentation"
-      viewBox="0 0 24 24"
-      width="24"
+      viewBox="0 0 16 16"
+      width="16"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M7 7l10 10m0-10L7 17"
+        d="M3 3l10 10m0-10L3 13"
         stroke="currentColor"
         stroke-linecap="round"
         stroke-width="2"
diff --git a/src/components/Sidebar/components/CloseButton/__snapshots__/CloseButton.spec.js.snap b/src/components/Sidebar/components/CloseButton/__snapshots__/CloseButton.spec.js.snap
index 60244a6b12..5995b1e319 100644
--- a/src/components/Sidebar/components/CloseButton/__snapshots__/CloseButton.spec.js.snap
+++ b/src/components/Sidebar/components/CloseButton/__snapshots__/CloseButton.spec.js.snap
@@ -95,14 +95,14 @@ exports[`CloseButton styles should render and match snapshot when not visible 1`
 >
   <svg
     fill="none"
-    height="24"
+    height="16"
     role="presentation"
-    viewBox="0 0 24 24"
-    width="24"
+    viewBox="0 0 16 16"
+    width="16"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M7 7l10 10m0-10L7 17"
+      d="M3 3l10 10m0-10L3 13"
       stroke="currentColor"
       stroke-linecap="round"
       stroke-width="2"
@@ -213,14 +213,14 @@ exports[`CloseButton styles should render and match snapshot when visible 1`] =
 >
   <svg
     fill="none"
-    height="24"
+    height="16"
     role="presentation"
-    viewBox="0 0 24 24"
-    width="24"
+    viewBox="0 0 16 16"
+    width="16"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M7 7l10 10m0-10L7 17"
+      d="M3 3l10 10m0-10L3 13"
       stroke="currentColor"
       stroke-linecap="round"
       stroke-width="2"
diff --git a/src/components/Table/__snapshots__/Table.spec.js.snap b/src/components/Table/__snapshots__/Table.spec.js.snap
index 29846923bc..a2e4720bc7 100644
--- a/src/components/Table/__snapshots__/Table.spec.js.snap
+++ b/src/components/Table/__snapshots__/Table.spec.js.snap
@@ -152,8 +152,8 @@ tbody .circuit-20:last-child td {
 }
 
 .circuit-0 {
-  margin-top: -7px;
-  margin-bottom: -7px;
+  margin-top: -3px;
+  margin-bottom: -3px;
 }
 
 .circuit-2 {
@@ -340,13 +340,13 @@ tbody .circuit-20:last-child td {
               <svg
                 class="circuit-0"
                 fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M8 14l4-4 4 4"
+                  d="M4 10l4-4 4 4"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -356,13 +356,13 @@ tbody .circuit-20:last-child td {
               <svg
                 class="circuit-0"
                 fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M8 10l4 4 4-4"
+                  d="M4 6l4 4 4-4"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -399,13 +399,13 @@ tbody .circuit-20:last-child td {
               <svg
                 class="circuit-0"
                 fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M8 14l4-4 4 4"
+                  d="M4 10l4-4 4 4"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -415,13 +415,13 @@ tbody .circuit-20:last-child td {
               <svg
                 class="circuit-0"
                 fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M8 10l4 4 4-4"
+                  d="M4 6l4 4 4-4"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -677,8 +677,8 @@ tbody .circuit-20:last-child td {
 }
 
 .circuit-0 {
-  margin-top: -7px;
-  margin-bottom: -7px;
+  margin-top: -3px;
+  margin-bottom: -3px;
 }
 
 .circuit-2 {
@@ -889,13 +889,13 @@ tbody .circuit-20:last-child td {
               <svg
                 class="circuit-0"
                 fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M8 14l4-4 4 4"
+                  d="M4 10l4-4 4 4"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -905,13 +905,13 @@ tbody .circuit-20:last-child td {
               <svg
                 class="circuit-0"
                 fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M8 10l4 4 4-4"
+                  d="M4 6l4 4 4-4"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -948,13 +948,13 @@ tbody .circuit-20:last-child td {
               <svg
                 class="circuit-0"
                 fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M8 14l4-4 4 4"
+                  d="M4 10l4-4 4 4"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -964,13 +964,13 @@ tbody .circuit-20:last-child td {
               <svg
                 class="circuit-0"
                 fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M8 10l4 4 4-4"
+                  d="M4 6l4 4 4-4"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -1188,8 +1188,8 @@ tbody .circuit-20:last-child td {
 }
 
 .circuit-0 {
-  margin-top: -7px;
-  margin-bottom: -7px;
+  margin-top: -3px;
+  margin-bottom: -3px;
 }
 
 .circuit-2 {
@@ -1472,13 +1472,13 @@ tbody .circuit-20:last-child td {
               <svg
                 class="circuit-0"
                 fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M8 14l4-4 4 4"
+                  d="M4 10l4-4 4 4"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -1488,13 +1488,13 @@ tbody .circuit-20:last-child td {
               <svg
                 class="circuit-0"
                 fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M8 10l4 4 4-4"
+                  d="M4 6l4 4 4-4"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -1531,13 +1531,13 @@ tbody .circuit-20:last-child td {
               <svg
                 class="circuit-0"
                 fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M8 14l4-4 4 4"
+                  d="M4 10l4-4 4 4"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -1547,13 +1547,13 @@ tbody .circuit-20:last-child td {
               <svg
                 class="circuit-0"
                 fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M8 10l4 4 4-4"
+                  d="M4 6l4 4 4-4"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -1731,8 +1731,8 @@ tbody .circuit-18:last-child td {
 }
 
 .circuit-0 {
-  margin-top: -7px;
-  margin-bottom: -7px;
+  margin-top: -3px;
+  margin-bottom: -3px;
 }
 
 .circuit-2 {
@@ -1892,13 +1892,13 @@ tbody .circuit-18:last-child td {
               <svg
                 class="circuit-0"
                 fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M8 14l4-4 4 4"
+                  d="M4 10l4-4 4 4"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -1908,13 +1908,13 @@ tbody .circuit-18:last-child td {
               <svg
                 class="circuit-0"
                 fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M8 10l4 4 4-4"
+                  d="M4 6l4 4 4-4"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -1943,13 +1943,13 @@ tbody .circuit-18:last-child td {
               <svg
                 class="circuit-0"
                 fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M8 14l4-4 4 4"
+                  d="M4 10l4-4 4 4"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -1959,13 +1959,13 @@ tbody .circuit-18:last-child td {
               <svg
                 class="circuit-0"
                 fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M8 10l4 4 4-4"
+                  d="M4 6l4 4 4-4"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -2217,8 +2217,8 @@ tbody .circuit-20:last-child td {
 }
 
 .circuit-0 {
-  margin-top: -7px;
-  margin-bottom: -7px;
+  margin-top: -3px;
+  margin-bottom: -3px;
 }
 
 .circuit-2 {
@@ -2405,13 +2405,13 @@ tbody .circuit-20:last-child td {
               <svg
                 class="circuit-0"
                 fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M8 14l4-4 4 4"
+                  d="M4 10l4-4 4 4"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -2421,13 +2421,13 @@ tbody .circuit-20:last-child td {
               <svg
                 class="circuit-0"
                 fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M8 10l4 4 4-4"
+                  d="M4 6l4 4 4-4"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -2464,13 +2464,13 @@ tbody .circuit-20:last-child td {
               <svg
                 class="circuit-0"
                 fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M8 14l4-4 4 4"
+                  d="M4 10l4-4 4 4"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -2480,13 +2480,13 @@ tbody .circuit-20:last-child td {
               <svg
                 class="circuit-0"
                 fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M8 10l4 4 4-4"
+                  d="M4 6l4 4 4-4"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -2765,8 +2765,8 @@ tbody .circuit-20:last-child td {
 }
 
 .circuit-0 {
-  margin-top: -7px;
-  margin-bottom: -7px;
+  margin-top: -3px;
+  margin-bottom: -3px;
 }
 
 .circuit-2 {
@@ -2953,13 +2953,13 @@ tbody .circuit-20:last-child td {
               <svg
                 class="circuit-0"
                 fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M8 14l4-4 4 4"
+                  d="M4 10l4-4 4 4"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -2969,13 +2969,13 @@ tbody .circuit-20:last-child td {
               <svg
                 class="circuit-0"
                 fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M8 10l4 4 4-4"
+                  d="M4 6l4 4 4-4"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -3012,13 +3012,13 @@ tbody .circuit-20:last-child td {
               <svg
                 class="circuit-0"
                 fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M8 14l4-4 4 4"
+                  d="M4 10l4-4 4 4"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -3028,13 +3028,13 @@ tbody .circuit-20:last-child td {
               <svg
                 class="circuit-0"
                 fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M8 10l4 4 4-4"
+                  d="M4 6l4 4 4-4"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -3308,8 +3308,8 @@ tbody .circuit-20:last-child td {
 }
 
 .circuit-0 {
-  margin-top: -7px;
-  margin-bottom: -7px;
+  margin-top: -3px;
+  margin-bottom: -3px;
 }
 
 .circuit-2 {
@@ -3502,13 +3502,13 @@ tbody .circuit-20:last-child td {
               <svg
                 class="circuit-0"
                 fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M8 14l4-4 4 4"
+                  d="M4 10l4-4 4 4"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -3518,13 +3518,13 @@ tbody .circuit-20:last-child td {
               <svg
                 class="circuit-0"
                 fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M8 10l4 4 4-4"
+                  d="M4 6l4 4 4-4"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -3561,13 +3561,13 @@ tbody .circuit-20:last-child td {
               <svg
                 class="circuit-0"
                 fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M8 14l4-4 4 4"
+                  d="M4 10l4-4 4 4"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -3577,13 +3577,13 @@ tbody .circuit-20:last-child td {
               <svg
                 class="circuit-0"
                 fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M8 10l4 4 4-4"
+                  d="M4 6l4 4 4-4"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
diff --git a/src/components/Table/components/SortArrow/SortArrow.js b/src/components/Table/components/SortArrow/SortArrow.js
index 4187c91e7a..f3f2a60be9 100644
--- a/src/components/Table/components/SortArrow/SortArrow.js
+++ b/src/components/Table/components/SortArrow/SortArrow.js
@@ -54,8 +54,8 @@ const baseStyles = ({ theme }) => css`
 const Wrapper = styled.button(baseStyles);
 
 const iconStyles = () => css`
-  margin-top: -7px;
-  margin-bottom: -7px;
+  margin-top: -3px;
+  margin-bottom: -3px;
 `;
 
 const Label = styled('span')(hideVisually);
diff --git a/src/components/Table/components/SortArrow/__snapshots__/SortArrow.spec.js.snap b/src/components/Table/components/SortArrow/__snapshots__/SortArrow.spec.js.snap
index 46633eaee4..c9b3851e7d 100644
--- a/src/components/Table/components/SortArrow/__snapshots__/SortArrow.spec.js.snap
+++ b/src/components/Table/components/SortArrow/__snapshots__/SortArrow.spec.js.snap
@@ -42,8 +42,8 @@ exports[`SortArrow Style tests should render with ascending arrow styles 1`] = `
 }
 
 .circuit-0 {
-  margin-top: -7px;
-  margin-bottom: -7px;
+  margin-top: -3px;
+  margin-bottom: -3px;
 }
 
 .circuit-1 {
@@ -67,13 +67,13 @@ exports[`SortArrow Style tests should render with ascending arrow styles 1`] = `
   <svg
     class="circuit-0"
     fill="none"
-    height="24"
-    viewBox="0 0 24 24"
-    width="24"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M8 10l4 4 4-4"
+      d="M4 6l4 4 4-4"
       stroke="currentColor"
       stroke-linecap="round"
       stroke-linejoin="round"
@@ -130,8 +130,8 @@ exports[`SortArrow Style tests should render with both arrows styles 1`] = `
 }
 
 .circuit-0 {
-  margin-top: -7px;
-  margin-bottom: -7px;
+  margin-top: -3px;
+  margin-bottom: -3px;
 }
 
 .circuit-2 {
@@ -155,13 +155,13 @@ exports[`SortArrow Style tests should render with both arrows styles 1`] = `
   <svg
     class="circuit-0"
     fill="none"
-    height="24"
-    viewBox="0 0 24 24"
-    width="24"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M8 14l4-4 4 4"
+      d="M4 10l4-4 4 4"
       stroke="currentColor"
       stroke-linecap="round"
       stroke-linejoin="round"
@@ -171,13 +171,13 @@ exports[`SortArrow Style tests should render with both arrows styles 1`] = `
   <svg
     class="circuit-0"
     fill="none"
-    height="24"
-    viewBox="0 0 24 24"
-    width="24"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M8 10l4 4 4-4"
+      d="M4 6l4 4 4-4"
       stroke="currentColor"
       stroke-linecap="round"
       stroke-linejoin="round"
@@ -234,8 +234,8 @@ exports[`SortArrow Style tests should render with descending arrow styles 1`] =
 }
 
 .circuit-0 {
-  margin-top: -7px;
-  margin-bottom: -7px;
+  margin-top: -3px;
+  margin-bottom: -3px;
 }
 
 .circuit-1 {
@@ -259,13 +259,13 @@ exports[`SortArrow Style tests should render with descending arrow styles 1`] =
   <svg
     class="circuit-0"
     fill="none"
-    height="24"
-    viewBox="0 0 24 24"
-    width="24"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M8 14l4-4 4 4"
+      d="M4 10l4-4 4 4"
       stroke="currentColor"
       stroke-linecap="round"
       stroke-linejoin="round"
diff --git a/src/components/Table/components/TableHead/__snapshots__/TableHead.spec.js.snap b/src/components/Table/components/TableHead/__snapshots__/TableHead.spec.js.snap
index e6f484f7b7..8a45e6dedd 100644
--- a/src/components/Table/components/TableHead/__snapshots__/TableHead.spec.js.snap
+++ b/src/components/Table/components/TableHead/__snapshots__/TableHead.spec.js.snap
@@ -102,8 +102,8 @@ tbody .circuit-12:last-child td {
 }
 
 .circuit-0 {
-  margin-top: -7px;
-  margin-bottom: -7px;
+  margin-top: -3px;
+  margin-bottom: -3px;
 }
 
 .circuit-2 {
@@ -154,13 +154,13 @@ tbody .circuit-12:last-child td {
         <svg
           class="circuit-0"
           fill="none"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M8 14l4-4 4 4"
+            d="M4 10l4-4 4 4"
             stroke="currentColor"
             stroke-linecap="round"
             stroke-linejoin="round"
@@ -170,13 +170,13 @@ tbody .circuit-12:last-child td {
         <svg
           class="circuit-0"
           fill="none"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M8 10l4 4 4-4"
+            d="M4 6l4 4 4-4"
             stroke="currentColor"
             stroke-linecap="round"
             stroke-linejoin="round"
@@ -311,8 +311,8 @@ tbody .circuit-12:last-child td {
 }
 
 .circuit-0 {
-  margin-top: -7px;
-  margin-bottom: -7px;
+  margin-top: -3px;
+  margin-bottom: -3px;
 }
 
 .circuit-2 {
@@ -363,13 +363,13 @@ tbody .circuit-12:last-child td {
         <svg
           class="circuit-0"
           fill="none"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M8 14l4-4 4 4"
+            d="M4 10l4-4 4 4"
             stroke="currentColor"
             stroke-linecap="round"
             stroke-linejoin="round"
@@ -379,13 +379,13 @@ tbody .circuit-12:last-child td {
         <svg
           class="circuit-0"
           fill="none"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M8 10l4 4 4-4"
+            d="M4 6l4 4 4-4"
             stroke="currentColor"
             stroke-linecap="round"
             stroke-linejoin="round"
diff --git a/src/components/Table/components/TableHeader/__snapshots__/TableHeader.spec.js.snap b/src/components/Table/components/TableHeader/__snapshots__/TableHeader.spec.js.snap
index f2f666c630..91a64e2e83 100644
--- a/src/components/Table/components/TableHeader/__snapshots__/TableHeader.spec.js.snap
+++ b/src/components/Table/components/TableHeader/__snapshots__/TableHeader.spec.js.snap
@@ -194,8 +194,8 @@ exports[`TableHeader Style tests should render with sortable styles 1`] = `
 }
 
 .circuit-0 {
-  margin-top: -7px;
-  margin-bottom: -7px;
+  margin-top: -3px;
+  margin-bottom: -3px;
 }
 
 .circuit-2 {
@@ -226,13 +226,13 @@ exports[`TableHeader Style tests should render with sortable styles 1`] = `
     <svg
       class="circuit-0"
       fill="none"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M8 14l4-4 4 4"
+        d="M4 10l4-4 4 4"
         stroke="currentColor"
         stroke-linecap="round"
         stroke-linejoin="round"
@@ -242,13 +242,13 @@ exports[`TableHeader Style tests should render with sortable styles 1`] = `
     <svg
       class="circuit-0"
       fill="none"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M8 10l4 4 4-4"
+        d="M4 6l4 4 4-4"
         stroke="currentColor"
         stroke-linecap="round"
         stroke-linejoin="round"
@@ -307,8 +307,8 @@ exports[`TableHeader Style tests sortable + sorted should render with sortable +
 }
 
 .circuit-0 {
-  margin-top: -7px;
-  margin-bottom: -7px;
+  margin-top: -3px;
+  margin-bottom: -3px;
 }
 
 .circuit-1 {
@@ -393,13 +393,13 @@ exports[`TableHeader Style tests sortable + sorted should render with sortable +
     <svg
       class="circuit-0"
       fill="none"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M8 10l4 4 4-4"
+        d="M4 6l4 4 4-4"
         stroke="currentColor"
         stroke-linecap="round"
         stroke-linejoin="round"
@@ -458,8 +458,8 @@ exports[`TableHeader Style tests sortable + sorted should render with sortable +
 }
 
 .circuit-0 {
-  margin-top: -7px;
-  margin-bottom: -7px;
+  margin-top: -3px;
+  margin-bottom: -3px;
 }
 
 .circuit-1 {
@@ -544,13 +544,13 @@ exports[`TableHeader Style tests sortable + sorted should render with sortable +
     <svg
       class="circuit-0"
       fill="none"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M8 14l4-4 4 4"
+        d="M4 10l4-4 4 4"
         stroke="currentColor"
         stroke-linecap="round"
         stroke-linejoin="round"
diff --git a/src/components/Tag/__snapshots__/Tag.spec.js.snap b/src/components/Tag/__snapshots__/Tag.spec.js.snap
index 601d78979b..8a8f0034c2 100644
--- a/src/components/Tag/__snapshots__/Tag.spec.js.snap
+++ b/src/components/Tag/__snapshots__/Tag.spec.js.snap
@@ -175,14 +175,14 @@ exports[`Tag when is selected should change the close icon color 1`] = `
   >
     <svg
       fill="none"
-      height="24"
+      height="16"
       role="presentation"
-      viewBox="0 0 24 24"
-      width="24"
+      viewBox="0 0 16 16"
+      width="16"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M7 7l10 10m0-10L7 17"
+        d="M3 3l10 10m0-10L3 13"
         stroke="currentColor"
         stroke-linecap="round"
         stroke-width="2"
diff --git a/src/components/TextArea/__snapshots__/TextArea.spec.js.snap b/src/components/TextArea/__snapshots__/TextArea.spec.js.snap
index d8c8392a03..87a232ac9f 100644
--- a/src/components/TextArea/__snapshots__/TextArea.spec.js.snap
+++ b/src/components/TextArea/__snapshots__/TextArea.spec.js.snap
@@ -116,11 +116,11 @@ label + .circuit-5 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-2 {
@@ -237,19 +237,32 @@ label + .circuit-5 {
       <svg
         class="circuit-2"
         fill="none"
-        height="24"
+        height="16"
         role="img"
-        viewBox="0 0 24 24"
-        width="24"
+        viewBox="0 0 16 16"
+        width="16"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M9.5 14.5l5-5m-5 0l5 5M12 19a7 7 0 100-14 7 7 0 000 14z"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-        />
+        <g
+          clip-path="url(#circle_cross_small_svg__clip0)"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M2 8a6 6 0 1112 0A6 6 0 012 8zm6-8a8 8 0 100 16A8 8 0 008 0zM6.207 4.793a1 1 0 00-1.414 1.414L6.586 8 4.793 9.793a1 1 0 001.414 1.414L8 9.414l1.793 1.793a1 1 0 001.414-1.414L9.414 8l1.793-1.793a1 1 0 00-1.414-1.414L8 6.586 6.207 4.793z"
+            fill="currentColor"
+            fill-rule="evenodd"
+          />
+        </g>
+        <defs>
+          <clippath
+            id="circle_cross_small_svg__clip0"
+          >
+            <path
+              d="M0 0h16v16H0V0z"
+              fill="#fff"
+            />
+          </clippath>
+        </defs>
       </svg>
     </div>
   </div>
@@ -283,11 +296,11 @@ label + .circuit-5 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-2 {
@@ -387,19 +400,32 @@ label + .circuit-5 {
       <svg
         class="circuit-2"
         fill="none"
-        height="24"
+        height="16"
         role="img"
-        viewBox="0 0 24 24"
-        width="24"
+        viewBox="0 0 16 16"
+        width="16"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M9.5 14.5l5-5m-5 0l5 5M12 19a7 7 0 100-14 7 7 0 000 14z"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-        />
+        <g
+          clip-path="url(#circle_cross_small_svg__clip0)"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M2 8a6 6 0 1112 0A6 6 0 012 8zm6-8a8 8 0 100 16A8 8 0 008 0zM6.207 4.793a1 1 0 00-1.414 1.414L6.586 8 4.793 9.793a1 1 0 001.414 1.414L8 9.414l1.793 1.793a1 1 0 001.414-1.414L9.414 8l1.793-1.793a1 1 0 00-1.414-1.414L8 6.586 6.207 4.793z"
+            fill="currentColor"
+            fill-rule="evenodd"
+          />
+        </g>
+        <defs>
+          <clippath
+            id="circle_cross_small_svg__clip0"
+          >
+            <path
+              d="M0 0h16v16H0V0z"
+              fill="#fff"
+            />
+          </clippath>
+        </defs>
       </svg>
     </div>
   </div>
@@ -481,11 +507,11 @@ label + .circuit-6 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-4 {
@@ -628,11 +654,11 @@ label + .circuit-4 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 <label
@@ -729,11 +755,11 @@ label + .circuit-4 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 <label
@@ -830,11 +856,11 @@ label + .circuit-4 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 <label
@@ -1008,11 +1034,11 @@ exports[`TextArea should render with inline styles when passed the inline prop 1
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-4 {
@@ -1075,11 +1101,11 @@ label + .circuit-5 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-0 {
@@ -1176,19 +1202,32 @@ label + .circuit-5 {
       <svg
         class="circuit-2"
         fill="none"
-        height="24"
+        height="16"
         role="img"
-        viewBox="0 0 24 24"
-        width="24"
+        viewBox="0 0 16 16"
+        width="16"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M9.5 14.5l5-5m-5 0l5 5M12 19a7 7 0 100-14 7 7 0 000 14z"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-        />
+        <g
+          clip-path="url(#circle_cross_small_svg__clip0)"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M2 8a6 6 0 1112 0A6 6 0 012 8zm6-8a8 8 0 100 16A8 8 0 008 0zM6.207 4.793a1 1 0 00-1.414 1.414L6.586 8 4.793 9.793a1 1 0 001.414 1.414L8 9.414l1.793 1.793a1 1 0 001.414-1.414L9.414 8l1.793-1.793a1 1 0 00-1.414-1.414L8 6.586 6.207 4.793z"
+            fill="currentColor"
+            fill-rule="evenodd"
+          />
+        </g>
+        <defs>
+          <clippath
+            id="circle_cross_small_svg__clip0"
+          >
+            <path
+              d="M0 0h16v16H0V0z"
+              fill="#fff"
+            />
+          </clippath>
+        </defs>
       </svg>
     </div>
   </div>
@@ -1258,11 +1297,11 @@ exports[`TextArea should render with no margin styles when passed the noMargin p
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-4 {
@@ -1323,11 +1362,11 @@ label + .circuit-4 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-0 {
@@ -1477,11 +1516,11 @@ label + .circuit-5 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-2 {
@@ -1509,26 +1548,32 @@ label + .circuit-5 {
       <svg
         class="circuit-2"
         fill="none"
-        height="24"
+        height="16"
         role="img"
-        viewBox="0 0 24 24"
-        width="24"
+        viewBox="0 0 16 16"
+        width="16"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M9.031 12.532l2 2 4-5"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-        />
-        <path
-          d="M12 19a7 7 0 100-14 7 7 0 000 14z"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-        />
+        <g
+          clip-path="url(#circle_checkmark_small_svg__clip0)"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M2 8a6 6 0 1112 0A6 6 0 012 8zm6-8a8 8 0 100 16A8 8 0 008 0zm3.812 6.156a1 1 0 00-1.562-1.249L6.948 9.035l-1.21-1.21a1 1 0 00-1.414 1.414l2 2a1 1 0 001.488-.083l4-5z"
+            fill="currentColor"
+            fill-rule="evenodd"
+          />
+        </g>
+        <defs>
+          <clippath
+            id="circle_checkmark_small_svg__clip0"
+          >
+            <path
+              d="M0 0h16v16H0V0z"
+              fill="#fff"
+            />
+          </clippath>
+        </defs>
       </svg>
     </div>
   </div>
@@ -1631,11 +1676,11 @@ label + .circuit-5 {
   position: absolute;
   top: 1px;
   right: 1px;
-  margin: 8px;
   pointer-events: none;
   color: #5C656F;
-  height: 24px;
-  width: 24px;
+  padding: 12px;
+  height: 40px;
+  width: 40px;
 }
 
 .circuit-2 {
@@ -1663,19 +1708,32 @@ label + .circuit-5 {
       <svg
         class="circuit-2"
         fill="none"
-        height="24"
+        height="16"
         role="img"
-        viewBox="0 0 24 24"
-        width="24"
+        viewBox="0 0 16 16"
+        width="16"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M12 12.5V8m0 8v-.5m0 3.5a7 7 0 100-14 7 7 0 000 14z"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-        />
+        <g
+          clip-path="url(#circle_warning_small_svg__clip0)"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M2 8a6 6 0 1112 0A6 6 0 012 8zm6-8a8 8 0 100 16A8 8 0 008 0zm1 4a1 1 0 00-2 0v4.5a1 1 0 002 0V4zm0 7.5a1 1 0 10-2 0v.5a1 1 0 102 0v-.5z"
+            fill="currentColor"
+            fill-rule="evenodd"
+          />
+        </g>
+        <defs>
+          <clippath
+            id="circle_warning_small_svg__clip0"
+          >
+            <path
+              d="M0 0h16v16H0V0z"
+              fill="#fff"
+            />
+          </clippath>
+        </defs>
       </svg>
     </div>
   </div>
diff --git a/yarn.lock b/yarn.lock
index 0fe995a0bf..da313a1af1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2602,10 +2602,10 @@
     semantic-release "^16.0.0"
     yargs "^12.0.5"
 
-"@sumup/icons@^1.0.0-canary.7":
-  version "1.0.0-canary.13"
-  resolved "https://registry.yarnpkg.com/@sumup/icons/-/icons-1.0.0-canary.13.tgz#51253d7a6c277b04e1bd9b83bfee33f46aa90f3a"
-  integrity sha512-wBe1clg+qRPbhMTyneilZPPkfHAgsn2YSNmnAuT/n4n04yYUiYbmgADFApCqI6wslIYHAYJcxbeTaIe8IQVv3A==
+"@sumup/icons@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@sumup/icons/-/icons-1.0.0.tgz#4acba5ea8038b7cef234cc2628f5bb74ba2aa0f0"
+  integrity sha512-SpY/Tyxv7sSOc0TMiTjGycjnaFvOHrt4ltHYdhB73v44zhBh5R7qm23NS7uIRpoioGhcVKTkIiAg6cxrhUhBYQ==
 
 "@sumup/intl@^1.0.0":
   version "1.0.0"