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.
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).
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.
Color
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.
Error
#d32323
Active
#0097ec
Warning
#fbb044
Neutral grey
#999
Black
#333
Linked
#0073bb
Success
#41a700
Inverse
#fff
Inactive
#cccccc
