API reference

Icons

Two surfaces in one section. The Icon primitive in usemotif is a sized, accessible wrapper over <Svg>. The @usemotif/icons package ships 1,932 glyph components, each one a ready Icon.

The Icon primitive

Icon

stable

function Icon(props: IconProps): ReactElement

size'xs' | 'sm' | 'md' | 'lg' | 'xl' | number= 'md'

A size token, or a raw pixel number. The tokens map to fixed pixel sizes (see below).

render(primitives: SvgPrimitives) => ReactNode

Render-prop given the platform SVG primitives — `Path`, `Line`, `Circle`, and the rest. The cross-platform way to define a glyph.

childrenReactNode

Inline SVG children, for legacy or web-only glyphs. Prefer `render` for anything that has to run on native.

aria-labelstring

Names the icon. Setting it switches the icon to `role="img"`; left unset, the icon is `aria-hidden` and treated as decorative.

IconProps extends SvgProps (minus size and children), so the standard SVG attributes pass straight through to the underlying <svg> — stroke sets the colour (it inherits currentColor, so an icon matches surrounding text by default), strokeWidth sets the line weight, and fill, viewBox, and style work as on any SVG.

Size tokens

Token	Pixels
`xs`	12
`sm`	16
`md`	20
`lg`	24
`xl`	32

size defaults to 'md'. Pass a number for a size off the scale.

example.tsx

import { Icon } from 'usemotif';
 
<Icon
size="lg"
aria-label="Settings"
render={({ Circle, Path }) => (
  <>
    <Circle cx="12" cy="12" r="3" />
    <Path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33" />
  </>
)}
/>

Icon is exported from usemotif, from @usemotif/react, and from the dedicated @usemotif/react/svg subpath — a tree-shakeable entry carrying only Icon, Svg, and SVG_PRIMITIVES, with none of the styling engine. Import from @usemotif/react/svg when icons are all you need.

The glyph set

@usemotif/icons ships 1,932 glyphs, generated from lucide-react — the same 24×24 stroke style, pixel-identical to the lucide source. Each glyph is a component that renders through Icon with a render callback, so it carries the full IconProps surface.

example.tsx

import { Activity, Camera, Heart } from '@usemotif/icons';
 
<Activity />
<Camera size="lg" />
<Heart stroke="#2563EB" strokeWidth={1.5} />

Names are PascalCase — AArrowDown, Accessibility, AlarmClock, and so on — and each is a named export from the package root. The canonical list of available names is the package's dist/index.d.ts (or packages/icons/src/index.ts in the monorepo).

Imports are cheap: each glyph reaches Icon through @usemotif/react/svg, so importing one icon pulls in only the icon primitives — roughly 0.6 KB gzip — not the styling engine.

Cross-platform

Both surfaces work on web and native. A glyph defined through render receives SvgPrimitives — Path, Circle, Rect, Line, and the rest — which resolve to lowercase SVG tags on web and to react-native-svg components on native. The same glyph source renders on both platforms; native needs react-native-svg installed as a peer.

For a glyph not in @usemotif/icons, drop down to <Icon> and pass your own render callback — that is the same API the pre-built glyphs use.