Icons symbolise actions, objects, or ideas, and can provide meaning.
Purpose
Icons have a clear functional purpose, with the added benefit of being able to enhance the aesthetic appeal of an interface and add brand personality. Use them in interfaces to make them easier to read in a language-independent way.
Use to quickly recognise an action, object, or idea
Icons should be used to make an interface easier to read and make it clearer for a user what to expect.
Icons should communicate a clear meaning
An icon is not mere eye candy and should immediately communicate its meaning. Strive for language independency.
Application
Icons always represent a certain element on the screen. They should add value and are not meant as decoration, although they can enhance the look and feel of an interface. Icons are often used in (interactive) components or to accompany text to make actions clearer and to improve readability.
Strive for meaning and consistency
As mentioned, try to strive for a language-independent meaning or, if not possible, at least an overall consistency within the product. This enables the user to better understand what the icon represents. A user’s understanding of an icon is based on previous experiences with the product and/or other digital experiences they’ve had.
Icons often need accompanying labels
Icons can save space and make a product more ‘clean’ and aesthetically pleasing. Therefore, it could be tempting to use an icon as a stand-alone element without any text label. However, because a language-independent (universal) meaning is not always, or even often, possible, icons should be accompanied by a label quite often. If the icon is very clear and globally understood, an exception can be made. In that case, they could be applied without a label (as an icon-only button for example).
Icons vs. Illustrations
Icons and illustrations are different things and have different use cases. Icons are functional visual assets to improve the recognition of a function or piece of content.
Illustrations are here to tell a story or highlight a piece of content. They provide a narrative, can capture multiple ideas, communicate the essence of a product, and enhance the moment in the journey. Therefore, illustrations have more in common with photography — they provide more room and are made to communicate a specific message in a playful and memorable way.
Colour variations
Icons come in various colours depending on context.
Icons usually match the label colour
Generally, icons match the (text) label. For example, the icon on a primary button is white because the label is white as well. For the icon-only variant of a button, this logic remains the same.
Icon colour and visual hierarchy
There are elements or components that consist of multiple icons and may require more emphasis and visual hierarchy. In these cases, the primary icon (indicating the subject) uses the Primary 500 colour. For notifications, a signal colour is used.
Sizing
All icons are originally created on a 24×24px bounding box and are intended to be used that way within our digital products.
