Iconography
One icon set, two variants, three sizes. Mixing variants is the fastest way to make a screen look unfinished, so only outline and filled are allowed.
Icon set
The docs and registry use Tabler Icons (MIT), but you can use any icon set or font you like.
Variants
Outline everywhere. The filled prop only for a selected or on state, with the off state in outline of the same icon.
| Variant | Use for |
|---|---|
| outline | The default for every icon. |
filled | A selected or on state: the active nav item, a toggled icon button, a filled star. |
Never change the stroke width; pick a different icon instead.
Sizes
12px next to badge text, 16px in inputs, menus and sm, md and lg controls, 20px in xl controls and navigation.
| Size | Where |
|---|---|
| 12px | Badges, next to font-size-xs text. |
| 16px | Inputs, selects, menu items, and sm, md and lg controls. |
| 20px | xl controls, and navigation such as the sidebar and the tab bar. |
Icon size follows the control's size, not the pointer type or the screen width. Any other size, such as an empty state, needs a design decision and must be a multiple of 4px.
Color
Icons take the icon color tokens, or the on-color tokens on a solid fill. Never a hardcoded fill.
In code
Always pass size. Import the Icon-prefixed names from @tabler/icons-react; it works in both Server and client components.
import { IconHome } from "@tabler/icons-react"
<IconHome size={20} aria-hidden />Don't rely on the 1.5em default width and height. This is the set the docs and registry use, but any icon set or icon font works: the components take any SVG-capable React node.