What to consider when designing Icon Colour Schemes

We have looked at accessible icons and discussed the importance of colour for establishing an icon’s meaning and purpose. Although our earlier article focused mostly on design for visually impaired users, the basic concept can be extended to all users of icons. Colour is a key identifying characteristic of any icon, and the colour scheme of an icon or icon family should be carefully considered to achieve the desired effect.

Colour vs B&W

In order to discuss colour schemes, we must first consider the purpose of colour in design, and what we want to achieve by our use of colour. In our article on creating coherent icon sets, we explored the impact of black-and-white design via some very effective icons, such as those for the game Year Walk. These icons exemplify how, in a sea of colourful icons, black-and-white icons can be refreshing and striking. However, a total lack of colour can also run the risk of making your icons appear outdated or boring. Black-and-white design can have a huge impact on the meaning and effectiveness of your icon, but must be carefully executed in order to work.

Icon Colour Schemes

In order to be effective, the icon colour schemes should be integral to your icon, rather than an afterthought. What is the purpose of the colour in your design? Does it link the icon to a brand, or provide other information about the icon’s function? In iOS 7 the messaging icon is green with a white speech bubble. Whatsapp’s icon is also green, with a white outline of a speech bubble of a slightly different shape. In this case the use of a similar colour scheme works in Whatsapp’s favour, as it creates a recognition of the app as a messaging app and an alternative to the default messaging application.

iOS7 Messenger App Icon colour schemes

Similarly, various Twitter apps draw on the same colour scheme to identify their association with the social network. Indeed, if you are creating an icon for a pre-existing company, their brand’s colour scheme is the ideal starting point for your design.

Pre-existing apps and icons

Another category of resources that can provide excellent reference material for new designs is pre-existing apps and icons. However, one must exercise caution when drawing on such sources. A design with too many similarities to another icon or brand can unintentionally infringe on copyright. Take as an example Facebook’s distinctive colour scheme: legal matters aside, designing an icon with these colours and in a manner that looks too close to Facebook’s logo could mislead users. This could also invite bad reviews and negative feedback, regardless of the quality of the design and app content.

Thus we can safely say that an awareness of famous and recognisable colour combinations is essential when creating icon colour schemes for a new design.

For help with the specifics of choosing colours, there is a vast range of resources available online.

Looking for amazing Custom Icon Design?

Professional custom designed Icons look gorgeous, aid navigation & user experience. We have a team of 8 fantastic Icon designers ready to transform your software.

Check out our Icon Design services:

Show me great Icon Design Now!


Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.