| Do | Use semantic icon names when available — they adapt to theme changes automatically. |
| Do | Pair icons with text labels for accessibility — icon-only elements need an accessible label. |
| Do | Use color tokens for icon colors, not hardcoded hex values. |
| Do | Be mindful of context — decorative icons in compact components can distract rather than help. |
| Don't | Use icons as the sole means of conveying meaning — always provide a text alternative. |
| Don't | Resize icons with arbitrary pixel values — use the provided size props. |
| Don't | Mix icon styles (e.g. outline and filled) within the same context. |
| Don't | Render raw SVG elements — always wrap in Icon for consistent sizing and color. |