Icons

Overview / Hero - KL

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.

Overview / Appliance
Overview / Appliance2

 

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.

Overview / Icons-Illustrations

 


 

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.

Overview / Colour1

 

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.

Overview / Colour2

 


 

Sizing

All icons are originally created on a 24×24px bounding box and are intended to be used that way within our digital products.

Overview / Size