Icon
An icon is a small symbol that helps people recognize an action, object, status, or group.
Another example
The word “Download” appears beside its icon. The text names the action, so the icon is marked as decoration.
Main parts
- 01Trigger or task context
- 02Primary control surface
- 03Feedback, focus, and dismissal
Use it when
Use familiar symbols in one style. Add visible text or an accessible name.
Do not use it when
Never mix icon styles. Emoji can change across devices, so don't use them as interface icons. Label unfamiliar symbols.
Name used in code
SVG / Icon component Before you ship
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome: Use Icon to solve this user need without losing the current context. User context: The word “Download” appears beside its icon. The text names the action, so the icon is marked as decoration. Recommended pattern: Icon. Why it fits: Use familiar symbols in one style. Add visible text or an accessible name. Do not use it when: Never mix icon styles. Emoji can change across devices, so don't use them as interface icons. Label unfamiliar symbols. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): No single official standard controls the whole term. Its meaning may change across teams, platforms, or frameworks. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Check this request
Review the current use of Icon. Definition: An icon is a small symbol that helps people recognize an action, object, status, or group. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, report the evidence you found, gaps, severity, and the smallest safe fix.