Icons@knitui/icons

Icon

The icon package wraps Tabler icons with lazy-loaded web and native entry points. Use Icon with a registry name, or import a generated Icon* component directly.

WebiOSAndroid13 own props5 examples

Stories Source Open in Storybook

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

Playground

Loading playground…

nameRegistry name for the icon to render.

size

color

stroke

Playground

<Icon
  name="activity"
  size={48}
  color="#111827"
  stroke={2}
  title="Activity"
  fallback={<div style={{ width: 48, height: 48 }} />}
/>

Examples

Sizes

Loading example…

SizesSource Storybook

Stroke Widths

Loading example…

Stroke WidthsSource Storybook

Colors

Loading example…

ColorsSource Storybook

Registry Gallery

Loading example…

Registry GallerySource Storybook

Props

Prop	Type	Default	Description
`name` required	`"number" \| "function" \| "ab" \| "ab-2" \| "abacus" \| "abacus-off" \| "abc" \| "ab-off" \| "accessible" \| "accessible-filled" \| "accessible-off" \| "access-point" \| "access-point-off" \| "acorn" \| "acrobatic" \| "activity" \| "activity-heartbeat" \| "…` activity · alert-circle · arrow-up-right · bell · brand-github · calendar · camera · check · cloud · device-desktop · heart · home · mail · search · settings · star · user · wand · world · x	`activity`	Registry name for the icon to render.
`accessibilityLabel`	`string \| undefined`	—
`aria-hidden`	`boolean \| "true" \| "false" \| undefined`	—
`aria-label`	`string \| undefined`	—
`children`	`ReactNode`	—
`className`	`string \| undefined`	—
`color`	`string \| undefined`	`#111827`	Stroke color for outline icons, fill color for filled icons. Defaults to `currentColor`.
`fallback`	`ReactNode`	—	Suspense fallback used by the dynamic `Icon` component while a lazy icon loads.
`size` system	`string \| number \| undefined`	`48`	Width and height of the rendered SVG. Defaults to `24`.
`stroke`	`string \| number \| undefined`	`2`	Outline stroke width. Ignored by filled icons. Defaults to `2`.
`strokeWidth`	`string \| number \| undefined`	—	Alias for `stroke`; takes precedence when both are provided (mirrors native Tabler).
`style`	`unknown`	—
`testID`	`string \| undefined`	—
`title`	`string \| undefined`	`Activity`	Accessible title. Rendered as `<title>` on web and mapped to `accessibilityLabel` on native.