diff --git a/src/components/textField/ClearButton.tsx b/src/components/textField/ClearButton.tsx
index 09e4d29360..f082573eb3 100644
--- a/src/components/textField/ClearButton.tsx
+++ b/src/components/textField/ClearButton.tsx
@@ -17,7 +17,7 @@ const TIMING_CONFIG = {
   easing: Easing.bezier(0.33, 1, 0.68, 1)
 };
 
-const ClearButton = ({testID, onClear, onChangeText, clearButtonStyle}: ClearButtonProps) => {
+const ClearButton = ({testID, onClear, onChangeText, clearButtonStyle, ClearButtonContentComponent}: ClearButtonProps ) => {
   const {hasValue} = useContext(FieldContext);
   const animatedValue = useSharedValue(hasValue ? VISIBLE_POSITION : NON_VISIBLE_POSITION);
   const animatedOpacity = useSharedValue(hasValue ? 1 : 0);
@@ -49,6 +49,13 @@ const ClearButton = ({testID, onClear, onChangeText, clearButtonStyle}: ClearBut
 
   return (
     <View reanimated style={style} testID={`${testID}.container`}>
+     {ClearButtonContentComponent? 
+        <ClearButtonContentComponent 
+          onPress={clear} 
+          hitSlop={hitSlop}
+          accessible={hasValue}
+          accessibilityLabel={'clear'}
+          testID={testID}/> :
       <Button
         link
         iconSource={Assets.internal.icons.xFlat}
@@ -58,7 +65,7 @@ const ClearButton = ({testID, onClear, onChangeText, clearButtonStyle}: ClearBut
         accessible={hasValue}
         accessibilityLabel={'clear'}
         testID={testID}
-      />
+      />}
     </View>
   );
 };
diff --git a/src/components/textField/index.tsx b/src/components/textField/index.tsx
index 1e61189909..8dc902300a 100644
--- a/src/components/textField/index.tsx
+++ b/src/components/textField/index.tsx
@@ -76,6 +76,7 @@ const TextField = (props: InternalTextFieldProps) => {
     topTrailingAccessory,
     bottomAccessory,
     showClearButton,
+    ClearButtonContentComponent,
     onClear,
     // Validation
     enableErrors, // TODO: rename to enableValidation
@@ -210,11 +211,13 @@ const TextField = (props: InternalTextFieldProps) => {
             </View>
           )}
           {showClearButton && (
+          
             <ClearButton
               onClear={onClear}
               testID={`${props.testID}.clearButton`}
               onChangeText={onChangeText}
               clearButtonStyle={clearButtonStyle}
+              ClearButtonContentComponent={ClearButtonContentComponent}
             />
           )}
           {trailingAccessory}
diff --git a/src/components/textField/types.ts b/src/components/textField/types.ts
index 1f98fe7874..16b3a27fe0 100644
--- a/src/components/textField/types.ts
+++ b/src/components/textField/types.ts
@@ -78,6 +78,8 @@ export interface ClearButtonProps extends Pick<TextInputProps, 'testID' | 'onCha
    * The style of the clear button
    */
   clearButtonStyle?: StyleProp<ViewStyle>;
+  /** Pass to render a custom clear button */
+  ClearButtonContentComponent?: React.ComponentType<any>;
 }
 
 export interface LabelProps extends MandatoryIndication, Pick<ValidationMessageProps, 'enableErrors'> {
@@ -226,6 +228,11 @@ export type TextFieldProps = MarginModifiers &
      * Should show a clear button when there is a value
      */
     showClearButton?: boolean;
+
+    /**
+     * Pass to render a custom clear button
+     */
+    ClearButtonContentComponent?: ReactElement;
     /**
      * Text to display under the input
      */