diff --git a/components/createButtonComponent/index.tsx b/components/createButtonComponent/index.tsx
index dc52418a..970630ac 100644
--- a/components/createButtonComponent/index.tsx
+++ b/components/createButtonComponent/index.tsx
@@ -104,20 +104,20 @@ export const createButtonComponent = (
 
   const leftIconBase: TextStyle = {};
 
-  if (buttonStyle.horizontalPadding) {
-    leftIconBase.paddingLeft = buttonStyle.horizontalPadding;
+  if (buttonStyle.iconSpacing) {
+    leftIconBase.paddingLeft = buttonStyle.iconSpacing;
   }
 
   const rightIconBase: TextStyle = {};
 
-  if (buttonStyle.horizontalPadding) {
-    rightIconBase.paddingRight = buttonStyle.horizontalPadding;
+  if (buttonStyle.iconSpacing) {
+    rightIconBase.paddingRight = buttonStyle.iconSpacing;
   }
 
   const leftAndRightIconsBase: TextStyle = {};
 
-  if (buttonStyle.horizontalPadding) {
-    leftAndRightIconsBase.paddingHorizontal = buttonStyle.horizontalPadding;
+  if (buttonStyle.iconSpacing) {
+    leftAndRightIconsBase.paddingHorizontal = buttonStyle.iconSpacing;
   }
 
   const styles = StyleSheet.create({
diff --git a/components/createButtonComponent/readme.md b/components/createButtonComponent/readme.md
index 85b3824d..5701610e 100644
--- a/components/createButtonComponent/readme.md
+++ b/components/createButtonComponent/readme.md
@@ -13,6 +13,7 @@ const ExampleDropDown = createButtonComponent({
   fontSize: 16,
   horizontalPadding: 10,
   verticalPadding: 2,
+  iconSpacing: 5,
   default: {
     backgroundColor: `yellow`,
     color: `blue`,
diff --git a/components/createButtonComponent/unit.tsx b/components/createButtonComponent/unit.tsx
index cabad5e6..744bc857 100644
--- a/components/createButtonComponent/unit.tsx
+++ b/components/createButtonComponent/unit.tsx
@@ -12,6 +12,7 @@ test(`renders when enabled`, () => {
     fontSize: 16,
     horizontalPadding: 10,
     verticalPadding: 2,
+    iconSpacing: 7,
     default: {
       backgroundColor: `yellow`,
       color: `blue`,
@@ -79,6 +80,7 @@ test(`renders when disabled`, () => {
     fontSize: 16,
     horizontalPadding: 10,
     verticalPadding: 2,
+    iconSpacing: 7,
     default: {
       backgroundColor: `yellow`,
       color: `blue`,
@@ -147,6 +149,7 @@ test(`renders without borders when enabled`, () => {
     fontSize: 16,
     horizontalPadding: 10,
     verticalPadding: 2,
+    iconSpacing: 7,
     default: {
       backgroundColor: `yellow`,
       color: `blue`,
@@ -206,6 +209,7 @@ test(`renders without borders when disabled`, () => {
     fontSize: 16,
     horizontalPadding: 10,
     verticalPadding: 2,
+    iconSpacing: 7,
     default: {
       backgroundColor: `yellow`,
       color: `blue`,
@@ -265,6 +269,7 @@ test(`renders when enabled with identically sized borders`, () => {
     fontSize: 16,
     horizontalPadding: 10,
     verticalPadding: 2,
+    iconSpacing: 7,
     default: {
       backgroundColor: `yellow`,
       color: `blue`,
@@ -332,6 +337,7 @@ test(`renders when disabled with identically sized borders`, () => {
     fontSize: 16,
     horizontalPadding: 10,
     verticalPadding: 2,
+    iconSpacing: 7,
     default: {
       backgroundColor: `yellow`,
       color: `blue`,
@@ -399,6 +405,7 @@ test(`renders when enabled with a left icon`, () => {
     fontSize: 16,
     horizontalPadding: 10,
     verticalPadding: 2,
+    iconSpacing: 7,
     default: {
       backgroundColor: `yellow`,
       color: `blue`,
@@ -458,7 +465,7 @@ test(`renders when enabled with a left icon`, () => {
           fontFamily: `Example Font Family`,
           fontSize: 16,
           lineHeight: 22.4,
-          paddingLeft: 10,
+          paddingLeft: 7,
         }}
       >
         Example Content
@@ -474,6 +481,7 @@ test(`renders when disabled with a left icon`, () => {
     fontSize: 16,
     horizontalPadding: 10,
     verticalPadding: 2,
+    iconSpacing: 7,
     default: {
       backgroundColor: `yellow`,
       color: `blue`,
@@ -534,7 +542,7 @@ test(`renders when disabled with a left icon`, () => {
           fontFamily: `Example Font Family`,
           fontSize: 16,
           lineHeight: 22.4,
-          paddingLeft: 10,
+          paddingLeft: 7,
         }}
       >
         Example Content
@@ -550,6 +558,7 @@ test(`renders when enabled with a right icon`, () => {
     fontSize: 16,
     horizontalPadding: 10,
     verticalPadding: 2,
+    iconSpacing: 7,
     default: {
       backgroundColor: `yellow`,
       color: `blue`,
@@ -604,7 +613,7 @@ test(`renders when enabled with a right icon`, () => {
           fontFamily: `Example Font Family`,
           fontSize: 16,
           lineHeight: 22.4,
-          paddingRight: 10,
+          paddingRight: 7,
         }}
       >
         Example Content
@@ -625,6 +634,7 @@ test(`renders when disabled with a right icon`, () => {
     fontSize: 16,
     horizontalPadding: 10,
     verticalPadding: 2,
+    iconSpacing: 7,
     default: {
       backgroundColor: `yellow`,
       color: `blue`,
@@ -680,7 +690,7 @@ test(`renders when disabled with a right icon`, () => {
           fontFamily: `Example Font Family`,
           fontSize: 16,
           lineHeight: 22.4,
-          paddingRight: 10,
+          paddingRight: 7,
         }}
       >
         Example Content
@@ -701,6 +711,7 @@ test(`renders when enabled with left and right icons`, () => {
     fontSize: 16,
     horizontalPadding: 10,
     verticalPadding: 2,
+    iconSpacing: 7,
     default: {
       backgroundColor: `yellow`,
       color: `blue`,
@@ -760,7 +771,7 @@ test(`renders when enabled with left and right icons`, () => {
           fontFamily: `Example Font Family`,
           fontSize: 16,
           lineHeight: 22.4,
-          paddingHorizontal: 10,
+          paddingHorizontal: 7,
         }}
       >
         Example Content
@@ -781,6 +792,7 @@ test(`renders when disabled with left and right icons`, () => {
     fontSize: 16,
     horizontalPadding: 10,
     verticalPadding: 2,
+    iconSpacing: 7,
     default: {
       backgroundColor: `yellow`,
       color: `blue`,
@@ -841,7 +853,7 @@ test(`renders when disabled with left and right icons`, () => {
           fontFamily: `Example Font Family`,
           fontSize: 16,
           lineHeight: 22.4,
-          paddingHorizontal: 10,
+          paddingHorizontal: 7,
         }}
       >
         Example Content
@@ -862,6 +874,7 @@ test(`renders when enabled without vertical padding`, () => {
     fontSize: 16,
     horizontalPadding: 10,
     verticalPadding: 0,
+    iconSpacing: 7,
     default: {
       backgroundColor: `yellow`,
       color: `blue`,
@@ -928,6 +941,7 @@ test(`renders when disabled without vertical padding`, () => {
     fontSize: 16,
     horizontalPadding: 10,
     verticalPadding: 0,
+    iconSpacing: 7,
     default: {
       backgroundColor: `yellow`,
       color: `blue`,
@@ -995,6 +1009,7 @@ test(`renders when enabled without horizontal padding`, () => {
     fontSize: 16,
     horizontalPadding: 0,
     verticalPadding: 2,
+    iconSpacing: 7,
     default: {
       backgroundColor: `yellow`,
       color: `blue`,
@@ -1061,6 +1076,7 @@ test(`renders when disabled without horizontal padding`, () => {
     fontSize: 16,
     horizontalPadding: 0,
     verticalPadding: 2,
+    iconSpacing: 7,
     default: {
       backgroundColor: `yellow`,
       color: `blue`,
@@ -1128,6 +1144,7 @@ test(`renders when enabled without horizontal padding with a left icon`, () => {
     fontSize: 16,
     horizontalPadding: 0,
     verticalPadding: 2,
+    iconSpacing: 7,
     default: {
       backgroundColor: `yellow`,
       color: `blue`,
@@ -1186,6 +1203,7 @@ test(`renders when enabled without horizontal padding with a left icon`, () => {
           fontFamily: `Example Font Family`,
           fontSize: 16,
           lineHeight: 22.4,
+          paddingLeft: 7,
         }}
       >
         Example Content
@@ -1201,6 +1219,7 @@ test(`renders when disabled without horizontal padding with a left icon`, () =>
     fontSize: 16,
     horizontalPadding: 0,
     verticalPadding: 2,
+    iconSpacing: 7,
     default: {
       backgroundColor: `yellow`,
       color: `blue`,
@@ -1260,6 +1279,7 @@ test(`renders when disabled without horizontal padding with a left icon`, () =>
           fontFamily: `Example Font Family`,
           fontSize: 16,
           lineHeight: 22.4,
+          paddingLeft: 7,
         }}
       >
         Example Content
@@ -1275,6 +1295,7 @@ test(`renders when enabled without horizontal padding with a right icon`, () =>
     fontSize: 16,
     horizontalPadding: 0,
     verticalPadding: 2,
+    iconSpacing: 7,
     default: {
       backgroundColor: `yellow`,
       color: `blue`,
@@ -1328,6 +1349,7 @@ test(`renders when enabled without horizontal padding with a right icon`, () =>
           fontFamily: `Example Font Family`,
           fontSize: 16,
           lineHeight: 22.4,
+          paddingRight: 7,
         }}
       >
         Example Content
@@ -1348,6 +1370,7 @@ test(`renders when disabled without horizontal padding with a right icon`, () =>
     fontSize: 16,
     horizontalPadding: 0,
     verticalPadding: 2,
+    iconSpacing: 7,
     default: {
       backgroundColor: `yellow`,
       color: `blue`,
@@ -1402,6 +1425,7 @@ test(`renders when disabled without horizontal padding with a right icon`, () =>
           fontFamily: `Example Font Family`,
           fontSize: 16,
           lineHeight: 22.4,
+          paddingRight: 7,
         }}
       >
         Example Content
@@ -1422,6 +1446,7 @@ test(`renders when enabled without horizontal padding with left and right icons`
     fontSize: 16,
     horizontalPadding: 0,
     verticalPadding: 2,
+    iconSpacing: 7,
     default: {
       backgroundColor: `yellow`,
       color: `blue`,
@@ -1480,6 +1505,7 @@ test(`renders when enabled without horizontal padding with left and right icons`
           fontFamily: `Example Font Family`,
           fontSize: 16,
           lineHeight: 22.4,
+          paddingHorizontal: 7,
         }}
       >
         Example Content
@@ -1500,6 +1526,7 @@ test(`renders when disabled without horizontal padding with left and right icons
     fontSize: 16,
     horizontalPadding: 0,
     verticalPadding: 2,
+    iconSpacing: 7,
     default: {
       backgroundColor: `yellow`,
       color: `blue`,
@@ -1559,6 +1586,7 @@ test(`renders when disabled without horizontal padding with left and right icons
           fontFamily: `Example Font Family`,
           fontSize: 16,
           lineHeight: 22.4,
+          paddingHorizontal: 7,
         }}
       >
         Example Content
@@ -1579,6 +1607,7 @@ test(`renders when enabled without radius`, () => {
     fontSize: 16,
     horizontalPadding: 10,
     verticalPadding: 2,
+    iconSpacing: 7,
     default: {
       backgroundColor: `yellow`,
       color: `blue`,
@@ -1645,6 +1674,7 @@ test(`renders when disabled without radius`, () => {
     fontSize: 16,
     horizontalPadding: 10,
     verticalPadding: 2,
+    iconSpacing: 7,
     default: {
       backgroundColor: `yellow`,
       color: `blue`,
@@ -1705,3 +1735,603 @@ test(`renders when disabled without radius`, () => {
   );
   expect(onPress).not.toHaveBeenCalled();
 });
+
+test(`renders when enabled without icon spacing`, () => {
+  const Component = createButtonComponent({
+    fontFamily: `Example Font Family`,
+    fontSize: 16,
+    horizontalPadding: 10,
+    verticalPadding: 2,
+    iconSpacing: 0,
+    default: {
+      backgroundColor: `yellow`,
+      color: `blue`,
+      radius: 25,
+      border: {
+        width: 5,
+        color: `aquamarine`,
+      },
+    },
+    disabled: {
+      backgroundColor: `orange`,
+      color: `purple`,
+      radius: 7,
+      border: {
+        width: 2,
+        color: `aquamarine`,
+      },
+    },
+  });
+  const onPress = jest.fn();
+
+  const rendered = (
+    <Component
+      leftIcon={() => null}
+      rightIcon={() => null}
+      onPress={onPress}
+      disabled={false}
+    >
+      Example Content
+    </Component>
+  );
+
+  expect(unwrapRenderedFunctionComponent(rendered)).toEqual(
+    <Hitbox
+      disabled={false}
+      onPress={onPress}
+      style={{
+        backgroundColor: `yellow`,
+        borderRadius: 25,
+        paddingHorizontal: 10,
+        paddingVertical: 2,
+        borderWidth: 5,
+        borderColor: `aquamarine`,
+        alignItems: `center`,
+      }}
+    >
+      <Text
+        style={{
+          color: `blue`,
+          fontFamily: `Example Font Family`,
+          fontSize: 16,
+          lineHeight: 22.4,
+        }}
+      >
+        Example Content
+      </Text>
+    </Hitbox>
+  );
+  expect(onPress).not.toHaveBeenCalled();
+});
+
+test(`renders when disabled without icon spacing`, () => {
+  const Component = createButtonComponent({
+    fontFamily: `Example Font Family`,
+    fontSize: 16,
+    horizontalPadding: 10,
+    verticalPadding: 2,
+    iconSpacing: 70,
+    default: {
+      backgroundColor: `yellow`,
+      color: `blue`,
+      radius: 25,
+      border: {
+        width: 5,
+        color: `aquamarine`,
+      },
+    },
+    disabled: {
+      backgroundColor: `orange`,
+      color: `purple`,
+      radius: 7,
+      border: {
+        width: 2,
+        color: `aquamarine`,
+      },
+    },
+  });
+  const onPress = jest.fn();
+
+  const rendered = (
+    <Component
+      leftIcon={() => null}
+      rightIcon={() => null}
+      onPress={onPress}
+      disabled
+    >
+      Example Content
+    </Component>
+  );
+
+  expect(unwrapRenderedFunctionComponent(rendered)).toEqual(
+    <Hitbox
+      disabled
+      onPress={onPress}
+      style={{
+        backgroundColor: `orange`,
+        borderRadius: 7,
+        paddingHorizontal: 10,
+        paddingVertical: 2,
+        borderWidth: 2,
+        borderColor: `aquamarine`,
+        alignItems: `center`,
+        margin: 3,
+      }}
+    >
+      <Text
+        style={{
+          color: `purple`,
+          fontFamily: `Example Font Family`,
+          fontSize: 16,
+          lineHeight: 22.4,
+        }}
+      >
+        Example Content
+      </Text>
+    </Hitbox>
+  );
+  expect(onPress).not.toHaveBeenCalled();
+});
+
+test(`renders when enabled with a left icon without icon spacing`, () => {
+  const Component = createButtonComponent({
+    fontFamily: `Example Font Family`,
+    fontSize: 16,
+    horizontalPadding: 10,
+    verticalPadding: 2,
+    iconSpacing: 0,
+    default: {
+      backgroundColor: `yellow`,
+      color: `blue`,
+      radius: 25,
+      border: {
+        width: 5,
+        color: `aquamarine`,
+      },
+    },
+    disabled: {
+      backgroundColor: `orange`,
+      color: `purple`,
+      radius: 7,
+      border: {
+        width: 2,
+        color: `aquamarine`,
+      },
+    },
+  });
+  const onPress = jest.fn();
+
+  const rendered = (
+    <Component
+      leftIcon={(color) => <Text>Example Left Icon ({color})</Text>}
+      rightIcon={() => null}
+      onPress={onPress}
+      disabled={false}
+    >
+      Example Content
+    </Component>
+  );
+
+  expect(unwrapRenderedFunctionComponent(rendered)).toEqual(
+    <Hitbox
+      disabled={false}
+      onPress={onPress}
+      style={{
+        backgroundColor: `yellow`,
+        borderRadius: 25,
+        paddingHorizontal: 10,
+        paddingVertical: 2,
+        borderWidth: 5,
+        borderColor: `aquamarine`,
+        justifyContent: `center`,
+        alignItems: `center`,
+        flexDirection: `row`,
+      }}
+    >
+      <Text>
+        {`Example Left Icon (`}
+        {`blue`}
+        {`)`}
+      </Text>
+      <Text
+        style={{
+          color: `blue`,
+          fontFamily: `Example Font Family`,
+          fontSize: 16,
+          lineHeight: 22.4,
+        }}
+      >
+        Example Content
+      </Text>
+    </Hitbox>
+  );
+  expect(onPress).not.toHaveBeenCalled();
+});
+
+test(`renders when disabled with a left icon without icon spacing`, () => {
+  const Component = createButtonComponent({
+    fontFamily: `Example Font Family`,
+    fontSize: 16,
+    horizontalPadding: 10,
+    verticalPadding: 2,
+    iconSpacing: 0,
+    default: {
+      backgroundColor: `yellow`,
+      color: `blue`,
+      radius: 25,
+      border: {
+        width: 5,
+        color: `aquamarine`,
+      },
+    },
+    disabled: {
+      backgroundColor: `orange`,
+      color: `purple`,
+      radius: 7,
+      border: {
+        width: 2,
+        color: `aquamarine`,
+      },
+    },
+  });
+  const onPress = jest.fn();
+
+  const rendered = (
+    <Component
+      leftIcon={(color) => <Text>Example Left Icon ({color})</Text>}
+      rightIcon={() => null}
+      onPress={onPress}
+      disabled
+    >
+      Example Content
+    </Component>
+  );
+
+  expect(unwrapRenderedFunctionComponent(rendered)).toEqual(
+    <Hitbox
+      disabled
+      onPress={onPress}
+      style={{
+        backgroundColor: `orange`,
+        borderRadius: 7,
+        paddingHorizontal: 10,
+        paddingVertical: 2,
+        borderWidth: 2,
+        borderColor: `aquamarine`,
+        justifyContent: `center`,
+        alignItems: `center`,
+        margin: 3,
+        flexDirection: `row`,
+      }}
+    >
+      <Text>
+        {`Example Left Icon (`}
+        {`purple`}
+        {`)`}
+      </Text>
+      <Text
+        style={{
+          color: `purple`,
+          fontFamily: `Example Font Family`,
+          fontSize: 16,
+          lineHeight: 22.4,
+        }}
+      >
+        Example Content
+      </Text>
+    </Hitbox>
+  );
+  expect(onPress).not.toHaveBeenCalled();
+});
+
+test(`renders when enabled with a right icon without icon spacing`, () => {
+  const Component = createButtonComponent({
+    fontFamily: `Example Font Family`,
+    fontSize: 16,
+    horizontalPadding: 10,
+    verticalPadding: 2,
+    iconSpacing: 0,
+    default: {
+      backgroundColor: `yellow`,
+      color: `blue`,
+      radius: 25,
+      border: {
+        width: 5,
+        color: `aquamarine`,
+      },
+    },
+    disabled: {
+      backgroundColor: `orange`,
+      color: `purple`,
+      radius: 7,
+      border: {
+        width: 2,
+        color: `aquamarine`,
+      },
+    },
+  });
+  const onPress = jest.fn();
+
+  const rendered = (
+    <Component
+      leftIcon={() => null}
+      rightIcon={(color) => <Text>Example Right Icon ({color})</Text>}
+      onPress={onPress}
+      disabled={false}
+    >
+      Example Content
+    </Component>
+  );
+
+  expect(unwrapRenderedFunctionComponent(rendered)).toEqual(
+    <Hitbox
+      disabled={false}
+      onPress={onPress}
+      style={{
+        backgroundColor: `yellow`,
+        borderRadius: 25,
+        paddingHorizontal: 10,
+        paddingVertical: 2,
+        borderWidth: 5,
+        borderColor: `aquamarine`,
+        justifyContent: `center`,
+        alignItems: `center`,
+        flexDirection: `row`,
+      }}
+    >
+      <Text
+        style={{
+          color: `blue`,
+          fontFamily: `Example Font Family`,
+          fontSize: 16,
+          lineHeight: 22.4,
+        }}
+      >
+        Example Content
+      </Text>
+      <Text>
+        {`Example Right Icon (`}
+        {`blue`}
+        {`)`}
+      </Text>
+    </Hitbox>
+  );
+  expect(onPress).not.toHaveBeenCalled();
+});
+
+test(`renders when disabled with a right icon without icon spacing`, () => {
+  const Component = createButtonComponent({
+    fontFamily: `Example Font Family`,
+    fontSize: 16,
+    horizontalPadding: 10,
+    verticalPadding: 2,
+    iconSpacing: 0,
+    default: {
+      backgroundColor: `yellow`,
+      color: `blue`,
+      radius: 25,
+      border: {
+        width: 5,
+        color: `aquamarine`,
+      },
+    },
+    disabled: {
+      backgroundColor: `orange`,
+      color: `purple`,
+      radius: 7,
+      border: {
+        width: 2,
+        color: `aquamarine`,
+      },
+    },
+  });
+  const onPress = jest.fn();
+
+  const rendered = (
+    <Component
+      leftIcon={() => null}
+      rightIcon={(color) => <Text>Example Right Icon ({color})</Text>}
+      onPress={onPress}
+      disabled
+    >
+      Example Content
+    </Component>
+  );
+
+  expect(unwrapRenderedFunctionComponent(rendered)).toEqual(
+    <Hitbox
+      disabled
+      onPress={onPress}
+      style={{
+        backgroundColor: `orange`,
+        borderRadius: 7,
+        paddingHorizontal: 10,
+        paddingVertical: 2,
+        borderWidth: 2,
+        borderColor: `aquamarine`,
+        justifyContent: `center`,
+        alignItems: `center`,
+        margin: 3,
+        flexDirection: `row`,
+      }}
+    >
+      <Text
+        style={{
+          color: `purple`,
+          fontFamily: `Example Font Family`,
+          fontSize: 16,
+          lineHeight: 22.4,
+        }}
+      >
+        Example Content
+      </Text>
+      <Text>
+        {`Example Right Icon (`}
+        {`purple`}
+        {`)`}
+      </Text>
+    </Hitbox>
+  );
+  expect(onPress).not.toHaveBeenCalled();
+});
+
+test(`renders when enabled with left and right icons without icon spacing`, () => {
+  const Component = createButtonComponent({
+    fontFamily: `Example Font Family`,
+    fontSize: 16,
+    horizontalPadding: 10,
+    verticalPadding: 2,
+    iconSpacing: 0,
+    default: {
+      backgroundColor: `yellow`,
+      color: `blue`,
+      radius: 25,
+      border: {
+        width: 5,
+        color: `aquamarine`,
+      },
+    },
+    disabled: {
+      backgroundColor: `orange`,
+      color: `purple`,
+      radius: 7,
+      border: {
+        width: 2,
+        color: `aquamarine`,
+      },
+    },
+  });
+  const onPress = jest.fn();
+
+  const rendered = (
+    <Component
+      leftIcon={(color) => <Text>Example Left Icon ({color})</Text>}
+      rightIcon={(color) => <Text>Example Right Icon ({color})</Text>}
+      onPress={onPress}
+      disabled={false}
+    >
+      Example Content
+    </Component>
+  );
+
+  expect(unwrapRenderedFunctionComponent(rendered)).toEqual(
+    <Hitbox
+      disabled={false}
+      onPress={onPress}
+      style={{
+        backgroundColor: `yellow`,
+        borderRadius: 25,
+        paddingHorizontal: 10,
+        paddingVertical: 2,
+        borderWidth: 5,
+        borderColor: `aquamarine`,
+        justifyContent: `center`,
+        alignItems: `center`,
+        flexDirection: `row`,
+      }}
+    >
+      <Text>
+        {`Example Left Icon (`}
+        {`blue`}
+        {`)`}
+      </Text>
+      <Text
+        style={{
+          color: `blue`,
+          fontFamily: `Example Font Family`,
+          fontSize: 16,
+          lineHeight: 22.4,
+        }}
+      >
+        Example Content
+      </Text>
+      <Text>
+        {`Example Right Icon (`}
+        {`blue`}
+        {`)`}
+      </Text>
+    </Hitbox>
+  );
+  expect(onPress).not.toHaveBeenCalled();
+});
+
+test(`renders when disabled with left and right icons without icon spacing`, () => {
+  const Component = createButtonComponent({
+    fontFamily: `Example Font Family`,
+    fontSize: 16,
+    horizontalPadding: 10,
+    verticalPadding: 2,
+    iconSpacing: 0,
+    default: {
+      backgroundColor: `yellow`,
+      color: `blue`,
+      radius: 25,
+      border: {
+        width: 5,
+        color: `aquamarine`,
+      },
+    },
+    disabled: {
+      backgroundColor: `orange`,
+      color: `purple`,
+      radius: 7,
+      border: {
+        width: 2,
+        color: `aquamarine`,
+      },
+    },
+  });
+  const onPress = jest.fn();
+
+  const rendered = (
+    <Component
+      leftIcon={(color) => <Text>Example Left Icon ({color})</Text>}
+      rightIcon={(color) => <Text>Example Right Icon ({color})</Text>}
+      onPress={onPress}
+      disabled
+    >
+      Example Content
+    </Component>
+  );
+
+  expect(unwrapRenderedFunctionComponent(rendered)).toEqual(
+    <Hitbox
+      disabled
+      onPress={onPress}
+      style={{
+        backgroundColor: `orange`,
+        borderRadius: 7,
+        paddingHorizontal: 10,
+        paddingVertical: 2,
+        borderWidth: 2,
+        borderColor: `aquamarine`,
+        justifyContent: `center`,
+        alignItems: `center`,
+        margin: 3,
+        flexDirection: `row`,
+      }}
+    >
+      <Text>
+        {`Example Left Icon (`}
+        {`purple`}
+        {`)`}
+      </Text>
+      <Text
+        style={{
+          color: `purple`,
+          fontFamily: `Example Font Family`,
+          fontSize: 16,
+          lineHeight: 22.4,
+        }}
+      >
+        Example Content
+      </Text>
+      <Text>
+        {`Example Right Icon (`}
+        {`purple`}
+        {`)`}
+      </Text>
+    </Hitbox>
+  );
+  expect(onPress).not.toHaveBeenCalled();
+});
diff --git a/types/ButtonStyle/index.tsx b/types/ButtonStyle/index.tsx
index bb2865ac..346d0e7c 100644
--- a/types/ButtonStyle/index.tsx
+++ b/types/ButtonStyle/index.tsx
@@ -24,6 +24,11 @@ export type ButtonStyle = {
    */
   readonly verticalPadding: number;
 
+  /**
+   * The amount of spacing between icons and text.
+   */
+  readonly iconSpacing: number;
+
   /**
    * The style to apply when the button is not disabled.
    */
diff --git a/types/ButtonStyle/readme.md b/types/ButtonStyle/readme.md
index 533f2e2b..c9aac363 100644
--- a/types/ButtonStyle/readme.md
+++ b/types/ButtonStyle/readme.md
@@ -12,6 +12,7 @@ const value: ButtonStyle = {
   fontSize: 16,
   horizontalPadding: 10,
   verticalPadding: 2,
+  iconSpacing: 5,
   default: {
     backgroundColor: `yellow`,
     color: `blue`,