I am working on a device where the admin can require the user to log into the device into order to use it. The developers originally used a closed lock to show that a user is is "locked out". Developer Version

For some reason, for me, it makes more sense for a user that the locked icon is that they are securely in the system. However, I cannot put my finger around why "securely logged in" is a closed lock when most devices use a padlock to show you are locked out.

Alternative Version

I ended up with an alternative with a user-based icon, but now I am really curious: when a user is securely logged in, is the padlock open or closed?

Edit: thanks for the responses. It all makes a lot more sense now.


9 Answers 9


Typically the locked padlock is used to indicate to the user that an action/item is secure.

For example in your web browser:

enter image description here

Alternatively a locked padlock can be used to show that information is not accessible and requires login or other form of security to access.

For example the padlock icon is used on Mac OS to show that you need to provide authentication to make changes, but only in conjunction with a text label:

mac padlock locked icon

An open padlock is then displayed to show that changes can be made:

enter image description here

I would be very careful before using a padlock to denote logged in/out status.


Locked icons are most prevalently used to communicate whether data being submitted is secure or not and generally not the state of log in or not. Generally when you're logged in, you are "secure" and therefore a closed locked icon is used. You can however be not logged in and still submit secure data through https. Your chrome browser (and many other browsers) use the closed locked icon when https is certified indicating your connection is secure as is the data being submitted. Submit buttons (especially when submitting payment details) often use a closed lock icon to indicate and convey the data being submitted is secured.

I think in your first case, the lock is signifying that something is locked and you need to log in to unlock it, but is not referring to the security of your connection. So the analogy here is that the login is the "key" to the lock. The lock in this case then is not referring to the state of your connection but the accessibility of the content. Whether this is clear to your users or not you'll probably only know for sure by user testing.


I would use the "blocked" icon (circle with a line) instead of a "lock" icon since "lock" has been overloaded with meaning.

Something like this:


download bmml source – Wireframes created with Balsamiq Mockups

This allows you to still use the lock for logging in securely.


I think the lock is just confusing:

Maybe try a little house icon with a stick man inside it - signifying the user is logged in

If you need a logged out icon put the stick man next to the house.


A closed padlock is used for most login scenarios. I've never come across a open padlock unless some feature specifically allows users to lock/unlock some content. The lock and key seem to be used interchangeably to indicate login. Locks are also regularly used to indicate private/inaccessible information. Most websites use just text to accomplish the same - Use "Login" to indicate logged out status and "Name/Initials" to indicate logged in status. Seeing their name or profile image is probably the quickest confirmation to users that they are logged in. You can use red and green circles to accompany the text for a more visual cue.


Lock icon means you can't change the items status or data. It does NOT communicate whether the user is logged in or not or needs to login or not. In this case, show the text Login and for logout/sign out.


It is an unusual icon to use in this situation and I would avoid it. But if you have decided to go that way - I would suggest that a closed padlock means that the you are outside of the area and cant change it. The metaphor would be that you see a locked door to a room, meaning you can't access what's inside.


One of the things we found, when trying to conduct the same research, was that a lock, especially when referring to a login or paywall, can also be confusing, as it indidcates to many users that this feature is inaccessible to them.It's easier to use a key, to indicate the feature can be accessed:

enter image description here

Also, it's good to let users know what's behind the button, so they know what they're getting to, once they've passed the login/paywall process:

enter image description here


This is an old question, but it seems the currently adopted icon for logging in is a arrow going into a box. Conversely, the icon for signing out is a box with an arrow coming out of it.

See font-awesome's icons

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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