# 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. |

An active nav item uses the filled icon and an inactive one uses the outline icon of the same shape.

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.

```tsx
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.