diff --git a/core/src/components/input/input.ionic.scss b/core/src/components/input/input.ionic.scss
index 68a7f64e3f..3fd34df09b 100644
--- a/core/src/components/input/input.ionic.scss
+++ b/core/src/components/input/input.ionic.scss
@@ -21,6 +21,44 @@
   min-height: 48px;
 }
 
+// Input Clear Button
+// ----------------------------------------------------------------
+
+.input-clear-icon {
+  width: 16px;
+  height: 16px;
+
+  color: #{$ionic-color-neutral-500};
+}
+
+.input-clear-icon.ion-focused {
+  border-radius: #{$ionic-border-radius-rounded-small};
+
+  outline: #{$ionic-border-size-medium} solid #{$ionic-color-primary-100};
+
+  opacity: 1;
+}
+
+.input-clear-icon ion-icon {
+  width: 100%;
+  height: 100%;
+}
+
+/**
+ * The clear button should be visible if the native input
+ * OR any other interactive elements in the component (the
+ * clear button, slotted buttons, etc.) are focused. If we
+ * only looked at the native input, tabbing to the clear
+ * button would immediately hide it.
+ *
+ * Note that the clear button also requires the native input
+ * to have any value, but this is not specific to the ionic
+ * theme, so it is handled elsewhere.
+ */
+:host(:not(:focus-within)) .input-clear-icon {
+  display: none;
+}
+
 // Ionic Input Shapes
 // --------------------------------------------------
 
@@ -69,7 +107,7 @@
   // color for the text within the input
   --color: #{tokens.$ionic-color-neutral-400};
   --background: #{tokens.$ionic-color-neutral-10};
-  
+
   pointer-events: none;
 }
 
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index 8c76d54c03..b6263e30ae 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -729,7 +729,7 @@ export class Input implements ComponentInterface {
   }
 
   render() {
-    const { disabled, fill, readonly, shape, inputId, el, hasFocus, clearInputIcon } = this;
+    const { disabled, fill, readonly, shape, inputId, el, hasFocus, clearInput, clearInputIcon } = this;
     const theme = getIonTheme(this);
     const value = this.getValue();
     const size = this.getSize();
@@ -835,11 +835,11 @@ export class Input implements ComponentInterface {
               onCompositionend={this.onCompositionEnd}
               {...this.inheritedAttributes}
             />
-            {this.clearInput && !readonly && !disabled && (
+            {clearInput && !readonly && !disabled && (
               <button
                 aria-label="reset"
                 type="button"
-                class="input-clear-icon"
+                class="input-clear-icon ion-focusable"
                 onPointerDown={(ev) => {
                   /**
                    * This prevents mobile browsers from
diff --git a/core/src/components/input/test/basic/input.e2e.ts b/core/src/components/input/test/basic/input.e2e.ts
index 86b171e240..56f8929745 100644
--- a/core/src/components/input/test/basic/input.e2e.ts
+++ b/core/src/components/input/test/basic/input.e2e.ts
@@ -131,3 +131,92 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
     });
   });
 });
+
+configs({ modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('input: clear button in ionic theme, visual checks'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-input
+            label="Label"
+            label-placement="stacked"
+            clear-input="true"
+            value="Text"
+          ></ion-input>
+        `,
+        config
+      );
+
+      const input = page.locator('ion-input');
+      await input.evaluate((el: HTMLIonInputElement) => el.setFocus());
+      await page.waitForChanges();
+
+      await expect(input).toHaveScreenshot(screenshot(`input-with-clear-button`));
+    });
+
+    test('should not have visual regressions when clear button is focused', async ({ page }) => {
+      // extra padding around input ensures focus ring doesn't get cut off at screenshot edges
+      await page.setContent(
+        `
+          <style>
+            #container {
+              padding: 10px;
+            }
+          </style>
+
+          <div id="container">
+            <ion-input
+              label="Label"
+              label-placement="stacked"
+              clear-input="true"
+              value="Text"
+            ></ion-input>
+          </div>
+        `,
+        config
+      );
+
+      const input = page.locator('ion-input');
+      await input.evaluate((el: HTMLIonInputElement) => el.setFocus());
+      await page.waitForChanges();
+
+      const clearButton = input.locator('.input-clear-icon');
+      clearButton.evaluate((el: HTMLElement) => el.classList.add('ion-focused'));
+      await page.waitForChanges();
+
+      const container = page.locator('#container');
+      await expect(container).toHaveScreenshot(screenshot(`input-clear-button-focused`));
+    });
+  });
+});
+
+configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('input: clear button in ionic theme, functionality checks'), () => {
+    test('should show clear button when any part of input is focused', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-input
+            label="Label"
+            label-placement="stacked"
+            clear-input="true"
+            value="Text"
+          ></ion-input>
+        `,
+        config
+      );
+
+      const input = page.locator('ion-input');
+      const clearButton = input.locator('.input-clear-icon');
+
+      await expect(clearButton).not.toBeVisible();
+
+      await input.evaluate((el: HTMLIonInputElement) => el.setFocus());
+      await expect(clearButton).toBeVisible();
+
+      // ensure blurring native input doesn't immediately hide clear button
+      await page.keyboard.press('Tab');
+      await expect(clearButton).toBeFocused();
+      await expect(clearButton).toBeVisible();
+    });
+  });
+});
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..6bb24e9631
Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..70cd9191b2
Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..321e4232f7
Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..b2d129f4df
Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..ca91dfa931
Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..066eac7872
Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..2039a72fa0
Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..b25ff249c6
Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..e792edb0bb
Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..a87ca5e6ef
Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..f355e7a619
Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..d0d396307c
Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-rtl-light-Mobile-Safari-linux.png differ