Iconography
Icons help users navigate through our products, draw attention to important messages or actions, and show status.
Principles
Clarity
When possible, it is encouraged to use symbols that convey the most literal meaning of your message or action. If a literal symbol isn’t possible, abstract symbols can be learned over time, but it is important to consider if there are existing metaphors or related symbols that can be used.
Alignment
Alignment and readability ensure that our icons can be understood at a glance and at small sizes. This means working with simple shapes (keylines) and white space to create icons that are recognizable and feel balanced.
Consistency
Stroke thickness, size, and corner radius are some of the properties that are considered to create a harmonious icon set.
Efficiency
Simplifying and avoiding complex shapes speeds up comprehension, especially at smaller sizes.
Avoid tilting or rotating to create dimensional shapes
Icons should appear flat wherever possible
Avoid complex shapes or unnecessary detail
Simplify icons for greater clarity and efficiency
