Icons
The icon set is Tabler Icons: 5,184 outline icons and 1,054 filled ones.
Sakani uses Tabler Icons, the same set as the Figma Icons (Tabler) page, where the outline icons are grouped by category and the filled ones live in their own set. Every component in the library renders these icons too.
They live in @sakaniui/react/icons, one component per icon, so an app ships only what it imports (about 1 kB per icon). Names follow Tabler (IconHome, IconHomeFilled), so tabler.io/icons is the search. Props follow lucide-react, and any prop that takes an icon still accepts Lucide or Tabler React icons.
Outline and filled
Use outline icons for normal UI. Filled versions exist for 1,054 icons; use them for the "on" state, such as a selected nav item, a liked heart or an active filter.
Moving from lucide-react
Same props, so an alias in the import is enough. Some names differ from Lucide (House is IconHome, TriangleAlert is IconAlertTriangle); search tabler.io/icons when unsure.
All icons
Click an icon to copy its JSX.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | string | 24 | Rendered size: px or any CSS length. '1em' follows the surrounding text. |
| color | string | 'currentColor' | Icon colour. By default the icon takes the text colour around it. |
| strokeWidth | number | string | 1.5 | Line weight in the 24-unit grid, the Figma icon stroke. Ignored by filled icons. |
| absoluteStrokeWidth | boolean | false | Keep the line weight constant in pixels as size changes. |
| title | string | Accessible name. Without it the icon is decorative (aria-hidden). |
Icons by Tabler (MIT licence). The package ships the licence notice in THIRD_PARTY_NOTICES.md.
Why it works this way
Why
- The icon set is Tabler Icons, the same icons as the Figma Icons (Tabler) page, so a designer's icon maps to a component by name with no guessing.
- Names follow Tabler (IconHome, IconHomeFilled), so tabler.io/icons works as the search for both designers and developers.
- Props follow lucide-react and the default stroke is 1.5, the Figma icon stroke, so swapping existing Lucide icons is a find-and-replace and the weight matches the file.
- Each icon is its own module, so an app ships only the icons it imports (about 1 kB each).
Don't
- Don't mix Tabler and Lucide icons in the same view. Their shapes and proportions differ, and the mismatch shows side by side.
- Don't use filled icons for decoration. Filled means on: a selected nav item, a liked heart, an active filter.
- Don't give a meaningful standalone icon no label: pass title, or put visible text next to it.