diff --git a/src/ColorButton/ColorButton.tsx b/src/ColorButton/ColorButton.tsx
index e933561..0a0083b 100644
--- a/src/ColorButton/ColorButton.tsx
+++ b/src/ColorButton/ColorButton.tsx
@@ -40,7 +40,7 @@ const ColorButton = ({ disabled, color, ...rest }: Props) => {
         />
         <Divider orientation='vertical' size={previewHeight} />
         <ArrowIcon
-          direction='bottom'
+          direction='down'
           disabled={disabled}
           segments={3}
           style={styles.dropdownIcon}
diff --git a/src/Icons/ArrowIcon.tsx b/src/Icons/ArrowIcon.tsx
index 0117958..1e03c4e 100644
--- a/src/Icons/ArrowIcon.tsx
+++ b/src/Icons/ArrowIcon.tsx
@@ -14,7 +14,7 @@ type Props = {
 const pixelSize = 2;
 
 const ArrowIcon = ({
-  direction = 'bottom',
+  direction = 'down',
   disabled = false,
   segments = 4,
   style = {},
@@ -24,7 +24,7 @@ const ArrowIcon = ({
 
   const segmentSizes = new Array(segments).fill(null).map((_, i) => 1 + i * 2);
 
-  if (['right', 'bottom'].includes(direction)) {
+  if (['right', 'down'].includes(direction)) {
     segmentSizes.reverse();
   }
   const isHorizontal = ['left', 'right'].includes(direction);
diff --git a/src/Icons/ChevronIcon.tsx b/src/Icons/ChevronIcon.tsx
index 7caadcb..bf6b3e5 100644
--- a/src/Icons/ChevronIcon.tsx
+++ b/src/Icons/ChevronIcon.tsx
@@ -16,7 +16,7 @@ const pixelSize = 2;
 
 const ChevronIcon = ({
   color,
-  direction = 'bottom',
+  direction = 'down',
   disabled = false,
   segments = 5,
   style = {},
@@ -27,7 +27,7 @@ const ChevronIcon = ({
   const baseColor = color || theme.materialText;
   let segmentSizes = new Array(segments).fill(null).map((_, i) => 1 + i * 2);
 
-  if (['right', 'bottom'].includes(direction)) {
+  if (['right', 'down'].includes(direction)) {
     segmentSizes = segmentSizes.reverse();
   }
   const isHorizontal = ['left', 'right'].includes(direction);
diff --git a/src/List/ListAccordion.tsx b/src/List/ListAccordion.tsx
index 658e362..baaeb69 100644
--- a/src/List/ListAccordion.tsx
+++ b/src/List/ListAccordion.tsx
@@ -83,13 +83,13 @@ const ListAccordion = ({
             <ChevronIcon
               color={theme.progress}
               segments={3}
-              direction={expanded ? 'top' : 'bottom'}
+              direction={expanded ? 'up' : 'down'}
             />
             <ChevronIcon
               color={theme.progress}
               segments={3}
               style={{ marginVertical: 1 }}
-              direction={expanded ? 'top' : 'bottom'}
+              direction={expanded ? 'up' : 'down'}
             />
           </View>
         </View>
diff --git a/src/NumberInput/NumberInput.tsx b/src/NumberInput/NumberInput.tsx
index 815a55b..f239c2d 100644
--- a/src/NumberInput/NumberInput.tsx
+++ b/src/NumberInput/NumberInput.tsx
@@ -5,7 +5,7 @@ import type { DimensionValue } from '../types';
 import { blockSizes } from '../common/styles';
 import { clamp } from '../common/utils';
 
-import { TextInput, Button, Text } from '..';
+import { TextInput, Button, ArrowIcon } from '..';
 
 type Props = {
   defaultValue?: number;
@@ -80,9 +80,11 @@ const NumberInput = ({
         style={styles.button}
         testID='decrement'
       >
-        <Text disabled={isDecrementDisabled} style={styles.buttonText}>
-          -
-        </Text>
+        <ArrowIcon
+          segments={4}
+          disabled={isDecrementDisabled}
+          direction='left'
+        />
       </Button>
       <TextInput
         variant={variant}
@@ -101,9 +103,11 @@ const NumberInput = ({
         style={styles.button}
         testID='increment'
       >
-        <Text disabled={isIncrementDisabled} style={styles.buttonText}>
-          +
-        </Text>
+        <ArrowIcon
+          segments={4}
+          disabled={isIncrementDisabled}
+          direction='right'
+        />
       </Button>
     </View>
   );
diff --git a/src/ScrollView/ScrollView.tsx b/src/ScrollView/ScrollView.tsx
index 34dd68a..5a7b382 100644
--- a/src/ScrollView/ScrollView.tsx
+++ b/src/ScrollView/ScrollView.tsx
@@ -182,7 +182,7 @@ const ScrollView = ({
             style={[styles.scrollbarButton]}
           >
             <ArrowIcon
-              direction={horizontal ? 'left' : 'top'}
+              direction={horizontal ? 'left' : 'up'}
               disabled={contentFullyVisible}
               segments={4}
             />
@@ -229,7 +229,7 @@ const ScrollView = ({
             style={[styles.scrollbarButton]}
           >
             <ArrowIcon
-              direction={horizontal ? 'right' : 'bottom'}
+              direction={horizontal ? 'right' : 'down'}
               disabled={contentFullyVisible}
               segments={4}
             />
diff --git a/src/Select/Select.tsx b/src/Select/Select.tsx
index be040df..0ce0902 100644
--- a/src/Select/Select.tsx
+++ b/src/Select/Select.tsx
@@ -127,7 +127,7 @@ const Select = ({
             >
               <ArrowIcon
                 segments={4}
-                direction='bottom'
+                direction='down'
                 disabled={disabled}
                 style={{
                   paddingTop: isPressed ? 2 : 0,
diff --git a/src/types.tsx b/src/types.tsx
index 436b88c..572313a 100644
--- a/src/types.tsx
+++ b/src/types.tsx
@@ -14,7 +14,7 @@ export type Sizes = 'sm' | 'md' | 'lg';
 
 export type Orientation = 'horizontal' | 'vertical';
 
-export type Direction = 'top' | 'bottom' | 'left' | 'right';
+export type Direction = 'up' | 'down' | 'left' | 'right';
 
 export type DimensionValue = undefined | number | string;