diff --git a/core/src/components/input/input.ios.scss b/core/src/components/input/input.ios.scss
index 013f1e385bc..299e9a294ea 100644
--- a/core/src/components/input/input.ios.scss
+++ b/core/src/components/input/input.ios.scss
@@ -17,11 +17,7 @@
   --padding-start: 0px;
 }
 
-.input-clear-icon {
-  @include svg-background-image($input-ios-input-clear-icon-svg);
-
-  width: $input-ios-input-clear-icon-width;
-  height: $input-ios-input-clear-icon-width;
-
-  background-size: $input-ios-input-clear-icon-size;
+.input-clear-icon ion-icon {
+  width: 18px;
+  height: 18px;
 }
diff --git a/core/src/components/input/input.ios.vars.scss b/core/src/components/input/input.ios.vars.scss
index c17f793a3fd..eca1b4197ba 100644
--- a/core/src/components/input/input.ios.vars.scss
+++ b/core/src/components/input/input.ios.vars.scss
@@ -49,15 +49,6 @@ $input-ios-inset-margin-start:            0 !default;
 /// @prop - Width of the icon used to clear the input
 $input-ios-input-clear-icon-width:        30px !default;
 
-/// @prop - Color of the icon used to clear the input
-$input-ios-input-clear-icon-color:        $text-color-step-400 !default;
-
-/// @prop - Icon used to clear the input
-$input-ios-input-clear-icon-svg:          "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $input-ios-input-clear-icon-color + "' d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>" !default;
-
-/// @prop - Size of the icon used to clear the input
-$input-ios-input-clear-icon-size:         18px !default;
-
 /// @prop - Padding end of the input with clear input
 $input-ios-input-clear-padding-end:       ($input-ios-input-clear-icon-width + $item-ios-padding-end) !default;
 
diff --git a/core/src/components/input/input.md.scss b/core/src/components/input/input.md.scss
index 51bc9ce6cb1..80feeac8e05 100644
--- a/core/src/components/input/input.md.scss
+++ b/core/src/components/input/input.md.scss
@@ -21,11 +21,7 @@
   --padding-start: 0;
 }
 
-.input-clear-icon {
-  @include svg-background-image($input-md-input-clear-icon-svg);
-
-  width: $input-md-input-clear-icon-width;
-  height: $input-md-input-clear-icon-width;
-
-  background-size: $input-md-input-clear-icon-size;
+.input-clear-icon ion-icon {
+  width: 22px;
+  height: 22px;
 }
diff --git a/core/src/components/input/input.md.vars.scss b/core/src/components/input/input.md.vars.scss
index b04a35040ff..2d983db19a2 100644
--- a/core/src/components/input/input.md.vars.scss
+++ b/core/src/components/input/input.md.vars.scss
@@ -22,15 +22,6 @@ $input-md-padding-start:                   ($item-md-padding-start * 0.5) !defau
 /// @prop - Width of the icon used to clear the input
 $input-md-input-clear-icon-width:         30px !default;
 
-/// @prop - Color of the icon used to clear the input
-$input-md-input-clear-icon-color:         $text-color-step-400 !default;
-
-/// @prop - Icon used to clear the input
-$input-md-input-clear-icon-svg:           "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $input-md-input-clear-icon-color + "' points='405,136.798 375.202,107 256,226.202 136.798,107 107,136.798 226.202,256 107,375.202 136.798,405 256,285.798 375.202,405 405,375.202 285.798,256'/></svg>" !default;
-
-/// @prop - Size of the icon used to clear the input
-$input-md-input-clear-icon-size:          22px !default;
-
 /// @prop - Placeholder Text color of the input
 $input-md-placeholder-color:              $placeholder-text-color !default;
 
diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss
index bc9363b921f..f516133a6d0 100644
--- a/core/src/components/input/input.scss
+++ b/core/src/components/input/input.scss
@@ -143,6 +143,14 @@
   @include padding(0);
   @include background-position(center);
 
+  display: flex;
+
+  align-items: center;
+  justify-content: center;
+
+  width: 30px;
+  height: 30px;
+
   border: 0;
 
   outline: none;
@@ -154,6 +162,10 @@
   appearance: none;
 }
 
+.input-clear-icon ion-icon {
+  color: $text-color-step-400;
+}
+
 /**
  * Normally, we would not want to use :focus
  * here because that would mean tapping the button
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index d2e9cfcefc2..82a6ab50d3e 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -1,5 +1,6 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Build, Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
+import { closeCircle, closeSharp } from 'ionicons/icons';
 
 import { getIonMode } from '../../global/ionic-global';
 import type {
@@ -499,7 +500,9 @@ export class Input implements ComponentInterface {
               ev.preventDefault();
             }}
             onClick={this.clearTextInput}
-          />
+          >
+            <ion-icon aria-hidden="true" icon={mode === 'ios' ? closeCircle : closeSharp}></ion-icon>
+          </button>
         )}
       </Host>
     );
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Chrome-linux.png
index 6901495976d..91e82f78740 100644
Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Firefox-linux.png
index 39a8fc85f6d..d267ab8f06a 100644
Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Safari-linux.png
index f5afb6bf22f..163f7d83ca9 100644
Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Chrome-linux.png
index 244d498c08c..31fd3c59946 100644
Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Firefox-linux.png
index 09948e2dd72..d87042e3add 100644
Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Safari-linux.png
index 0e532d32a21..4d7d0a16dc1 100644
Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Chrome-linux.png
index 66e86b7de54..fc984514b8f 100644
Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Firefox-linux.png
index fff75b5e960..b502de51c80 100644
Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Safari-linux.png
index e9c67cc50f4..767cfb932da 100644
Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Chrome-linux.png
index 917b3e6552e..1a11a365929 100644
Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Firefox-linux.png
index ef962665ca8..08a5671929a 100644
Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Safari-linux.png
index b7fdde0a7c5..0b4da340493 100644
Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Safari-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Safari-linux.png differ