I'm exploring the idea of adding a hide/show icons for password visibility.

I understand we can just use the words "hide" and "show", but if we were to use icons, should its current state be shown or the state it's about to change to?

Current state:

enter image description here enter image description here

State it is about to change to:

enter image description here enter image description here


3 Answers 3


The button should show the action that will be executed when the user clicks it. In this case, the second option. It is not necessary to show the current state here, because it is already obvious by the password being hidden or shown.

If it was not a button with an action but an icon to show the current state, then the first option would be better.

  • This is what I thought so too, but from what I've seen, the first option seems to be more common? For example, Gmail.
    – M Bo
    Commented Apr 4, 2019 at 21:33

Google shows the current state. Eye crossed when password hidden Eye open when password shown

The text show and hide would be better though.


I think that the way in which the question is phrased might trap us into a false dilemma, because it assumes there are only 2 options to choose from, thus preventing us from considering other approaches.

Here is an alternative:

Password show/hide widget

In this case there is no ambiguity:

  • you see the current state
  • the state in which the interface will end up if you press the widget
  • it is clear that it is not only a "reflection of state" widget, but also an "actuator"

It is not as compact as the initial design, though it could be condensed a bit.

Another alternative would be to write show password next to the field, and replace that with hide password when the state is toggled. The text show/hide is a verb, so it signalizes that it is an action that will be performed, rather than a state in which the system is or will be.

Not the answer you're looking for? Browse other questions tagged or ask your own question.