Make SVG size in buttons smaller

Author: MichaelArestad

src/components/Button.stories.tsx

@@ -43,6 +43,35 @@ export const Sizes = () => (
   </>
 );
 
+export const ContainsSVG = () => (
+  <>
+    <Button appearance="secondary">
+      <Icon icon="lock" />
+      Default
+    </Button>
+    <Button appearance="secondary" size="small">
+      <Icon icon="lock" />
+      Small
+    </Button>
+    <Button appearance="secondary">
+      <Icon icon="check" />
+      Default
+    </Button>
+    <Button appearance="secondary" size="small">
+      <Icon icon="check" />
+      Small
+    </Button>
+    <Button appearance="secondary">
+      <Icon icon="grid" />
+      Default
+    </Button>
+    <Button appearance="secondary" size="small">
+      <Icon icon="grid" />
+      Small
+    </Button>
+  </>
+);
+
 export const Loading = () => (
   <>
     <Button appearance="primary" isLoading>

src/components/Button.tsx

@@ -88,12 +88,12 @@ export const StyledButton = styled.button<StylingProps & { children: ReactElemen
   }
 
   svg {
-    height: ${(props) => (props.size === SIZES.SMALL ? '14' : '16')}px;
-    width: ${(props) => (props.size === SIZES.SMALL ? '14' : '16')}px;
+    height: ${(props) => (props.size === SIZES.SMALL ? '12' : '14')}px;
+    width: ${(props) => (props.size === SIZES.SMALL ? '12' : '14')}px;
     vertical-align: top;
     margin-right: ${(props) => (props.size === SIZES.SMALL ? '4' : '6')}px;
-    margin-top: ${(props) => (props.size === SIZES.SMALL ? '-1' : '-2')}px;
-    margin-bottom: ${(props) => (props.size === SIZES.SMALL ? '-1' : '-2')}px;
+    margin-top: ${(props) => (props.size === SIZES.SMALL ? '0' : '-1')}px;
+    margin-bottom: ${(props) => (props.size === SIZES.SMALL ? '0' : '-2')}px;
 
     /* Necessary for js mouse events to not glitch out when hovering on svgs */
     pointer-events: none;