Icon
Displays vector icons with consistent sizing and color. Wraps Tabler Icons with full TypeScript support for better integration.
Code
Installation
npm install @tabler/icons-reactBasic Example
import { IconHeartFilled } from "@tabler/icons-react"
<IconHeartFilled className="w-6 h-6" />
<IconHeartFilled className="w-6 h-6 text-destructive" />
<IconHeartFilled className="w-6 h-6 text-primary" />Reference
Sizes
Colors
Usage Guidelines
When to Use
Use icons to enhance visual communication and provide quick visual recognition. Icons work well alongside text labels, in buttons, navigation, and status indicators.
Choose icons that are universally understood and relevant to the action or concept they represent. Use consistent icon sizing within the same context.
Best Practices
- Use standard sizes (16px, 24px, 32px) for consistency
- Pair icons with text labels for clarity, especially for actions
- Use color to convey meaning but don't rely on it alone
- Ensure icons are recognizable at their display size
- Maintain consistent stroke width and style across icon sets
Accessibility
Icons should have appropriate ARIA labels when used for interactive elements or when they convey important information. Decorative icons can be hidden from screen readers using aria-hidden="true".
Ensure sufficient color contrast for icons, especially when they indicate status or action. Don't rely solely on icon color to convey information.