- Guidelines
- React API Reference
- Blazor API Reference
Icons are visual symbols that represent actions, objects, or concepts in a concise, universally recognizable way. They enhance user interfaces by providing visual cues that help users quickly understand functionality and navigate the interface efficiently.
Guidance
| Aspect | Best Practice |
|---|---|
| Usage | Use icons to reinforce meaning, improve scanability, and provide visual cues for actions or concepts. Pair with text for clarity when needed. |
| Content | Choose icons that clearly represent their associated action or concept. Maintain consistent style and metaphors across the application. |
| Behavior | Icons can be static or interactive. Interactive icons should provide appropriate hover/focus states and feedback. |
| States | For interactive icons, clearly indicate hover, focus, active, and disabled states. Ensure sufficient contrast in all states. |
| Feedback | Interactive icons should provide immediate visual feedback. Consider subtle animations for state changes when appropriate. |
| Examples | Navigation cues, action buttons, status indicators, or informational elements. |
Best Practices
- Consistency: Use icons consistently throughout the interface for the same actions or concepts.
- Recognizability: Choose widely recognized icons for common actions (e.g., a trash can for delete).
- Simplicity: Keep icons visually simple so they remain recognizable at various sizes.
- Accessibility: Always provide text alternatives via labels, tooltips, or aria-labels for screen readers.
- Size Appropriateness: Ensure icons are sized appropriately for their context and remain legible.
Do’s and Don’ts
Do
- Use icons consistently across the application.
- Pair with text labels for clarity when needed.
- Ensure sufficient contrast against backgrounds.
- Provide text alternatives for accessibility.
Don't
- Use overly complex or detailed icons.
- Rely solely on icons for critical actions without labels.
- Mix different icon styles within the same interface.
- Create custom icons for standard concepts that already have recognized symbols.
Additional Guidance
- Psychological Impact:
- Visual Processing: Icons can be processed faster than text, improving interface scanability.
- Cognitive Load: Familiar icons reduce the mental effort required to understand available actions.
- Universal Understanding: Well-chosen icons can transcend language barriers and aid international users.