Icon

Any icon on the kit’s rules: size from the text, the theme’s stroke, RTL mirroring, an accessible name; createIcon and a gallery of 111 icons. Free, MIT · Basics › Text and icons

Puts any icon on the kit's rules: a size from the text around it (or pixels), the theme's stroke width (pixel, brutalism and terminal draw heavier lines), currentColor, mirroring in right-to-left layouts, and an honest accessible name — label makes it an image, without one it is hidden from screen readers.

Installation

npx valyro-cli@latest add icon

npx shadcn@latest add https://valyro.xyz/r/icon.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { Icon } from 'valyro-ui';

Props

Prop	Type	Default
`as`	`ComponentType<IconSourceProps>`		An icon component to render: one of the kit's (`SearchIcon`), Lucide's, Heroicons'… Or pass an `<svg>` as children.
`children`	`ReactNode`		A raw `<svg>` (or any icon element) to size and label.
`size`	`number \| string`	`'1em'`	Width and height: a number of pixels or any CSS length. Default `1em`, the size of the surrounding text.
`strokeWidth`	`number \| string`		Stroke width for stroke icons; default the theme's `--ui-icon-stroke`, so foreign icons match the kit's.
`label`	`string`		Accessible name: the icon becomes an image (`role="img"`). Without it the icon is decorative and hidden from screen readers.
`directional`	`boolean`	`false`	Mirror the icon in right-to-left layouts (arrows, chevrons, "send").

Related components

Kbd — Keyboard keys and shortcuts: one "mod+k" string shows ⌘K on a Mac and Ctrl+K elsewhere, read aloud as words
Highlight — Search hits marked in text: case and accents ignored, several terms in their own tones, ready-made ranges, the current hit
Button — Buttons in every variant
Icon Button — Icon-only button
Color Mode Switch — Light, dark or system: the choice is saved, painted before the first frame, synced across tabs and cross-faded
Button Group — Grouped buttons
Copy to Clipboard — Copy with confirmation
Badge — Status labels and tags
Tag — Removable and clickable tags, groups with +N
Avatar — User avatars
Tooltip — Hover and focus hints
Separator — Dividers

Previous: Separator · Next: Kbd · All Basics