Data Display@knitui/components

ThemeIcon

ThemeIcon is the canonical icon chip — a themed square that holds an icon. It models ActionIcon's frame (square size, variant-driven fill, radius rounding) but is NOT interactive. A bare @knitui/icons icon dropped inside auto-sizes and auto-colors to the chip. Accent comes from the theme prop, never a color prop.

WebiOSAndroid1 own props9 examples

Stories Source Tests Open in Storybook

import { ThemeIcon } from "@knitui/components";

Playground

Loading playground…

variantVisual variant — how the theme color ramp is applied.

sizeControls the square width/height and radius.

radiusTheme radius token (e.g. `$sm`) or any CSS value.

shadowElevation — drop shadow from the shared ladder.

theme

Playground

<ThemeIcon
  variant="filled"
  size="md"
>
  <IconStar />
</ThemeIcon>

Examples

Variants

Every visual variant side by side.

Loading example…

VariantsSource Storybook

Sizes

The five sizes, from xs to xl.

Loading example…

SizesSource Storybook

Shadows

Each elevation level from the shared shadow ladder.

Loading example…

ShadowsSource Storybook

Themed

The palette ramp follows the active theme.

Loading example…

ThemedSource Storybook

Gradient

variant="gradient" fills the chip with a linear gradient. With no gradient prop it falls back to the theme ramp; otherwise pass a two-color shorthand, $colorN tokens, or a multi-step stops array. The icon auto-colors white.

Loading example…

GradientSource Storybook

Gradient Presets

A set of curated gradient presets — handy starting points.

Loading example…

Gradient PresetsSource Storybook

Gradient Themed

variant="gradient" with no gradient prop derives the gradient from each theme.

Loading example…

Gradient ThemedSource Storybook

Gradient Sizes

One gradient (Sunset) across the full size scale.

Loading example…

Gradient SizesSource Storybook

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	The icon to render. A bare `@knitui/icons` icon auto-sizes/colors to the chip.
`disabled` system	`boolean \| undefined`	—
`gradient` system	`GradientValue \| undefined`	—	Gradient fill for variant='gradient' — { from, to, deg } or { stops, deg }.
`radius` system	`string \| number \| undefined`	—	Theme radius token (e.g. `$sm`) or any CSS value.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined` unset · xs · sm · md · lg · xl	—	Elevation — drop shadow from the shared ladder.
`size` system	`string \| number \| undefined` xs · sm · md · lg · xl	`md`	Controls the square width/height and radius.
`theme` system	`ThemeName \| null \| undefined` unset · blue · red · green · yellow · pink	—	Applies a theme to this element
`variant` system	`"light" \| "outline" \| "white" \| "transparent" \| "default" \| "filled" \| "subtle" \| "gradient" \| undefined` filled · light · outline · subtle · transparent · white · default · gradient	`filled`	Visual variant — how the theme color ramp is applied.

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiElement> \| undefined`

Plus 497 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.