They are everywhere and play a vital role in web design. Even though they can be quite small, they are everywhere and they play many different roles, especially in web design. You can find them on any interface, road sign, or keyboard. Icons help us to better understand and interpret information and can be a great way to bring essential content to the point.
Readability
It’s all about readability. How well can people grasp the main points and how easily can they read and process information? Icons can help in several ways to support your content.
Save visual space
They can label, inform and aid navigation quickly and effectively in minimal space, which makes them highly useful in limited digital environments and in diagrams, maps and other forms of visual communication.
Make a connection with the user
Icons offer a form of visual shorthand that we are all familiar with. They are a great attention grabber and they help your website visitors to find and scan content.
What to consider when using icons
- When you use icons for your own design, make sure you base them on metaphors that people understand or introduce them together with more descriptive text.
- When you place icons on your site, keep the proximity principle in mind and group them with content they relate to.
- Don’t forget to define consistent sizes and margins to keep your design clean. Multiple file formats included. Available in Studio, Sketch, Illustrator, EPS, isolated SVGs, and PNG.
- Take out the guesswork: Intuitive icons reduce frustration and improve the user experience.
Users should be able to understand, without thinking, what that symbol means. If they can’t, this can lead to some serious usability issues.
Different universal meaning
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.
Sources:
https://uxplanet.org/25-icons-with-universal-meaning-3ac48d22c686
https://venngage.com/blog/symbols-and-meanings/
https://venngage.com/blog/symbols-and-meanings/#7
https://medium.com/outcrowd/icons-in-web-design-824f57cb2db0