ComponentsDisplay
Icon
Any SVG icon at a type-scale size and one stroke weight. Decorative unless labelled.
Theme
Motion
Any SVG icon at a type-scale size and one stroke weight. Decorative unless labelled.
<Icon as={Settings} />The same component at all four levels. Pick the one that fits your project; they share tokens, so they mix.
npm i junco @junco/tailwind lucide-reactimport { Icon } from "junco";
import { Search } from "lucide-react";
<Icon as={Search} /> // decorative
<Icon as={Search} label="Search" /> // meaningful on its ownSizes follow the type scale, and every icon gets the same stroke from --icon-stroke.
Next to text the icon is decorative. Icon-only buttons need an aria-label, and Junco warns in development if one is missing.
Icon#Also takes every SVG attribute.
assizelabelstrokeWidth| Prop | Type | Default |
|---|---|---|
asThe icon to render. Lucide, Heroicons, Phosphor or your own SVG component. | React.ElementType | – |
size12, 14, 16, 20 or 24px. | "xs" | "sm" | "md" | "lg" | "xl" | "md" |
labelMakes the icon an image with this name. Leave it out when text nearby says the same thing. | string | – |
strokeWidthOverrides --icon-stroke for this icon. | number | – |