From 4e0741b70506c298cccf2b860450ecdfed6fabeb Mon Sep 17 00:00:00 2001
From: Telechi Nicolae <tux2nicolae@gmail.com>
Date: Mon, 23 Jan 2023 20:09:53 +0200
Subject: [PATCH 1/3] Add custom icon for checkbox component

(cherry picked from commit 407ba80487b6a0f861c971ec2f3ac9d256f55da1)
(cherry picked from commit 1341418c78c754475d735c6f5fb782a12ba42e14)
(cherry picked from commit f5d751c696cbf59fd503ab1f90537c422a24df93)
(cherry picked from commit 07ae2ae9288a325ed948db6abaa51adf1110a1d6)
---
 src/components/Checkbox/Checkbox.tsx        |  4 ++++
 src/components/Checkbox/CheckboxAndroid.tsx | 21 ++++++++++++++-------
 src/components/Checkbox/CheckboxIOS.tsx     | 21 ++++++++++++++-------
 src/components/Checkbox/CheckboxItem.tsx    |  7 ++++++-
 4 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index b6cfd9a64b..8f95927c27 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -35,6 +35,10 @@ export type Props = {
    * testID to be used on tests.
    */
   testID?: string;
+  /**
+   * custom icon.
+   */
+  icon?: (props: { size: number; color: string }) => JSX.Element;
 };
 
 /**
diff --git a/src/components/Checkbox/CheckboxAndroid.tsx b/src/components/Checkbox/CheckboxAndroid.tsx
index 642602b0fa..34948361d5 100644
--- a/src/components/Checkbox/CheckboxAndroid.tsx
+++ b/src/components/Checkbox/CheckboxAndroid.tsx
@@ -41,6 +41,10 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
    * testID to be used on tests.
    */
   testID?: string;
+  /**
+   * custom icon.
+   */
+  icon?: (props: { size: number; color: string }) => JSX.Element;
 };
 
 // From https://material.io/design/motion/speed.html#duration
@@ -59,6 +63,7 @@ const CheckboxAndroid = ({
   disabled,
   onPress,
   testID,
+  icon: customIcon,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -134,13 +139,15 @@ const CheckboxAndroid = ({
       theme={theme}
     >
       <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
-        <MaterialCommunityIcon
-          allowFontScaling={false}
-          name={icon}
-          size={24}
-          color={selectionControlColor}
-          direction="ltr"
-        />
+        {customIcon?.({ size: 24, color: selectionControlColor }) || (
+          <MaterialCommunityIcon
+            allowFontScaling={false}
+            name={icon}
+            size={24}
+            color={selectionControlColor}
+            direction="ltr"
+          />
+        )}
         <View style={[StyleSheet.absoluteFill, styles.fillContainer]}>
           <Animated.View
             style={[
diff --git a/src/components/Checkbox/CheckboxIOS.tsx b/src/components/Checkbox/CheckboxIOS.tsx
index e5f2c1a021..92305b354b 100644
--- a/src/components/Checkbox/CheckboxIOS.tsx
+++ b/src/components/Checkbox/CheckboxIOS.tsx
@@ -32,6 +32,10 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
    * testID to be used on tests.
    */
   testID?: string;
+  /**
+   * custom icon.
+   */
+  icon?: (props: { size: number; color: string }) => JSX.Element;
 };
 
 /**
@@ -47,6 +51,7 @@ const CheckboxIOS = ({
   onPress,
   theme: themeOverrides,
   testID,
+  icon: customIcon,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -77,13 +82,15 @@ const CheckboxIOS = ({
       theme={theme}
     >
       <View style={{ opacity }}>
-        <MaterialCommunityIcon
-          allowFontScaling={false}
-          name={icon}
-          size={24}
-          color={checkedColor}
-          direction="ltr"
-        />
+        {customIcon?.({ size: 24, color: checkedColor }) || (
+          <MaterialCommunityIcon
+            allowFontScaling={false}
+            name={icon}
+            size={24}
+            color={checkedColor}
+            direction="ltr"
+          />
+        )}
       </View>
     </TouchableRipple>
   );
diff --git a/src/components/Checkbox/CheckboxItem.tsx b/src/components/Checkbox/CheckboxItem.tsx
index 92ea124e62..844748bd5d 100644
--- a/src/components/Checkbox/CheckboxItem.tsx
+++ b/src/components/Checkbox/CheckboxItem.tsx
@@ -99,6 +99,10 @@ export type Props = {
    * testID to be used on tests.
    */
   testID?: string;
+  /**
+   * custom icon.
+   */
+  icon?: (props: { size: number; color: string }) => JSX.Element;
   /**
    * Checkbox control position.
    */
@@ -142,6 +146,7 @@ const CheckboxItem = ({
   labelStyle,
   theme: themeOverrides,
   testID,
+  icon,
   mode,
   position = 'trailing',
   accessibilityLabel = label,
@@ -154,7 +159,7 @@ const CheckboxItem = ({
   ...props
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
-  const checkboxProps = { ...props, status, theme, disabled };
+  const checkboxProps = { ...props, status, theme, disabled, icon };
   const isLeading = position === 'leading';
   let checkbox;
 

From fdfb8357edd95251944c795ec2c6ea7d03e71537 Mon Sep 17 00:00:00 2001
From: Telechi Nicolae <tux2nicolae@gmail.com>
Date: Mon, 16 Feb 2026 20:27:20 +0200
Subject: [PATCH 2/3] Fix typescript

---
 src/components/Checkbox/Checkbox.tsx        | 3 ++-
 src/components/Checkbox/CheckboxAndroid.tsx | 3 ++-
 src/components/Checkbox/CheckboxIOS.tsx     | 3 ++-
 src/components/Checkbox/CheckboxItem.tsx    | 3 ++-
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 8f95927c27..375638a31a 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -4,6 +4,7 @@ import { GestureResponderEvent, Platform } from 'react-native';
 import CheckboxAndroid from './CheckboxAndroid';
 import CheckboxIOS from './CheckboxIOS';
 import { useInternalTheme } from '../../core/theming';
+import type { IconSource } from '../Icon';
 import type { ThemeProp } from '../../types';
 
 export type Props = {
@@ -38,7 +39,7 @@ export type Props = {
   /**
    * custom icon.
    */
-  icon?: (props: { size: number; color: string }) => JSX.Element;
+  icon?: IconSource;
 };
 
 /**
diff --git a/src/components/Checkbox/CheckboxAndroid.tsx b/src/components/Checkbox/CheckboxAndroid.tsx
index 34948361d5..ea0a46a4ae 100644
--- a/src/components/Checkbox/CheckboxAndroid.tsx
+++ b/src/components/Checkbox/CheckboxAndroid.tsx
@@ -11,6 +11,7 @@ import { useInternalTheme } from '../../core/theming';
 import type { $RemoveChildren, ThemeProp } from '../../types';
 import MaterialCommunityIcon from '../MaterialCommunityIcon';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import { IconSource } from '../Icon';
 
 export type Props = $RemoveChildren<typeof TouchableRipple> & {
   /**
@@ -44,7 +45,7 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
   /**
    * custom icon.
    */
-  icon?: (props: { size: number; color: string }) => JSX.Element;
+  icon?: IconSource;
 };
 
 // From https://material.io/design/motion/speed.html#duration
diff --git a/src/components/Checkbox/CheckboxIOS.tsx b/src/components/Checkbox/CheckboxIOS.tsx
index 92305b354b..ed69c66b4a 100644
--- a/src/components/Checkbox/CheckboxIOS.tsx
+++ b/src/components/Checkbox/CheckboxIOS.tsx
@@ -6,6 +6,7 @@ import { useInternalTheme } from '../../core/theming';
 import type { $RemoveChildren, ThemeProp } from '../../types';
 import MaterialCommunityIcon from '../MaterialCommunityIcon';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import { IconSource } from '../Icon';
 
 export type Props = $RemoveChildren<typeof TouchableRipple> & {
   /**
@@ -35,7 +36,7 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
   /**
    * custom icon.
    */
-  icon?: (props: { size: number; color: string }) => JSX.Element;
+  icon?: IconSource;
 };
 
 /**
diff --git a/src/components/Checkbox/CheckboxItem.tsx b/src/components/Checkbox/CheckboxItem.tsx
index 844748bd5d..ce1c170f24 100644
--- a/src/components/Checkbox/CheckboxItem.tsx
+++ b/src/components/Checkbox/CheckboxItem.tsx
@@ -19,6 +19,7 @@ import TouchableRipple, {
   Props as TouchableRippleProps,
 } from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
+import { IconSource } from '../Icon';
 
 export type Props = {
   /**
@@ -102,7 +103,7 @@ export type Props = {
   /**
    * custom icon.
    */
-  icon?: (props: { size: number; color: string }) => JSX.Element;
+  icon?: IconSource;
   /**
    * Checkbox control position.
    */

From 95d2aa89265791f907ba09c171980d26fb3e34b6 Mon Sep 17 00:00:00 2001
From: Telechi Nicolae <tux2nicolae@gmail.com>
Date: Mon, 16 Feb 2026 20:44:54 +0200
Subject: [PATCH 3/3] Use the same pattern for icon in checkbox as well

---
 src/components/Checkbox/Checkbox.tsx        | 2 +-
 src/components/Checkbox/CheckboxAndroid.tsx | 6 ++++--
 src/components/Checkbox/CheckboxIOS.tsx     | 6 ++++--
 src/components/Checkbox/CheckboxItem.tsx    | 2 +-
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 375638a31a..a7503cb74f 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -4,8 +4,8 @@ import { GestureResponderEvent, Platform } from 'react-native';
 import CheckboxAndroid from './CheckboxAndroid';
 import CheckboxIOS from './CheckboxIOS';
 import { useInternalTheme } from '../../core/theming';
-import type { IconSource } from '../Icon';
 import type { ThemeProp } from '../../types';
+import type { IconSource } from '../Icon';
 
 export type Props = {
   /**
diff --git a/src/components/Checkbox/CheckboxAndroid.tsx b/src/components/Checkbox/CheckboxAndroid.tsx
index ea0a46a4ae..235f65c601 100644
--- a/src/components/Checkbox/CheckboxAndroid.tsx
+++ b/src/components/Checkbox/CheckboxAndroid.tsx
@@ -9,9 +9,9 @@ import {
 import { getAndroidSelectionControlColor } from './utils';
 import { useInternalTheme } from '../../core/theming';
 import type { $RemoveChildren, ThemeProp } from '../../types';
+import Icon, { IconSource } from '../Icon';
 import MaterialCommunityIcon from '../MaterialCommunityIcon';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
-import { IconSource } from '../Icon';
 
 export type Props = $RemoveChildren<typeof TouchableRipple> & {
   /**
@@ -140,7 +140,9 @@ const CheckboxAndroid = ({
       theme={theme}
     >
       <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
-        {customIcon?.({ size: 24, color: selectionControlColor }) || (
+        {customIcon ? (
+          <Icon source={customIcon} size={24} color={selectionControlColor} />
+        ) : (
           <MaterialCommunityIcon
             allowFontScaling={false}
             name={icon}
diff --git a/src/components/Checkbox/CheckboxIOS.tsx b/src/components/Checkbox/CheckboxIOS.tsx
index ed69c66b4a..f9903f3c04 100644
--- a/src/components/Checkbox/CheckboxIOS.tsx
+++ b/src/components/Checkbox/CheckboxIOS.tsx
@@ -4,9 +4,9 @@ import { GestureResponderEvent, StyleSheet, View } from 'react-native';
 import { getSelectionControlIOSColor } from './utils';
 import { useInternalTheme } from '../../core/theming';
 import type { $RemoveChildren, ThemeProp } from '../../types';
+import Icon, { type IconSource } from '../Icon';
 import MaterialCommunityIcon from '../MaterialCommunityIcon';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
-import { IconSource } from '../Icon';
 
 export type Props = $RemoveChildren<typeof TouchableRipple> & {
   /**
@@ -83,7 +83,9 @@ const CheckboxIOS = ({
       theme={theme}
     >
       <View style={{ opacity }}>
-        {customIcon?.({ size: 24, color: checkedColor }) || (
+        {customIcon ? (
+          <Icon source={customIcon} size={24} color={checkedColor} />
+        ) : (
           <MaterialCommunityIcon
             allowFontScaling={false}
             name={icon}
diff --git a/src/components/Checkbox/CheckboxItem.tsx b/src/components/Checkbox/CheckboxItem.tsx
index ce1c170f24..bc6676b0db 100644
--- a/src/components/Checkbox/CheckboxItem.tsx
+++ b/src/components/Checkbox/CheckboxItem.tsx
@@ -15,11 +15,11 @@ import CheckboxAndroid from './CheckboxAndroid';
 import CheckboxIOS from './CheckboxIOS';
 import { useInternalTheme } from '../../core/theming';
 import type { ThemeProp, MD3TypescaleKey } from '../../types';
+import { IconSource } from '../Icon';
 import TouchableRipple, {
   Props as TouchableRippleProps,
 } from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
-import { IconSource } from '../Icon';
 
 export type Props = {
   /**