diff --git a/.changeset/dirty-books-argue.md b/.changeset/dirty-books-argue.md
new file mode 100644
index 00000000..65c889dd
--- /dev/null
+++ b/.changeset/dirty-books-argue.md
@@ -0,0 +1,5 @@
+---
+"@status-im/components": patch
+---
+
+fix: keep icon color if defined as part of button
diff --git a/packages/components/src/button/button.stories.tsx b/packages/components/src/button/button.stories.tsx
index 28f29962..dd08fd80 100644
--- a/packages/components/src/button/button.stories.tsx
+++ b/packages/components/src/button/button.stories.tsx
@@ -1,3 +1,4 @@
+import { PopupIcon } from '@status-im/icons'
 import { action } from '@storybook/addon-actions'
 import { Stack } from 'tamagui'
 
@@ -82,6 +83,14 @@ export const PrimaryIconBefore: Story = {
   },
 }
 
+export const PrimaryIconBeforeDifferentColor: Story = {
+  name: 'Primary icon before/Different color',
+  args: {
+    children: 'Click me',
+    icon: <PopupIcon size={20} color="$yellow-50" />,
+  },
+}
+
 export const PrimaryIconAfter: Story = {
   name: 'Primary/Icon after',
   args: {
@@ -89,6 +98,15 @@ export const PrimaryIconAfter: Story = {
     iconAfter: icon,
   },
 }
+
+export const PrimaryIconAfterDifferentColor: Story = {
+  name: 'Primary/Icon after/Different color',
+  args: {
+    children: 'Click me',
+    iconAfter: <PopupIcon size={20} color="$yellow-50" />,
+  },
+}
+
 export const PrimaryIconOnly: Story = {
   name: 'Primary/Icon only',
   args: {
diff --git a/packages/components/src/button/button.tsx b/packages/components/src/button/button.tsx
index d9b2c926..31a4e1c0 100644
--- a/packages/components/src/button/button.tsx
+++ b/packages/components/src/button/button.tsx
@@ -82,11 +82,17 @@ const Button = (props: Props, ref: Ref<View>) => {
       iconOnly={iconOnly}
       width={fullWidth ? '100%' : 'auto'}
     >
-      {icon ? cloneElement(icon, { color: textColor || '$neutral-40' }) : null}
+      {icon
+        ? cloneElement(icon, {
+            color: iconOnly ? textColor : icon.props.color ?? textColor,
+          })
+        : null}
       <Text weight="medium" color={textColor} size={textSize}>
         {children}
       </Text>
-      {iconAfter ? cloneElement(iconAfter, { color: textColor }) : null}
+      {iconAfter
+        ? cloneElement(iconAfter, { color: iconAfter.props.color ?? textColor })
+        : null}
     </Base>
   )
 }