# The Password Eye Dilemma -What’s the Right UX?

You’re working on a login screen. You’ve got the email field. You’ve got the password field. You add a simple "eye" icon to toggle visibility.

…and then the brain hits pause:

<div data-node-type="callout">
<div data-node-type="callout-emoji">🤔</div>
<div data-node-type="callout-text"><strong>What icon should I show beside the password field?</strong></div>
</div>

* Should it be an open eye when the password is hidden?
    
* Should it be a closed eye when the password is hidden?
    
* What happens after the user taps?
    

Let’s unpack this tiny but surprisingly common UX debate.

## Two Common Approaches

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1753864989784/17c982ed-6403-40ca-997e-aa2b5e7e61b8.png align="center")

### Option 1: Open Eye = Tap to reveal password

* **Eye icon (👁️)** = Password is hidden → tapping it reveals password
    
* **Eye-slash icon (🙈)** = Password is visible → tapping it hides password
    

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">This approach is more <strong>instructional</strong>. The icon indicates what will happen if you tap it: a “show password” or “hide password” toggle.</div>
</div>

**Pros:** Suggests the action.  
**Cons:** Technically shows the opposite of the current state.

### Option 2: Open Eye = You’re seeing the password

* **Eye icon (👁️)** = Password is visible
    
* **Eye-slash icon (🙈)** = Password is hidden
    

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">This is more <strong>descriptive</strong>. The icon represents the current state of the password field.</div>
</div>

**Pros:** Matches the meaning of the icon.  
**Cons:** May confuse users who assume the icon is a button to reveal the password.

## Alternatives to Consider

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1753865656423/68a753a5-e9ee-4b5b-83cf-f77bf5442d01.png align="center")

* Use text: `"Show"` / `"Hide"` — like LinkedIn
    
* Use a checkbox with a label (☐ Show password) — like Google
    
* Use a toggle switch (less common but clearer)
    
* Skip the toggle if you're using Apple’s secure autofill
    

## What Do the Giants Do?

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1753865894475/d495fa1e-f0fe-46a7-ae06-8e240a757146.png align="center")

*\*Checked on July 30, 2025.*

**Google**

* Uses a **checkbox** labeled `Show password` under the input field
    
* No icon, no visual toggle. Just plain and accessible.
    

**LinkedIn**

* Uses a **text toggle button** that says `Show` or `Hide`
    
* Appears inside the password field on the right side
    

**Facebook**

* Uses the `Open Eye = You’re seeing the password` approach
    
* No label or text, just the visual indicator
    

**Apple & Microsoft**

* Do **not** use any visibility toggle at all
    
* Prioritize security and assume passwords are masked for a reason
    

## So... What’s the Standard?

**Short answer:** Both are technically acceptable.

**Long answer:** It depends on the UX logic you want to prioritize.

There’s no official Apple Human Interface Guidelines or Material Design guideline that mandates either approach, which is why different teams do different things.

However, the most intuitive and commonly accepted UX today is:

* Default: Crossed eye (password is hidden)
    
* Tapping shows password → icon switches to open eye
    
* Optional: **Add a tooltip or accessibility label for extra clarity**
    

There’s no absolute “standard,” but consistency and clarity should always win.

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">If your user base is broad (or less tech-savvy), lean toward the checkbox or text toggle. If you're designing for power users or mobile-first apps, the eye icon works well. Just make sure its meaning is clear.</div>
</div>