Customization
All icons accept the same set of props for consistent customization. You can also set default values globally using a provider/plugin — see Global Configuration.
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 24 | Icon size in pixels |
| color | string | currentColor | Any CSS color — hex, rgb, hsl, named color, etc. |
| strokeWidth | number | 0.5 | SVG stroke width |
| mode | "regular" | "filled" | "regular" | Icon variant: stroke outline or solid fill |
| className | string | — | Additional CSS class |
| title | string | — | Accessible title |
Mode
Icons come in two variants. Use the mode prop to switch between them.
- regular — stroke-based outline (default)
- filled — solid fill
<CheckCircle mode="regular" /> {/* stroke outline */}
<CheckCircle mode="filled" /> {/* solid fill */}Examples
<Home />
<Home size={32} color="blue" />
<Home size={32} color="#ff6600" />
<Home size={32} color="rgb(0, 150, 136)" />
<Home size={32} color="hsl(210, 100%, 50%)" />
<Home mode="filled" color="red" />
<Home title="Go to homepage" />
<Home className="hover:rotate-12 transition-transform" />