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

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.

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

IE:

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

Answer

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.

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.

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.