"Locked" and "secure" icons in one interface

Question

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.)

Answer 1

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.

Answer 2

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?

Answer 3

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.

Answer 4

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?

Answer 5

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.