Icons
Icons are small, symbolic visuals that represent actions, objects, or ideas. They make interfaces faster to scan and more expressive, reducing cognitive load when designed and used consistently.
Philosophy
Icons serve as the visual shorthand of an interface.
They communicate meaning without words.
They enhance readability and recognition of actions.
Great icons disappear — they communicate instantly and silently.
Anatomy
Variants
Line
1.5 Stroke.
Fill
Filled with color.
Usage tips
Dos
Use consistent stroke width and corner radius across all icons.
Use icons to support text, not replace it unless universally recognizable.
Keep proportions consistent — design all icons on the same grid.
Don’ts
Don’t introduce arbitrary metaphors that require explanation.
Don’t mix outline and filled styles within one context.
Don’t stretch or distort icons to fit irregular containers.