Icons are visual symbols that carry meaning.
Concepts and actions, conveyed at a glance.
Meaning at a glance.
System icons convey essential meaning so users can recognize actions and statuses at a glance. Some represent product-specific concepts; others follow widely-recognized conventions.
Use icons effectively.
Clarity and simplicity
System icons should be simple and recognizable without a learning curve. Avoid overly detailed or abstract forms that may confuse users. Test icons to ensure users understand meaning without additional explanation.
Use icons intentionally
Use icons only where they add value or enhance usability. Overusing icons creates visual clutter and reduces their effectiveness.
Pair with labels when needed
Pair icons with text labels when their meaning may not be immediately clear — especially for actions or statuses users may be unfamiliar with. Use tooltips for less common icons.
Ensure legibility
Icons should remain clear and recognizable at small sizes. Avoid intricate details or thin lines that don't scale well. Prefer simpler, cleaner designs.
Icons by category.
Each category covers a distinct surface area — from general UI actions to chart readouts and document types.