Tips for Designing and Using Icons on Your Website

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. 

Why does the website need icons?

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

Here are a few icon trends brought from 2015 that are still expected to dominate in 2016

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:  

  1. Combining website design with the style of icons
    It will simply ruin your website interface if you use old-style website elements (like buttons with gradients, too much text) with flat or material icons. Make sure all the elements are of the same style and you use right colour combination. Quite often, businesses just decide to add a few icons to it and rearrange the text a bit. But it will only ruin your redesign project.
  2. Making sure your icons clearly represent the ideas in your text
    When you use icons for better content readability, you will always use text next to them. Ideally, both text and icons should be done by one person who will clearly show the written idea with the help of an icon. Or there should be close collaboration between a copywriter and designer to ensure the overlapping of ideas.
  3. Designing every set of icons in the same style
    Let’s say, when you have 5 content boxes that describe 5 different features of the product, it’s critical to use the same style – icons of the same thinness, either full icons or outlines, either flat or material style. Yet it’s still acceptable (and often advisable) to use a different style for another set of icons on the website, let’s say for describing the development process.

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. 

 

Author Biography

Andy Green is our Digital Creative Director, responsible for our overall creative vision. He also is an experienced interface designer.

We use cookies to improve performance and enhance your experience. By continuing to use this website you are agreeing to use our cookies.