Icons are created to aid usability, reduce visual complexity and create strong visual connections between functionality and user interface components. But despite their importance they are so often left by the wayside. Here are five tips for creating great icons:
1) Be recognisable
The fundamental goal of icon design is to create an icon which looks like the object it is supposed to represent. If your audience can’t recognise your icon then you have failed.
2) Be relevant
It should go without saying but your icon needs to have a strong connection between it’s design and it’s function. Choose an object which closely resembles it’s task from the real world. For example, a piece of paper would be suitable for a print icon but what would be even better is an image of a printer. A piece of paper could be interpreted as creating a new document, changing the layout or adjusting page settings. Whereas a print icon is universally understood for printing out the document.
3) Utilise both shape and colour
Around 5% of men are colour blind which means that similar icons cannot be distinguished just by their colour, shape also needs to be considered. Take this example for instance, your website has a status indicator for when your items are in stock: red for out-of-stock and green for in-stock. Now if you were just to have red and green circular icons then users may find it difficult to distinguish between them. What would be a good idea is to have a cross in the red icon and a tick in the green icon. Problem solved.
Also colour is great for distinguishing between different icons as users can associate colour with different shapes. Linking shape and colour is a great way to make your icons more recognisable.
4) Simple as possible
Simplicity in icon design is essential to ensure clarity with small icons. However there needs to be a balance struck between designing something simple and designing something so simple that it doesn’t look like it’s supposed to.
Give your icons the same style across your website or application. The style should fit in with the rest of your website design and brand. For example, don’t choose a cartoon style for a professional accountancy firm.