Graphics
Icons
83 monochrome icons and their size scale
83 of 83 icons
Usage
import { Icon } from "@gpuixui/icons";
import { useTheme } from "@gpuixui/primitives";
const theme = useTheme();
// Decoration: takes itself out of the accessibility tree.
<Icon name="search" color={theme.colors.mutedForeground} />;
// Meaningful on its own: announced as an image.
<Icon name="warning" color={theme.colors.destructive} size="md" label="Overdue" />;An icon is data: the runtime paints it from <svg source> and tints it with the
element's own style.color. It carries no colour, size or state of its own, so
one markup serves every theme and platform look.
The grid above is the whole set, drawn from the markup the package ships and
painted by the browser through style.color, so a tile cannot be redrawn from
memory.
API
| Prop | Type | Default | Consequence |
|---|---|---|---|
name | IconName | required | which icon; TypeScript rejects an unknown name, and a stored name the set does not carry paints the help mark |
color | string | required | the tint; pass a theme role |
size | IconSize | number | "md" | a named step or raw pixels; a name the scale does not carry resolves to md |
label | string | none | accessible name; a non-blank label promotes the icon to an image |
testId | string | — | stable locator |
rotation | number | 0 | clockwise degrees about the 24x24 centre, written into the markup; NaN reads as no turn |
motion | MotionProps | none | a tween for the icon's own box: width/height size the path and left/top keep it centred, because the runtime has no transform |
style | StyleDesc | none | extra style merged over the icon's own, last |
Notes
- Monochrome only: no two-tone, duotone or brand marks.
- A static turn, not a spin: use
Spinnerfor a moving mark. - No icon font and no ligatures.
The geometry is Lucide's (lucide-static@1.61.0, ISC and MIT), recorded in
.agents/slop/LICENSES/lucide.md; star-filled and sort-asc are the package's own.
Edit this page on GitHubpackages/icons/docs/icon.mdx