In case of a need to show both "locked" and "secure" icons on one element in an interface (let's say it is one of many tabs in an internet browser, where 'locked' and 'secure' refer to different things), what would be the right choice to make these distinct?

(By the way, I assume that a "certificate" icon is not recognizable enough.)

  • Can it be both locked and secure at the same time? Commented Sep 14, 2013 at 5:59
  • 2
    It would be helpful to know what locked and secured mean in the context of your project. How do they differ?
    – oefe
    Commented Sep 14, 2013 at 8:06
  • "Locked" means that an element is temporarily locked for any changes (cannot be moved, edited, removed before unlocking). "Secure" refers to the content that is guarded with an SSL certificate. Commented Sep 14, 2013 at 8:19
  • 3
    Locked = Lock, Secured = Shield. Simple story :P
    – SeToY
    Commented Sep 14, 2013 at 12:06
  • 2
    Don't forget, it could be hard for users to distinct the icons meaning so it's better not rely on icons only. Commented Sep 14, 2013 at 14:53

5 Answers 5


In this case, "locked" seems like the odd one out.

Secure means it's secure, guarded, etc. So a shield, a lock, something along those lines would seem appropriate.

"Locked", however, is used as a way of saying something's not editable. This might not be the right choice given this context. (as @obelia already pointed out)

It's hard to give a practical answer without first having a look at what the interface looks like, so bear with me;

  • You could attempt to make the "un-editable" elements like there's no possible interaction. Try reducing the contrast between the elements background and it's content, like how you could make an input field have a light gray background with dark gray text.
  • You could attempt to make the elements with interaction methods seem more interactive. Buttons, input field borders, high contrast, etc.

This approach (rather than two different icons) also allows users a quicker overview. When attempting to see if something is "secure", rather than attempting to distinguish icons, they'll either look for icons, or for no icons. If they'd be looking for editable fields, they'd look for the interaction pattern, or the disabled pattern.

Here's a quick mockup of some combination of icons and active/disabled states. Ignore the design, tell me if you could immediately tell me which ones were secure, and which ones were disabled. Or rather, tell me what the icons and the different row styles convey.

Quick mockup of different rows


If it's possible to change the terminology, change "locked" to "read only" (even though "locked" might be the more accurate term) it might reduce confusion. "Read only" could be indicated with a pencil with a red circle/slash overlay and "secure" with the conventional HTTPS padlock.

Basically making the terminology less precise in exchange for more distinct symbology. So the question is is this exchange a net gain?

  • 2
    I don't see how 'locked' is more accurate or more precise than 'read only'. For the layman, you lock doors or people behind bars; read-only means just that - something you can only read. If I tell my grandma "This file is locked, you can't change it grandma. Understand?", she'll probably go "Ah?". But if I say: "This file is read only, you can't change it.", she'll probably go: "Ah?". But if she could hear properly, I'm sure she'd be more likely to say "OK, I get it." for the latter.
    – Izhaki
    Commented Sep 16, 2013 at 23:35
  • @Izhaki - by some definitions "read-only" things can be moved and deleted, actions the OP has declared can't happen to "locked" things. pcsupport.about.com/od/termsr/g/read_only_file.htm
    – obelia
    Commented Sep 16, 2013 at 23:42
  • 1
    +1 for different terminology. Depending on the reason for "locking" an item, something like "no edits" or "in use" or "in progress" might be more clear (or at least starting points for a word search).
    – quietmint
    Commented Sep 16, 2013 at 23:50

I can't really beat obelia's idea, but in case a read only icon is not an option, see a few security icons below.

The main problem is that often secured things are locked behind something. So to prevent this ambiguity consider:

  • Locked: Padlock / Keys
  • Secured: Shield / Rook

Whatever you pick, you may want to consider including a legend.

A few security icons Even more security icons


You may try to use the idea of a seal for secure (I see you don't want "certificate") or shield as people say.

I don't know what "locked" means in your case, but maybe "pinned" is OK?


Depending on what "locked" means in practice, one possibility for the "locked" icon is one in the style of a "no entry" sign. Then a padlock icon, or one of the other standard suggestions mentioned in other responses, could be used for the "secure" icon.

It might be easier to choose an icon to convey "no entry" if you know more about your users, e.g. what country they are from, and thus what road signs they may be familiar with.

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.