A set of icons for Web, iOS & Android applications

The set

This set has 200 individual icons that support various actions and metaphors all across the product. They are designed to work in small sizes, play nice with the typographical context and to look consistent when used next to each other.

Finding suiting metaphors

Sketching provides a fast way to explore various directions for a metaphor. One thing to keep in mind here is to search for universally recognized symbols. For example, the old set used a snowflake to represent 'cool' but we quickly found out that it doesn't translate well to other languages.

'cool' - Works in all languages
'cool' - Works only in English

Size & Position

A bounding box that is larger than the x-height, makes the icons easier to scan in a larger context. For the vertical positioning, the uppercase height (a) is used to center the label. The horizontal spacing between the label and icon is ideally determined by the inner square padding (b).

The icons are optimised towards the 14x14, 18x18 and 24x24dp key sizes

Key shapes & Bounding box

Key shapes make it easier to balance visual weights of the inner shapes. The bounding box guarantees easy implementation because every icon has equal dimensions.

Toggle icons

Besides the solid shapes, the set has outline counterparts. These are mainly used to toggle between active and inactive states. Please don’t use then in the same context as solid icons.

Illustration or icon?

When does an icon become an illustration? We draw the line at a 1 color, monolithic shape that allows colorizing and sharpness at smaller sizes. Apart from the visual clarity this is the perfect starting point for a robust, SVG-based exporting system.


Colors depending on the context are preferred over unique colors for every metaphor. As you can imagine, this will allow the needed scalability in a 200 icon set.




Neutral grey