This article suggests the major website icon trends and tips for designing good icons, as well as the principles of using them on a website.
The fact that everyone loves icons is undeniable. Nevertheless, they can either make or break the interface – it all depends on how they are designed and used. Understanding their key roles on the website will only add clarity into the preparation process.
Speaking of icons in general, they’ve been invented to simplify everything: interface usability, concept perception and the design process. Instead of reading huge piles of website content, users can simply scan through the boxes of text with the elegant icons attached. Or they can also navigate through the website with the help of tiny and well-recognised icons. In fact, modern website design trends cannot go without icons, but icons have their own trends too. And if you are up looking for an attractive and engaging website, sooner or later you will have to admit that trends matter (even if some of them seem odd to you).
Flat icons – they sometimes seem to be so simple that you start wondering why everyone loves them at all. However, present-day reality says that simplicity is the biggest source of creativity. The principle of designing flat icons is simple – you extract only the most important elements from an object, no unnecessary details, no complex graphics and finally, no gradients. It was hard for the community (of both designers and customers) to let the gradients pass away, but it finally happened. And one more thing about flat design is that it uses its own flat colours.
Thin icons – this is quite a young trend that keeps gathering attention and admiration. It all started with Apple when they did quite a nice job with their icons. So don’t be shocked when you see them called Apple-style icons.
Material icons – are in fact not all that different from flat icons as they use the same clean and minimalistic approach. However, material design allows more three-dimensional arrangement of layers. In other words, the icons look more realistic due to the complexity of graphics and colour selection.
Even if you create modern-looking and trendy icons, you can still mess it all up. Result – poor usability, style incompatibility, content inconsistency. There are actually a few more factors to take into account when creating icons for a website:
Another factor that should be decisive for a UI & UX website designer is the use of text next to navigation icons. Considering responsive design and cleaner interfaces, it’s become trendy to substitute text buttons with small icons. To simplify the interface, do not be afraid of text, especially next to icons that can cause ambiguity or confusion.
However, even if you decide to use icons without text, try to test how recognisable they are – ask a few people whether they understand their meaning without any context and hints. Also, take regional peculiarities into account – one and the same icon can mean different things in two different countries.
The biggest tip for designing and using icons on your website is making sure they convey the message clearly. The topic of icons still has a lot of aspects to dig into. Feel free to ask anything you are uncertain about and join us in the comments.