diff --git a/src/HeaderButton.tsx b/src/HeaderButton.tsx
index 9d40a55..053a22f 100644
--- a/src/HeaderButton.tsx
+++ b/src/HeaderButton.tsx
@@ -15,12 +15,19 @@ import type { ComponentProps, ReactNode } from 'react';
 export type VisibleButtonProps = {
   title: string;
 
-  IconComponent?: React.ComponentType<{
-    name: any; // TODO generify to support icon names
-    style?: any;
-    color?: ColorValue;
-    size?: number;
-  }>;
+  IconComponent?:
+    | React.ComponentType<{
+        name: any; // TODO generify to support icon names
+        style?: any;
+        size?: number;
+        color?: ColorValue;
+      }>
+    | React.ComponentType<{
+        name: any; // TODO generify to support icon names
+        style?: any;
+        size?: number;
+        color?: ColorValue | number;
+      }>;
   iconName?: string;
   iconSize?: number;
   color?: ColorValue;
diff --git a/src/__tests__/HeaderButtons.test.tsx b/src/__tests__/HeaderButtons.test.tsx
index 8e72620..062be2b 100644
--- a/src/__tests__/HeaderButtons.test.tsx
+++ b/src/__tests__/HeaderButtons.test.tsx
@@ -71,7 +71,7 @@ describe('HeaderButtons', () => {
     const IoniconsHeaderButton = (props: HeaderButtonProps) => (
       <HeaderButton
         {...props}
-        IconComponent={({ name }) => <Text>{name}</Text>}
+        IconComponent={({ name }: { name: any }) => <Text>{name}</Text>}
         iconSize={23}
         color="blue"
       />