Take the 2-minute tour ×

What is the convention for showing toggle icons to a user? This question is specific to password unmasking, but it can easily be used in "on / off" icons et al.

In our situation, we have an unmask button at the end of a password field. The password is masked by default, and the icon is an open eye indicating "if you click me, you will see what's behind the curtain" Then the inverse is true when the password is unmasked. The eye is closed, indicating "if you click me, we will hide your password".

see the following two images.

enter image description here

enter image description here

for the user's experience, is this the right approach for this situation, or should it be the opposite?


  • password masked == eye closed icon
  • password shown == eye open icon

note: we're additionally using a title attribute on the button that says "show password / hide password"

share|improve this question

marked as duplicate by Code Maverick, ChrisF, Charles Wesley, JonW Mar 17 at 18:09


I don't have enough rep to vote-to-close on this site. Just found my answer here. "if the toggle is an action - Play/Pause - then it should show the thing that will happen. So while paused it would show Play and then while playing show Pause. If the toggle is an option - Shuffle/Linear - then it should show the current state." –  Chase Florell Mar 17 at 16:46
Thanks @ChrisF. The unfortunate thing about that question is that it doesn't have a "clear answer" but more a debate in all the comments. Ugh. –  Chase Florell Mar 17 at 17:07

3 Answers 3

I wouldn't complicate the situation by using a non standard icon. Just make a button that says "show password" (or "unmask", "reveal" or similar). The button should be pushed in in that state, so clicking it again unpresses the button. A checkbox accomplishes the same thing.

share|improve this answer
I agree that text is the clearest approach, but often wordiness gets in the way (imho). It's like using the words play to play a track on your media player, and then switch to pause when it's playing. Icons are the clear winner in this case. –  Chase Florell Mar 17 at 16:49
In that case - combine an icon with text. Remember that switching icon/text on a button on each click can complicate things. "If I press the button - will I get to the state the icon says or am I now in the state the icon says"... –  Henrik Ekblom Mar 17 at 16:51
I like the quote I found on that other page (see my comment on the question). It's becoming more common to just see an icon (like the Windows 8 UI). However, in windows 8 they don't change the icon, only the background color (see the first image in @MervinJohnsingh's answer). –  Chase Florell Mar 17 at 16:52
Well, that's the way you should do it if you have a switch button. There are (as I stated above) possible interaction problems by doing so though... –  Henrik Ekblom Mar 17 at 16:53
It'd be more obvious to me as a user to see <p class='help-block><a>Show Password</a></p> below the field. Just toggle the text depending on the status. –  Michael Calkins Mar 17 at 17:33
up vote 1 down vote accepted

While the other answers are helpful in directing us to use text rather than imagery, they don't seem to answer the question. The best answer is actually found in another question.



So in the case of this question, the imagery posted in the question would be the proper convention.

IE: since the switch is an action, we want to show an icon indicating what pressing it will do, not the state it's currently in.

An additional "helper" to this would be to use a mouse over title to describe it's purpose.

<!-- html example -->
<button type="button" 
        title="Show Password">          <!--  this is the title -->
        <span class="fa fa-eye"></span> <!--  this is the icon  -->
share|improve this answer

The commonly used icon for showing passwords is the eye icon which when clicked shows the passwords as given below

enter image description here

However since the concept of revealing passwords is still unknown, a simpler approach might be to just use a checkbox to reveal the password

enter image description here

This can be easily understood by users.

To quote this article


Another approach is to provide a checkbox for unmasking. Thus, when the user types their password, it is masked, but when they check the box, it gets unmasked, allowing them to see whether they’ve made a typo. A little more effort is required with this approach with the checking and unchecking, but it’s far better than a password-confirmation field because it enables users to see and fix their typos with ease.

enter image description here

Another advantage is that users can check the checkbox as long as needed to allow them to read the password at their leisure while with an icon you have to keep it pressed and hence the user has to keep on interacting with it.

Another advantage is that its accessible to screen readers as users can quickly understand what checking the checkbox does.

share|improve this answer
our icon is essentially masking a checkbox-like functionality. click to show, click again to hide. –  Chase Florell Mar 17 at 16:47
A text label is almost always a better alternative - if there's screen space for it. –  Henrik Ekblom Mar 17 at 16:47
There's some small risk in doing this: If a user starts entering a password and leaves, someone else could use the button to reveal what the user may have supposed to be hidden. The risk is small, but I'd be glad to hear about a remedy (to avoid the risk, some chose to clear the password if the user makes it visible). –  maaartinus Oct 19 at 18:37
