diff --git a/core/api.txt b/core/api.txt
index b6b11321b68..9cfc65f586f 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -563,6 +563,7 @@ ion-input,prop,enterkeyhint,"done" | "enter" | "go" | "next" | "previous" | "sea
 ion-input,prop,errorText,string | undefined,undefined,false,false
 ion-input,prop,fill,"outline" | "solid" | undefined,undefined,false,false
 ion-input,prop,helperText,string | undefined,undefined,false,false
+ion-input,prop,hidePasswordIcon,string | undefined,undefined,false,false
 ion-input,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined,undefined,false,false
 ion-input,prop,label,string | undefined,undefined,false,false
 ion-input,prop,labelPlacement,"end" | "fixed" | "floating" | "stacked" | "start",'start',false,false
@@ -578,6 +579,8 @@ ion-input,prop,placeholder,string | undefined,undefined,false,false
 ion-input,prop,readonly,boolean,false,false,false
 ion-input,prop,required,boolean,false,false,false
 ion-input,prop,shape,"round" | undefined,undefined,false,false
+ion-input,prop,showPasswordIcon,string | undefined,undefined,false,false
+ion-input,prop,showPasswordToggle,boolean,false,false,false
 ion-input,prop,spellcheck,boolean,false,false,false
 ion-input,prop,step,string | undefined,undefined,false,false
 ion-input,prop,type,"date" | "datetime-local" | "email" | "month" | "number" | "password" | "search" | "tel" | "text" | "time" | "url" | "week",'text',false,false
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 61f44b7dc1f..4e4f941a3d8 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -1206,6 +1206,10 @@ export namespace Components {
           * Text that is placed under the input and displayed when no error is detected.
          */
         "helperText"?: string;
+        /**
+          * Set the icon that can be used to represent hiding a password. Defaults to `eyeOff`.
+         */
+        "hidePasswordIcon"?: string;
         /**
           * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
          */
@@ -1270,6 +1274,14 @@ export namespace Components {
           * The shape of the input. If "round" it will have an increased border radius.
          */
         "shape"?: 'round';
+        /**
+          * Set the icon that can be used to represent showing a password. Defaults to `eye`.
+         */
+        "showPasswordIcon"?: string;
+        /**
+          * If `true`, a password toggle icon will appear in the input. Clicking the icon toggles the input type between `"text"` and `"password"`, allowing the user to view or hide the input value.
+         */
+        "showPasswordToggle": boolean;
         /**
           * If `true`, the element will have its spelling and grammar checked.
          */
@@ -5902,6 +5914,10 @@ declare namespace LocalJSX {
           * Text that is placed under the input and displayed when no error is detected.
          */
         "helperText"?: string;
+        /**
+          * Set the icon that can be used to represent hiding a password. Defaults to `eyeOff`.
+         */
+        "hidePasswordIcon"?: string;
         /**
           * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
          */
@@ -5982,6 +5998,14 @@ declare namespace LocalJSX {
           * The shape of the input. If "round" it will have an increased border radius.
          */
         "shape"?: 'round';
+        /**
+          * Set the icon that can be used to represent showing a password. Defaults to `eye`.
+         */
+        "showPasswordIcon"?: string;
+        /**
+          * If `true`, a password toggle icon will appear in the input. Clicking the icon toggles the input type between `"text"` and `"password"`, allowing the user to view or hide the input value.
+         */
+        "showPasswordToggle"?: boolean;
         /**
           * If `true`, the element will have its spelling and grammar checked.
          */
diff --git a/core/src/components/input/input.ios.scss b/core/src/components/input/input.ios.scss
index d17929f7016..a48a91b6980 100644
--- a/core/src/components/input/input.ios.scss
+++ b/core/src/components/input/input.ios.scss
@@ -9,7 +9,8 @@
   font-size: $input-ios-font-size;
 }
 
-.input-clear-icon ion-icon {
+.input-clear-icon ion-icon,
+.input-password-toggle ion-icon {
   width: 18px;
   height: 18px;
 }
diff --git a/core/src/components/input/input.md.scss b/core/src/components/input/input.md.scss
index f00e98db39a..6f0e62065df 100644
--- a/core/src/components/input/input.md.scss
+++ b/core/src/components/input/input.md.scss
@@ -15,7 +15,8 @@
   font-size: $input-md-font-size;
 }
 
-.input-clear-icon ion-icon {
+.input-clear-icon ion-icon,
+.input-password-toggle ion-icon {
   width: 22px;
   height: 22px;
 }
@@ -42,7 +43,7 @@
 }
 
 .input-bottom .counter {
-  letter-spacing: .0333333333em;
+  letter-spacing: 0.0333333333em;
 }
 
 // Input Label
diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss
index b8a9cabf2dc..4ec2c1df98b 100644
--- a/core/src/components/input/input.scss
+++ b/core/src/components/input/input.scss
@@ -180,7 +180,8 @@
 // Clear Input Icon
 // --------------------------------------------------
 
-.input-clear-icon {
+.input-clear-icon,
+.input-password-toggle {
   @include margin(auto);
   @include padding(0);
   @include background-position(center);
@@ -202,11 +203,11 @@
 
   color: $text-color-step-400;
 
-  visibility: hidden;
   appearance: none;
 }
 
-:host(.in-item-color) .input-clear-icon {
+:host(.in-item-color) .input-clear-icon,
+:host(.in-item-color) .input-password-toggle {
   color: inherit;
 }
 
@@ -217,12 +218,13 @@
  * However, the clear button always disappears after
  * being activated, so we never get to that state.
  */
-.input-clear-icon:focus {
+.input-clear-icon:focus,
+.input-password-toggle:focus {
   opacity: 0.5;
 }
 
-:host(.has-value) .input-clear-icon {
-  visibility: visible;
+:host(:not(.has-value)) .input-clear-icon {
+  visibility: hidden;
 }
 
 // Input Wrapper
@@ -399,7 +401,7 @@
    */
   max-width: 200px;
 
-  transition: color 150ms cubic-bezier(.4, 0, .2, 1), transform 150ms cubic-bezier(.4, 0, .2, 1);
+  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
 
   /**
    * This ensures that double tapping this text
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index 46ffd83f0d0..833069b2954 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -7,7 +7,7 @@ import { inheritAriaAttributes, debounceEvent, inheritAttributes, componentOnRea
 import { createSlotMutationController } from '@utils/slot-mutation-controller';
 import type { SlotMutationController } from '@utils/slot-mutation-controller';
 import { createColorClasses, hostContext } from '@utils/theme';
-import { closeCircle, closeSharp } from 'ionicons/icons';
+import { closeCircle, closeSharp, eyeOff, eye } from 'ionicons/icons';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { AutocompleteTypes, Color, StyleEventDetail, TextFieldTypes } from '../../interface';
@@ -162,6 +162,11 @@ export class Input implements ComponentInterface {
    */
   @Prop() helperText?: string;
 
+  /**
+   * Set the icon that can be used to represent hiding a password. Defaults to `eyeOff`.
+   */
+  @Prop() hidePasswordIcon?: string;
+
   /**
    * The visible label associated with the input.
    *
@@ -238,6 +243,17 @@ export class Input implements ComponentInterface {
    */
   @Prop() shape?: 'round';
 
+  /**
+   * Set the icon that can be used to represent showing a password. Defaults to `eye`.
+   */
+  @Prop() showPasswordIcon?: string;
+
+  /**
+   * If `true`, a password toggle icon will appear in the input.
+   * Clicking the icon toggles the input type between `"text"` and `"password"`, allowing the user to view or hide the input value.
+   */
+  @Prop() showPasswordToggle = false;
+
   /**
    * If `true`, the element will have its spelling and grammar checked.
    */
@@ -252,7 +268,7 @@ export class Input implements ComponentInterface {
   /**
    * The type of control to display. The default type is text.
    */
-  @Prop() type: TextFieldTypes = 'text';
+  @Prop({ mutable: true }) type: TextFieldTypes = 'text';
 
   /**
    * The value of the input.
@@ -451,6 +467,7 @@ export class Input implements ComponentInterface {
     if (input) {
       this.value = input.value || '';
     }
+
     this.emitInputChange(ev);
   };
 
@@ -541,6 +558,10 @@ export class Input implements ComponentInterface {
     this.emitInputChange(ev);
   };
 
+  private togglePasswordVisibility = () => {
+    this.type = this.type === 'text' ? 'password' : 'text';
+  };
+
   private hasValue(): boolean {
     return this.getValue().length > 0;
   }
@@ -562,7 +583,6 @@ export class Input implements ComponentInterface {
 
     return <div class="counter">{getCounterText(value, maxlength, counterFormatter)}</div>;
   }
-
   /**
    * Responsible for rendering helper text,
    * error text, and counter. This element should only
@@ -665,11 +685,13 @@ export class Input implements ComponentInterface {
   }
 
   render() {
-    const { disabled, fill, readonly, shape, inputId, labelPlacement, el, hasFocus } = this;
+    const { disabled, fill, readonly, shape, inputId, labelPlacement, el, hasFocus, type } = this;
     const mode = getIonMode(this);
     const value = this.getValue();
     const inItem = hostContext('ion-item', this.el);
     const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
+    const showPasswordIcon = this.showPasswordIcon || eye;
+    const hidePasswordIcon = this.hidePasswordIcon || eyeOff;
 
     const hasValue = this.hasValue();
     const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null;
@@ -693,7 +715,6 @@ export class Input implements ComponentInterface {
      */
     const labelShouldFloat =
       labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-
     return (
       <Host
         class={createColorClasses(this.color, {
@@ -742,7 +763,7 @@ export class Input implements ComponentInterface {
               required={this.required}
               spellcheck={this.spellcheck}
               step={this.step}
-              type={this.type}
+              type={type}
               value={value}
               onInput={this.onInput}
               onChange={this.onChange}
@@ -771,6 +792,27 @@ export class Input implements ComponentInterface {
                 <ion-icon aria-hidden="true" icon={mode === 'ios' ? closeCircle : closeSharp}></ion-icon>
               </button>
             )}
+            {this.showPasswordToggle && !readonly && !disabled && (
+              <button
+                aria-label="show password"
+                aria-checked={type === 'text' ? 'true' : 'false'}
+                aria-controls={inputId}
+                role="switch"
+                type="button"
+                class="input-password-toggle"
+                onPointerDown={(ev) => {
+                  /**
+                   * This prevents mobile browsers from
+                   * blurring the input when the password toggle
+                   * button is activated.
+                   */
+                  ev.preventDefault();
+                }}
+                onClick={this.togglePasswordVisibility}
+              >
+                <ion-icon aria-hidden="true" icon={type === 'text' ? hidePasswordIcon : showPasswordIcon}></ion-icon>
+              </button>
+            )}
             <slot name="end"></slot>
           </div>
           {shouldRenderHighlight && <div class="input-highlight"></div>}
diff --git a/core/src/components/input/test/password-toggle/index.html b/core/src/components/input/test/password-toggle/index.html
new file mode 100644
index 00000000000..c27c38c5bfd
--- /dev/null
+++ b/core/src/components/input/test/password-toggle/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Input - Password toggle</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(5, minmax(250px, 1fr));
+        grid-row-gap: 20px;
+        grid-column-gap: 20px;
+      }
+      h2 {
+        font-size: 12px;
+        font-weight: normal;
+
+        color: #6f7378;
+
+        margin-top: 10px;
+      }
+      @media screen and (max-width: 800px) {
+        .grid {
+          grid-template-columns: 1fr;
+          padding: 0;
+        }
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Input - Password</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content" class="ion-padding">
+        <div class="grid">
+          <div class="grid-item">
+            <ion-input
+              clear-input="true"
+              placeholder="Password"
+              show-password-toggle="true"
+              type="password"
+              value="password-test"
+            >
+            </ion-input>
+          </div>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/core/src/components/input/test/password-toggle/input.e2e.ts b/core/src/components/input/test/password-toggle/input.e2e.ts
new file mode 100644
index 00000000000..9bcf8da3a71
--- /dev/null
+++ b/core/src/components/input/test/password-toggle/input.e2e.ts
@@ -0,0 +1,18 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('input: password toggle button'), () => {
+    test('should render password icon when show-password-toggle', async ({ page }) => {
+      await page.setContent(
+        `
+            <ion-input value="abc" type="password" clear-input="true" show-password-toggle="true"></ion-input>
+        `,
+        config
+      );
+
+      const input = page.locator('ion-input');
+      await expect(input).toHaveScreenshot(screenshot(`input-with-password-toggle`));
+    });
+  });
+});
diff --git a/core/src/components/input/test/password-toggle/input.spec.tsx b/core/src/components/input/test/password-toggle/input.spec.tsx
new file mode 100644
index 00000000000..ce2b910de46
--- /dev/null
+++ b/core/src/components/input/test/password-toggle/input.spec.tsx
@@ -0,0 +1,50 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { Input } from '../../input';
+
+describe('input: password toggle button', () => {
+  it('should toggle the input type when pressed', async () => {
+    const page = await newSpecPage({
+      components: [Input],
+      html: '<ion-input value="abc" type="password" show-password-toggle="true"></ion-input>',
+    });
+
+    const input = page.body.querySelector('ion-input .native-input')!;
+    const passwordToggleButton = page.body.querySelector<HTMLButtonElement>('ion-input .input-password-toggle')!;
+
+    passwordToggleButton.click();
+    await page.waitForChanges();
+
+    await expect(input.getAttribute('type')).toBe('text');
+
+    passwordToggleButton.click();
+    await page.waitForChanges();
+
+    await expect(input.getAttribute('type')).toBe('password');
+  });
+  it('should change icon when using showPasswordIcon and hidePasswordIcon props', async () => {
+    const page = await newSpecPage({
+      components: [Input],
+      html: `
+            <ion-input 
+                value="abc" 
+                type="password" 
+                clear-input="true" 
+                show-password-toggle="true"
+                show-password-icon="bus"
+                hide-password-icon="cafe"
+            ></ion-input>
+        `,
+    });
+
+    const passwordToggleButton = page.body.querySelector<HTMLButtonElement>('ion-input .input-password-toggle')!;
+    const passwordToggleIcon = page.body.querySelector<HTMLButtonElement>('ion-input .input-password-toggle ion-icon')!;
+
+    await expect(passwordToggleIcon.getAttribute('icon')).toBe('bus');
+
+    passwordToggleButton.click();
+    await page.waitForChanges();
+
+    await expect(passwordToggleIcon.getAttribute('icon')).toBe('cafe');
+  });
+});
diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts
index d7eaecc6d81..7dcc87848de 100644
--- a/packages/angular/src/directives/proxies.ts
+++ b/packages/angular/src/directives/proxies.ts
@@ -955,7 +955,7 @@ export declare interface IonInfiniteScrollContent extends Components.IonInfinite
 
 
 @ProxyCmp({
-  inputs: ['autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'spellcheck', 'step', 'type', 'value'],
+  inputs: ['autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'hidePasswordIcon', 'inputmode', 'label', 'labelPlacement', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'showPasswordIcon', 'showPasswordToggle', 'spellcheck', 'step', 'type', 'value'],
   methods: ['setFocus', 'getInputElement']
 })
 @Component({
@@ -963,7 +963,7 @@ export declare interface IonInfiniteScrollContent extends Components.IonInfinite
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'spellcheck', 'step', 'type', 'value'],
+  inputs: ['autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'hidePasswordIcon', 'inputmode', 'label', 'labelPlacement', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'showPasswordIcon', 'showPasswordToggle', 'spellcheck', 'step', 'type', 'value'],
 })
 export class IonInput {
   protected el: HTMLElement;
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index c3156696215..ec2a5b4adb0 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -411,6 +411,7 @@ export const IonInput = /*@__PURE__*/ defineContainer<JSX.IonInput, JSX.IonInput
   'fill',
   'inputmode',
   'helperText',
+  'hidePasswordIcon',
   'label',
   'labelPlacement',
   'max',
@@ -424,6 +425,8 @@ export const IonInput = /*@__PURE__*/ defineContainer<JSX.IonInput, JSX.IonInput
   'readonly',
   'required',
   'shape',
+  'showPasswordIcon',
+  'showPasswordToggle',
   'spellcheck',
   'step',
   'type',