| 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. |
| Don't | Pass a name prop — Icon uses icon (not name) to specify which icon to render. |