diff --git a/catalog/pages/buttons/index.js b/catalog/pages/buttons/index.js
index d86ba9379..f4b17a454 100644
--- a/catalog/pages/buttons/index.js
+++ b/catalog/pages/buttons/index.js
@@ -5,7 +5,7 @@ import { Container, Row, Column } from "../../../src/components/Grid";
 import Spacing from "../../../src/components/Spacing";
 import { Button, Badge, RatingBadge } from "../../../src/components/Button";
 import ButtonWithLoading from "../../../src/components/ButtonWithLoading";
-import { ChevronIcon, StarIcon } from "../../../src/components/Icons";
+import { ChevronIcon, HomeIcon, StarIcon } from "../../../src/components/Icons";
 import { colors, themes } from "../../../src/theme";
 
 const starIconStyles = { marginRight: "2px" };
@@ -18,6 +18,7 @@ export default {
     ButtonWithLoading,
     Badge,
     ChevronIcon,
+    HomeIcon,
     StarIcon,
     RatingBadge,
     colors,
diff --git a/catalog/pages/buttons/index.md b/catalog/pages/buttons/index.md
index f82c9c294..d50ff5980 100644
--- a/catalog/pages/buttons/index.md
+++ b/catalog/pages/buttons/index.md
@@ -18,6 +18,10 @@ rows:
   - Prop: href
     Type: string
     Notes: Determines wether underlying HTML element should be an `a`
+  - Prop: icon
+    Type: node
+    Default: null
+    Notes: Render as an icon with Button's children. Icon of height `16px` works best with `regular` sized button
   - Prop: children
     Type: node
     Default:
@@ -114,7 +118,7 @@ rows:
             <Column small={6}>
                 <Button variant="outlineGray" size="small">My cool button</Button>
                 <Spacing top={{small: "moderate"}}>
-                    <Button variant="outlineGray">My cool button</Button>
+                    <Button variant="outlineGray" icon={<HomeIcon size="small" />}>Button with icon</Button>
                 </Spacing>
                 <Spacing top={{small: "moderate"}}>
                     <Button variant="outlineGray" size="large">My cool button</Button>
diff --git a/src/components/Button/Base.styles.tsx b/src/components/Button/Base.styles.tsx
index e1108717c..ba452033f 100644
--- a/src/components/Button/Base.styles.tsx
+++ b/src/components/Button/Base.styles.tsx
@@ -1,7 +1,7 @@
 import styled, { StyledComponent } from "styled-components";
 
 import { SPECIAL, Size, ButtonVariant } from "../constants";
-import { typography, constants } from "../../theme";
+import { typography, constants, spacing } from "../../theme";
 import { getThemeValue } from "../../utils";
 
 const colorVariants = {
@@ -139,10 +139,16 @@ export const StyledButton = styled.button<StyledButtonProps>`
       variant === SPECIAL ? "opacity: 0.4;" : "opacity: 0.2;"};
   }
 
-
   &.noFocus:focus {
     box-shadow: none;
   }
+
+  &.iconed svg{
+    position: relative;
+    display: inline-block;
+    vertical-align: text-top;
+    margin-right: ${spacing.cozy};
+  }
 `;
 
 StyledButton.defaultProps = {
diff --git a/src/components/Button/Base.tsx b/src/components/Button/Base.tsx
index 65eb6d222..64d916c81 100644
--- a/src/components/Button/Base.tsx
+++ b/src/components/Button/Base.tsx
@@ -17,6 +17,7 @@ export interface ButtonProps {
   readonly className?: string;
   readonly variant: ButtonVariant;
   readonly size: Size;
+  readonly icon: any;
 }
 
 export interface ButtonLinkProps extends ButtonProps {
@@ -35,12 +36,14 @@ class Button extends Component<ButtonProps> {
   static propTypes: ValidationMap<PropsWithChildren<ButtonProps>> = {
     variant: PropTypes.oneOf(BUTTON_VARIANTS),
     size: PropTypes.oneOf(SIZES),
+    icon: PropTypes.node,
     children: PropTypes.node.isRequired
   };
 
   static defaultProps: ButtonProps = {
     size: REGULAR,
-    variant: STANDARD
+    variant: STANDARD,
+    icon: null
   };
 
   componentDidMount() {
@@ -76,7 +79,7 @@ class Button extends Component<ButtonProps> {
   button = React.createRef<HTMLButtonElement>();
 
   render() {
-    const { variant, size, children, ...rest } = this.props;
+    const { variant, size, icon, children, ...rest } = this.props;
 
     if (isButtonLinkProps(this.props)) {
       const { rel, target } = this.props;
@@ -88,8 +91,10 @@ class Button extends Component<ButtonProps> {
           size={size}
           rel={validatedRel}
           as="a"
+          className={`${icon ? "iconed" : ""}`}
           {...rest}
         >
+          {icon}
           {children}
         </StyledButtonLink>
       );
@@ -100,9 +105,10 @@ class Button extends Component<ButtonProps> {
         variant={variant}
         size={size}
         {...rest}
-        className={`${rest.className || ""} noFocus`}
+        className={`${rest.className || ""} ${icon ? "iconed" : ""} noFocus`}
         ref={this.button}
       >
+        {icon}
         {children}
       </StyledButton>
     );
diff --git a/src/components/Button/__tests__/__snapshots__/Base.spec.js.snap b/src/components/Button/__tests__/__snapshots__/Base.spec.js.snap
index 8d9078607..a1cff1c6f 100644
--- a/src/components/Button/__tests__/__snapshots__/Base.spec.js.snap
+++ b/src/components/Button/__tests__/__snapshots__/Base.spec.js.snap
@@ -55,6 +55,13 @@ exports[`<Button /> renders link button correctly 1`] = `
   box-shadow: none;
 }
 
+.c0.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 <a
   className="c0"
   href="/"
@@ -116,8 +123,15 @@ exports[`<Button /> renders outline large size button correctly 1`] = `
   box-shadow: none;
 }
 
+.c0.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 <button
-  className=" noFocus c0"
+  className="  noFocus c0"
   size="large"
 >
   Dummy Label
@@ -176,8 +190,15 @@ exports[`<Button /> renders outline regular size button correctly 1`] = `
   box-shadow: none;
 }
 
+.c0.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 <button
-  className=" noFocus c0"
+  className="  noFocus c0"
   size="regular"
 >
   Dummy Label
@@ -236,8 +257,15 @@ exports[`<Button /> renders outline regular size disabled button correctly 1`] =
   box-shadow: none;
 }
 
+.c0.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 <button
-  className=" noFocus c0"
+  className="  noFocus c0"
   disabled={true}
   size="regular"
 >
@@ -297,8 +325,15 @@ exports[`<Button /> renders outline small size button correctly 1`] = `
   box-shadow: none;
 }
 
+.c0.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 <button
-  className=" noFocus c0"
+  className="  noFocus c0"
   size="small"
 >
   Dummy Label
@@ -357,8 +392,15 @@ exports[`<Button /> renders special large size button correctly 1`] = `
   box-shadow: none;
 }
 
+.c0.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 <button
-  className=" noFocus c0"
+  className="  noFocus c0"
   size="large"
 >
   Dummy Label
@@ -417,8 +459,15 @@ exports[`<Button /> renders special regular size button correctly 1`] = `
   box-shadow: none;
 }
 
+.c0.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 <button
-  className=" noFocus c0"
+  className="  noFocus c0"
   size="regular"
 >
   Dummy Label
@@ -477,8 +526,15 @@ exports[`<Button /> renders special regular size disabled button correctly 1`] =
   box-shadow: none;
 }
 
+.c0.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 <button
-  className=" noFocus c0"
+  className="  noFocus c0"
   disabled={true}
   size="regular"
 >
@@ -538,8 +594,15 @@ exports[`<Button /> renders special small size button correctly 1`] = `
   box-shadow: none;
 }
 
+.c0.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 <button
-  className=" noFocus c0"
+  className="  noFocus c0"
   size="small"
 >
   Dummy Label
@@ -598,8 +661,15 @@ exports[`<Button /> renders standard large size button correctly 1`] = `
   box-shadow: none;
 }
 
+.c0.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 <button
-  className=" noFocus c0"
+  className="  noFocus c0"
   size="large"
 >
   Dummy Label
@@ -658,8 +728,15 @@ exports[`<Button /> renders standard regular size button correctly 1`] = `
   box-shadow: none;
 }
 
+.c0.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 <button
-  className=" noFocus c0"
+  className="  noFocus c0"
   size="regular"
 >
   Dummy Label
@@ -718,8 +795,15 @@ exports[`<Button /> renders standard regular size disabled button correctly 1`]
   box-shadow: none;
 }
 
+.c0.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 <button
-  className=" noFocus c0"
+  className="  noFocus c0"
   disabled={true}
   size="regular"
 >
@@ -779,8 +863,15 @@ exports[`<Button /> renders standard small size button correctly 1`] = `
   box-shadow: none;
 }
 
+.c0.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 <button
-  className=" noFocus c0"
+  className="  noFocus c0"
   size="small"
 >
   Dummy Label
@@ -839,8 +930,15 @@ exports[`<Button /> renders transparent large size button correctly 1`] = `
   box-shadow: none;
 }
 
+.c0.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 <button
-  className=" noFocus c0"
+  className="  noFocus c0"
   size="large"
 >
   Dummy Label
@@ -899,8 +997,15 @@ exports[`<Button /> renders transparent regular size button correctly 1`] = `
   box-shadow: none;
 }
 
+.c0.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 <button
-  className=" noFocus c0"
+  className="  noFocus c0"
   size="regular"
 >
   Dummy Label
@@ -959,8 +1064,15 @@ exports[`<Button /> renders transparent regular size disabled button correctly 1
   box-shadow: none;
 }
 
+.c0.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 <button
-  className=" noFocus c0"
+  className="  noFocus c0"
   disabled={true}
   size="regular"
 >
@@ -1020,8 +1132,15 @@ exports[`<Button /> renders transparent small size button correctly 1`] = `
   box-shadow: none;
 }
 
+.c0.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 <button
-  className=" noFocus c0"
+  className="  noFocus c0"
   size="small"
 >
   Dummy Label
diff --git a/src/components/ButtonWithLoading/__tests__/__snapshots__/index.spec.js.snap b/src/components/ButtonWithLoading/__tests__/__snapshots__/index.spec.js.snap
index b421b6bd7..ae8af41fb 100644
--- a/src/components/ButtonWithLoading/__tests__/__snapshots__/index.spec.js.snap
+++ b/src/components/ButtonWithLoading/__tests__/__snapshots__/index.spec.js.snap
@@ -52,6 +52,13 @@ exports[`ButtonWithLoading should match snapshot 1`] = `
   box-shadow: none;
 }
 
+.c0.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 .c4 {
   display: inline-block;
   width: 6px;
@@ -89,7 +96,7 @@ exports[`ButtonWithLoading should match snapshot 1`] = `
 }
 
 <button
-  className=" noFocus c0"
+  className="  noFocus c0"
   size="regular"
 >
   <div
@@ -170,6 +177,13 @@ exports[`ButtonWithLoading should match snapshot with default values 1`] = `
   box-shadow: none;
 }
 
+.c0.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 .c2 {
   visibility: visible;
 }
@@ -179,7 +193,7 @@ exports[`ButtonWithLoading should match snapshot with default values 1`] = `
 }
 
 <button
-  className=" noFocus c0"
+  className="  noFocus c0"
   size="regular"
 >
   <div
diff --git a/src/components/CalendarView/__tests__/__snapshots__/index.spec.js.snap b/src/components/CalendarView/__tests__/__snapshots__/index.spec.js.snap
index 3b3e2b9c5..ff89f7f58 100644
--- a/src/components/CalendarView/__tests__/__snapshots__/index.spec.js.snap
+++ b/src/components/CalendarView/__tests__/__snapshots__/index.spec.js.snap
@@ -248,6 +248,13 @@ exports[`CalendarView should render without errors 1`] = `
   box-shadow: none;
 }
 
+.c24.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 .c10 {
   height: 36px;
   width: 100%;
diff --git a/src/components/Input/__tests__/__snapshots__/ButtonGroup.spec.js.snap b/src/components/Input/__tests__/__snapshots__/ButtonGroup.spec.js.snap
index e48bce906..df042f373 100644
--- a/src/components/Input/__tests__/__snapshots__/ButtonGroup.spec.js.snap
+++ b/src/components/Input/__tests__/__snapshots__/ButtonGroup.spec.js.snap
@@ -90,6 +90,13 @@ Object {
   box-shadow: none;
 }
 
+.c9.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 .c7 {
   width: 50%;
 }
@@ -189,7 +196,7 @@ Object {
             class="c7"
           >
             <button
-              class="button__selected c8 noFocus c9"
+              class="button__selected c8  noFocus c9"
               data-testid="test-button0"
             >
               All
@@ -199,7 +206,7 @@ Object {
             class="c7"
           >
             <button
-              class="c8 noFocus c9"
+              class="c8  noFocus c9"
               data-testid="test-button1"
             >
               Concerts
@@ -209,7 +216,7 @@ Object {
             class="c7"
           >
             <button
-              class="c8 noFocus c9"
+              class="c8  noFocus c9"
               data-testid="test-button2"
             >
               Button Label
@@ -343,6 +350,13 @@ Object {
   box-shadow: none;
 }
 
+.c9.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 .c7 {
   width: 50%;
 }
@@ -442,7 +456,7 @@ Object {
             class="c7"
           >
             <button
-              class="c8 noFocus c9"
+              class="c8  noFocus c9"
               data-testid="test-button0"
             >
               All
@@ -452,7 +466,7 @@ Object {
             class="c7"
           >
             <button
-              class="c8 noFocus c9"
+              class="c8  noFocus c9"
               data-testid="test-button1"
             >
               Concerts
@@ -462,7 +476,7 @@ Object {
             class="c7"
           >
             <button
-              class="c8 noFocus c9"
+              class="c8  noFocus c9"
               data-testid="test-button2"
             >
               Button Label
diff --git a/src/components/Input/__tests__/__snapshots__/QtySelector.spec.js.snap b/src/components/Input/__tests__/__snapshots__/QtySelector.spec.js.snap
index 0174fc458..94808e094 100644
--- a/src/components/Input/__tests__/__snapshots__/QtySelector.spec.js.snap
+++ b/src/components/Input/__tests__/__snapshots__/QtySelector.spec.js.snap
@@ -52,6 +52,13 @@ exports[`QtySelector decrements correctly 1`] = `
   box-shadow: none;
 }
 
+.c2.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -161,7 +168,7 @@ exports[`QtySelector decrements correctly 1`] = `
   class="c0"
 >
   <button
-    class="c1 noFocus c2"
+    class="c1  noFocus c2"
     disabled=""
   >
     <svg
@@ -791,7 +798,7 @@ exports[`QtySelector decrements correctly 1`] = `
     />
   </div>
   <button
-    class="c1 noFocus c2"
+    class="c1  noFocus c2"
   >
     <svg
       height="24"
@@ -870,6 +877,13 @@ exports[`QtySelector decrements from non-zero value correctly 1`] = `
   box-shadow: none;
 }
 
+.c2.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -979,7 +993,7 @@ exports[`QtySelector decrements from non-zero value correctly 1`] = `
   class="c0"
 >
   <button
-    class="c1 noFocus c2"
+    class="c1  noFocus c2"
     disabled=""
   >
     <svg
@@ -1609,7 +1623,7 @@ exports[`QtySelector decrements from non-zero value correctly 1`] = `
     />
   </div>
   <button
-    class="c1 noFocus c2"
+    class="c1  noFocus c2"
   >
     <svg
       height="24"
@@ -1688,6 +1702,13 @@ exports[`QtySelector decrements twice correctly 1`] = `
   box-shadow: none;
 }
 
+.c2.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1797,7 +1818,7 @@ exports[`QtySelector decrements twice correctly 1`] = `
   class="c0"
 >
   <button
-    class="c1 noFocus c2"
+    class="c1  noFocus c2"
     disabled=""
   >
     <svg
@@ -2427,7 +2448,7 @@ exports[`QtySelector decrements twice correctly 1`] = `
     />
   </div>
   <button
-    class="c1 noFocus c2"
+    class="c1  noFocus c2"
   >
     <svg
       height="24"
@@ -2506,6 +2527,13 @@ exports[`QtySelector handles case when input is deleted 1`] = `
   box-shadow: none;
 }
 
+.c2.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -2615,7 +2643,7 @@ exports[`QtySelector handles case when input is deleted 1`] = `
   class="c0"
 >
   <button
-    class="c1 noFocus c2"
+    class="c1  noFocus c2"
   >
     <svg
       height="24"
@@ -3244,7 +3272,7 @@ exports[`QtySelector handles case when input is deleted 1`] = `
     />
   </div>
   <button
-    class="c1 noFocus c2"
+    class="c1  noFocus c2"
   >
     <svg
       height="24"
@@ -3323,6 +3351,13 @@ exports[`QtySelector handles input value correctly 1`] = `
   box-shadow: none;
 }
 
+.c2.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -3432,7 +3467,7 @@ exports[`QtySelector handles input value correctly 1`] = `
   class="c0"
 >
   <button
-    class="c1 noFocus c2"
+    class="c1  noFocus c2"
   >
     <svg
       height="24"
@@ -4061,7 +4096,7 @@ exports[`QtySelector handles input value correctly 1`] = `
     />
   </div>
   <button
-    class="c1 noFocus c2"
+    class="c1  noFocus c2"
   >
     <svg
       height="24"
@@ -4140,6 +4175,13 @@ exports[`QtySelector handles input value longer than 2 chars correctly 1`] = `
   box-shadow: none;
 }
 
+.c2.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -4249,7 +4291,7 @@ exports[`QtySelector handles input value longer than 2 chars correctly 1`] = `
   class="c0"
 >
   <button
-    class="c1 noFocus c2"
+    class="c1  noFocus c2"
     disabled=""
   >
     <svg
@@ -4879,7 +4921,7 @@ exports[`QtySelector handles input value longer than 2 chars correctly 1`] = `
     />
   </div>
   <button
-    class="c1 noFocus c2"
+    class="c1  noFocus c2"
   >
     <svg
       height="24"
@@ -4958,6 +5000,13 @@ exports[`QtySelector handles input value longer than 2 chars correctly when usin
   box-shadow: none;
 }
 
+.c2.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -5067,7 +5116,7 @@ exports[`QtySelector handles input value longer than 2 chars correctly when usin
   class="c0"
 >
   <button
-    class="c1 noFocus c2"
+    class="c1  noFocus c2"
   >
     <svg
       height="24"
@@ -5696,7 +5745,7 @@ exports[`QtySelector handles input value longer than 2 chars correctly when usin
     />
   </div>
   <button
-    class="c1 noFocus c2"
+    class="c1  noFocus c2"
     disabled=""
   >
     <svg
@@ -5776,6 +5825,13 @@ exports[`QtySelector increments correctly 1`] = `
   box-shadow: none;
 }
 
+.c2.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -5885,7 +5941,7 @@ exports[`QtySelector increments correctly 1`] = `
   class="c0"
 >
   <button
-    class="c1 noFocus c2"
+    class="c1  noFocus c2"
   >
     <svg
       height="24"
@@ -6514,7 +6570,7 @@ exports[`QtySelector increments correctly 1`] = `
     />
   </div>
   <button
-    class="c1 noFocus c2"
+    class="c1  noFocus c2"
   >
     <svg
       height="24"
@@ -6593,6 +6649,13 @@ exports[`QtySelector increments twice correctly 1`] = `
   box-shadow: none;
 }
 
+.c2.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -6702,7 +6765,7 @@ exports[`QtySelector increments twice correctly 1`] = `
   class="c0"
 >
   <button
-    class="c1 noFocus c2"
+    class="c1  noFocus c2"
   >
     <svg
       height="24"
@@ -7331,7 +7394,7 @@ exports[`QtySelector increments twice correctly 1`] = `
     />
   </div>
   <button
-    class="c1 noFocus c2"
+    class="c1  noFocus c2"
   >
     <svg
       height="24"
@@ -7410,6 +7473,13 @@ exports[`QtySelector renders QtySelector correctly when there are min and max 1`
   box-shadow: none;
 }
 
+.c2.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -7519,7 +7589,7 @@ exports[`QtySelector renders QtySelector correctly when there are min and max 1`
   class="c0"
 >
   <button
-    class="c1 noFocus c2"
+    class="c1  noFocus c2"
   >
     <svg
       height="24"
@@ -7578,7 +7648,7 @@ exports[`QtySelector renders QtySelector correctly when there are min and max 1`
     />
   </div>
   <button
-    class="c1 noFocus c2"
+    class="c1  noFocus c2"
   >
     <svg
       height="24"
@@ -7657,6 +7727,13 @@ exports[`QtySelector renders default QtySelector 1`] = `
   box-shadow: none;
 }
 
+.c2.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -7766,7 +7843,7 @@ exports[`QtySelector renders default QtySelector 1`] = `
   class="c0"
 >
   <button
-    class="c1 noFocus c2"
+    class="c1  noFocus c2"
     disabled=""
   >
     <svg
@@ -8396,7 +8473,7 @@ exports[`QtySelector renders default QtySelector 1`] = `
     />
   </div>
   <button
-    class="c1 noFocus c2"
+    class="c1  noFocus c2"
   >
     <svg
       height="24"
@@ -8475,6 +8552,13 @@ exports[`QtySelector renders disabled QtySelector 1`] = `
   box-shadow: none;
 }
 
+.c2.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -8584,7 +8668,7 @@ exports[`QtySelector renders disabled QtySelector 1`] = `
   class="c0"
 >
   <button
-    class="c1 noFocus c2"
+    class="c1  noFocus c2"
     disabled=""
   >
     <svg
@@ -9314,7 +9398,7 @@ exports[`QtySelector renders disabled QtySelector 1`] = `
     />
   </div>
   <button
-    class="c1 noFocus c2"
+    class="c1  noFocus c2"
     disabled=""
   >
     <svg
@@ -9394,6 +9478,13 @@ exports[`QtySelector sets focus state to false when input looses focus 1`] = `
   box-shadow: none;
 }
 
+.c2.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -9503,7 +9594,7 @@ exports[`QtySelector sets focus state to false when input looses focus 1`] = `
   class="c0"
 >
   <button
-    class="c1 noFocus c2"
+    class="c1  noFocus c2"
     disabled=""
   >
     <svg
@@ -10133,7 +10224,7 @@ exports[`QtySelector sets focus state to false when input looses focus 1`] = `
     />
   </div>
   <button
-    class="c1 noFocus c2"
+    class="c1  noFocus c2"
   >
     <svg
       height="24"
@@ -10212,6 +10303,13 @@ exports[`QtySelector sets focus state to true after input is focused 1`] = `
   box-shadow: none;
 }
 
+.c2.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -10321,7 +10419,7 @@ exports[`QtySelector sets focus state to true after input is focused 1`] = `
   class="c0"
 >
   <button
-    class="c1 noFocus c2"
+    class="c1  noFocus c2"
     disabled=""
   >
     <svg
@@ -10356,7 +10454,7 @@ exports[`QtySelector sets focus state to true after input is focused 1`] = `
     />
   </div>
   <button
-    class="c1 noFocus c2"
+    class="c1  noFocus c2"
   >
     <svg
       height="24"
diff --git a/src/components/List/__tests__/__snapshots__/Container.spec.js.snap b/src/components/List/__tests__/__snapshots__/Container.spec.js.snap
index 87aeedcee..1d7507378 100644
--- a/src/components/List/__tests__/__snapshots__/Container.spec.js.snap
+++ b/src/components/List/__tests__/__snapshots__/Container.spec.js.snap
@@ -298,6 +298,13 @@ exports[`<ListContainer /> closes the bottomSheet for the row when clicked on cr
   box-shadow: none;
 }
 
+.c16.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 .c19 {
   box-sizing: border-box;
   padding-right: 8px;
@@ -2815,6 +2822,13 @@ exports[`<ListContainer /> closes the bottomSheet for the row when clicked on cr
   box-shadow: none;
 }
 
+.c16.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 .c19 {
   box-sizing: border-box;
   padding-right: 8px;
@@ -5334,6 +5348,13 @@ exports[`<ListContainer /> closes the bottomSheet for the row when clicked on cr
   box-shadow: none;
 }
 
+.c16.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 .c19 {
   box-sizing: border-box;
   padding-right: 8px;
@@ -7851,6 +7872,13 @@ exports[`<ListContainer /> closes the bottomSheet for the row when clicked on cr
   box-shadow: none;
 }
 
+.c16.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 .c19 {
   box-sizing: border-box;
   padding-right: 8px;
@@ -10319,6 +10347,13 @@ exports[`<ListContainer /> closes the modal when clicked on an expanded item on
   box-shadow: none;
 }
 
+.c16.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 .c19 {
   box-sizing: border-box;
   padding-right: 8px;
@@ -11483,6 +11518,13 @@ exports[`<ListContainer /> collapses the listRow after changing its order 1`] =
   box-shadow: none;
 }
 
+.c16.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 .c19 {
   box-sizing: border-box;
   padding-right: 8px;
@@ -14000,6 +14042,13 @@ exports[`<ListContainer /> collapses the listRow when clicked on collapse button
   box-shadow: none;
 }
 
+.c16.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 .c19 {
   box-sizing: border-box;
   padding-right: 8px;
@@ -16634,6 +16683,13 @@ exports[`<ListContainer /> expands the listRow when clicked on expand Link 1`] =
   box-shadow: none;
 }
 
+.c16.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 .c27 {
   box-sizing: border-box;
   padding-right: 8px;
@@ -19364,6 +19420,13 @@ exports[`<ListContainer /> expands the listRow when clicked on expand button 1`]
   box-shadow: none;
 }
 
+.c16.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 .c19 {
   box-sizing: border-box;
   padding-right: 8px;
@@ -21881,6 +21944,13 @@ exports[`<ListContainer /> opens the bottomSheet for the row when clicked on ove
   box-shadow: none;
 }
 
+.c16.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 .c19 {
   box-sizing: border-box;
   padding-right: 8px;
@@ -24338,6 +24408,13 @@ exports[`<ListContainer /> renders ListContainer correctly without any expanded
   box-shadow: none;
 }
 
+.c16.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 .c19 {
   box-sizing: border-box;
   padding-right: 8px;
diff --git a/src/components/List/__tests__/__snapshots__/Row.spec.js.snap b/src/components/List/__tests__/__snapshots__/Row.spec.js.snap
index b44c7b12b..f989b415a 100644
--- a/src/components/List/__tests__/__snapshots__/Row.spec.js.snap
+++ b/src/components/List/__tests__/__snapshots__/Row.spec.js.snap
@@ -577,6 +577,13 @@ exports[`<ListRow /> renders List Row with colored date correctly 1`] = `
   box-shadow: none;
 }
 
+.c16.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 .c19 {
   box-sizing: border-box;
   padding-right: 8px;
@@ -1507,6 +1514,13 @@ exports[`<ListRow /> renders List Row with label correctly 1`] = `
   box-shadow: none;
 }
 
+.c22.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 .c25 {
   box-sizing: border-box;
   padding-right: 8px;
@@ -2613,6 +2627,13 @@ exports[`<ListRow /> renders List Row with link correctly 1`] = `
   box-shadow: none;
 }
 
+.c16.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 .c27 {
   box-sizing: border-box;
   padding-right: 8px;
@@ -3588,6 +3609,13 @@ exports[`<ListRow /> renders List Row with styled button 1`] = `
   box-shadow: none;
 }
 
+.c16.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 .c19 {
   box-sizing: border-box;
   padding-right: 8px;
@@ -4437,6 +4465,13 @@ exports[`<ListRow /> renders List Row with title correctly when expanded 1`] = `
   box-shadow: none;
 }
 
+.c16.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 .c19 {
   box-sizing: border-box;
   padding-right: 8px;
@@ -5402,6 +5437,13 @@ exports[`<ListRow /> renders List Row with variant withLink correctly 1`] = `
   box-shadow: none;
 }
 
+.c16.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 .c27 {
   box-sizing: border-box;
   padding-right: 8px;
@@ -6377,6 +6419,13 @@ exports[`<ListRow /> renders standard List Row correctly 1`] = `
   box-shadow: none;
 }
 
+.c16.iconed svg {
+  position: relative;
+  display: inline-block;
+  vertical-align: text-top;
+  margin-right: 8px;
+}
+
 .c19 {
   box-sizing: border-box;
   padding-right: 8px;