Icons

@knitui/icons ships the Tabler set — about 6,100 icons — as React Native SVG components that work on all three platforms.

npx expo install @knitui/icons react-native-svg

import { IconCheck } from "@knitui/icons";

<IconCheck size={20} color="$color11" />;

Inside controls

You rarely size an icon by hand. Controls publish their icon metrics, and the glyph reads them:

<Button leftSection={<IconCheck />}>Confirm</Button>
<ActionIcon size="lg"><IconTrash /></ActionIcon>

Size and colour follow the control's own size and variant via ControlIconProvider and the CONTROL_ICON_SIZE ladder. See Icons.

One path per glyph

The generator merges each icon's paths into a single <Path> at build time, with a verification step comparing the merged output against the original. One draw call per icon instead of a dozen is the difference between a smooth and a janky icon list on Android.

Browse them

The full set is searchable in the Storybook icon browser.

Replacing the kit's own icons

IconProvider overrides the icons components use internally — Accordion's chevron, Checkbox's check, Combobox's clear button — without patching anything:

<IconProvider value={{ ChevronDown: MyChevron }}>
  <App />
</IconProvider>

Any component works, as long as it accepts size and color.