What the heck does the icon mean?

I did two experiences the other day, and it gave me surprising results.

Disclaimer

I’ve tried to ask as many people as possible, but I don’t pretend it’s a representative sample of the population.

I’m not pretending I’m the truth here. It’s just something that bothers me in some web designs, and I want to share my thoughts.

First experience with an extravagant icon

I’ve added a link with a random SVG icon in my blog header, and I’ve asked various people (in gender, ages, etc.) a simple question.

The question

The first icon I’ve used was a lightning-bolt SVG icon:

The question was:

What does the icon mean to you?

As the question was quite open, I received long answers, but don’t worry. I’ll only talk about results here.

The results

Developers and designers truly believed it was some dark mode switch. Still, a significant part of them told me they would have used something else, such as a real toggle button, or more conventionally, a sun and a moon SVG icons.

Non-technical people had very different answers. Most of them told me about electricity and possibly a danger icon, but they did not understand why the heck it’s in a blog header.

Three of them believed that it was my site logo.

None of them was right. It was an icon for a search page.

I’ve surrounded it with a link to the search page, so even if you don’t understand it, you click, and you see.

Still, we all can agree it was a pretty stupid idea to use such an icon and hope people will understand it.

What about a real search icon?

Second experience with an “appropriate” icon

This time, no joke, I’ve used a conventional search icon:

The question was the same:

What does the icon mean to you?

The results

As you might guess, a significant part, including both technical and non-technical people, was right this time.

Still, two of them believed it was the zoom.

What’s the point?

Stick to conventions. Even with that, not everybody will get what you mean.

I don’t understand all icons I see, so imagine the situation for people with visual and cognitive impairments.

Don’t get me wrong. I usually find those icons pretty, but my point is they sometimes add more confusion, while a simple text would probably do the job better.

If you look at some very popular CMS, such as WordPress, you have built-in font icons such as Dashicons. This font is excellent, and I know they have accessibility in mind for sure, but I don’t get the actual meaning of some icons.

Some of them are easily recognizable; some of them are not. It gets sometimes worse when plugins and themes developers are allowed to use them for their custom pages.

Wrap up

Icons are everywhere. They are pretty but sometimes confusing.

From an a11y perspective, and apart from specific attributes you can use to label or hide your icons (e.g.,aria-hidden="true"), it’s tough to make them accessible and meaningful.