25 Icons With Universal Meaning

And 5 practical tips for improving the usability of icons

uxplanet.org
Published in
5 min readDec 7, 2020

--

Icons help designers avoid visual clutter, and make UI more aesthetically pleasing. But at the same time, not all icons are universally clear to our users. Usability suffers when users have a hard time decoding the meaning of an icon.

A user’s understanding of an icon is based on previous experience. That’s why it’s always better to use familiar icons.

In this list, we will share a collection of universally understood icons and some practical tips that will help you improve your product’s usability.

1. Home

Home

2. Search

Search

3. Filter

Filter

4. Edit

Edit / modify

5. Mail / Messages

Messages, mail

6. Folder

Folder

7. User profile

User profile

8. Loading

Infinite spinner

9. Print

Print

10. Like

Thumb up
Love

11. Notifications

Notifications

12. Rate

Rate item

13. Bookmark

Bookmark

14. Share

Share icon in iOS

15. Download

Download item

16. Sound / Volume

Sound OFF/ON, Volume UP/Down

17. Delete

Delete item

18. Photo

Photo gallery, Photo camera

19. Video

Video gallery, Video recording, Video conference

20. Settings

Settings

21. Media controls

Play
Stop
Rewind

22. Calendar

Calendar

23. More

More

24. Location

Location

25. Secure

Secure

5 Practical tips for improving icons usability

1. Platform visual style

Familiarize yourself with icons commonly used on the platforms that you target. For example, all major platforms have different visual style for sharing icon.

Share in Android
Share in iOS (since iOS 7)
Share in Windows (prior to 2017)

2. Avoid adding too many details to icons

Keep icons simple and schematic. Visualize essential characteristics of an object. By doing that you will speed up the design process (it will be easier to design icons for graphic designers) and improve icon recognition (it will be easier to understand the meaning of icons for users).

Too many details
Just enough details

But at the same time, do now oversimply the icon.

Oversimplified icon

3. Use five seconds test to test the meaning of your icons

If you must design a new icon, always test it. Give users five seconds to look at an icon and ask them what this icon means. If users tell you that they don’t know, this feedback will indicate that the design needs improvement.

4. Use text labels to communicate the meaning

Icon with a label works better than an icon alone or label alone. Text labels can reduce ambiguity and help users decode the meaning of icons.

Calendar

5. Mind icons location

UIE conducted two experiments to test how people use icons. In the first experiment, they changed the pictures of the icons, but kept them in the same location. They found that users quickly adapted to the new imagery without much problem. In the second experiment, they kept the original pictures, but shuffled their locations on the toolbar. As a result, users really struggled with this. It means that the location of the icon is more important than visual imagery.

Want To Learn UX?

Try Interaction Design Foundation. It offers online design courses that cover the entire spectrum of UX design, from foundational to advanced level. As a UX Planet reader, you get 25% off your first year of membership with the IxDF.

--

--