Icon for unmasking passwords (open or closed to begin with)? [duplicate]

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?

Example:

  • 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"

Tags: , , , , , ,