Prepared Docs

Icon renders mapped SVG paths for each SVGAsset with IconColor tokens, optional title for accessibility, fontSize, optional className, optional rotation for animated turns, and advanced renderPath for motion overrides.

Props

Name	Type	Default	Description
`asset`	`SVGAsset`	—	The asset to render.
`animateRotation`	`boolean`	`true`	Whether rotation changes should animate via CSS on the wrapper. Set to `false` to apply the rotation as a static SVG attribute on an inner `<g>` instead.
`className`	`string`	—	Additional CSS class name(s) applied to the icon wrapper. Useful for targeting child paths with CSS animations.
`color`	`IconColor`	—	The color of the icon.
`fontSize`	`IconFontSize`	`1.6rem`	The font size of the icon. Can be a number (in px), a rem, or a px.
`morph`	`IconMorphProps`	—	Morph configuration. When set, the icon renders in morph mode and does not support `renderPath`.
`renderPath`	`((props: IconPathProps, index: number) => ReactNode)`	—	Custom render function for each path element. When provided, replaces the default `<path>` rendering. Useful for wrapping paths with `motion.path` for attribute animations.
`rotation`	`number`	—	Clockwise rotation in degrees. - When `animateRotation` is `true` (default), the rotation is applied as a CSS `transform` on the icon wrapper, animating via the `.pr-icon` `transform` transition declared in styles. - When `animateRotation` is `false`, the rotation is applied as a static SVG `transform` attribute on an inner `<g>`, preserving the wrapper's layout box and producing an instantaneous, non-animated rotation suitable for static-export contexts.
`title`	`string`	—	The title of the icon.

Storybook

Interactive examples and edge cases for this component are in Storybook.

SVGAsset, IconColor, TextType, and usePrefersReducedMotion are exported from @prepared911/ui-core.

usePrefersReducedMotion is an SSR-safe hook that tracks the user's prefers-reduced-motion preference. Icon uses it internally for morphing animations; import it when other UI should respect the same preference.

Morph (`morph`)

Pass morph to animate when active toggles. Techniques are selected via IconMorphTechnique — pick explicitly to avoid accidental motion changes:

`technique`	Motion	When to use
`IconMorphTechnique.Crossfade` (default)	Rotating crossfade (fade + 90° spin)	Topologically different pairs (Menu ↔ Dismiss, sun ↔ moon). Keeps existing CORE-544 motion. Requires `to`.
`IconMorphTechnique.Path`	Interpolates paired path `d` attributes	Compatible siblings with equal geometry counts and matching topology (SortAscending ↔ SortDescending). Compound paths, holes, or opposite winding can produce malformed in-between frames; use crossfade for those pairs. Falls back to crossfade when counts differ. Resamples geometry only for the duration of the transition and restores the exact source geometry at rest, so idle icons are identical to non-morphing `Icon`. Requires `to`.
`IconMorphTechnique.PivotRotate`	Path-morphs each subpath into its in-place invert	Compound paths that would weld as a single `d` and have no sibling target, such as `ChevronUpDown` on the Navbar app switcher. Uses the same interpolator as `IconMorphTechnique.Path` (SortAscending ↔ SortDescending). Does not take `to`. Idle markup matches a non-morphing `Icon` except that each subpath is its own `<path>`.

Both path-morph states render their correct rest geometry during SSR and the initial client paint, including IconMorphTechnique.PivotRotate.

IconButton forwards the same morph object. Prefer IconMorphTechnique.Crossfade unless the pair was designed for path morphing, or IconMorphTechnique.PivotRotate for a compound path that should invert in place.

The previews below mirror the Icon stories in Storybook (Default, Colors, Sizes, Animation, InContext).

Default

Colors

Sizes

Animation

Voice equalizer uses the pr-voice-animation class (keyframes ship with @prepared911/ui-core icon styles).

In context

Icon / Usage

Icon / Accessibility

Props

Name	Type	Default	Description
`asset`	`SVGAsset`	—	The asset to render.
`animateRotation`	`boolean`	`true`	Whether rotation changes should animate via CSS on the wrapper. Set to `false` to apply the rotation as a static SVG attribute on an inner `<g>` instead.
`className`	`string`	—	Additional CSS class name(s) applied to the icon wrapper. Useful for targeting child paths with CSS animations.
`color`	`IconColor`	—	The color of the icon.
`fontSize`	`IconFontSize`	`1.6rem`	The font size of the icon. Can be a number (in px), a rem, or a px.
`morph`	`IconMorphProps`	—	Morph configuration. When set, the icon renders in morph mode and does not support `renderPath`.
`renderPath`	`((props: IconPathProps, index: number) => ReactNode)`	—	Custom render function for each path element. When provided, replaces the default `<path>` rendering. Useful for wrapping paths with `motion.path` for attribute animations.
`rotation`	`number`	—	Clockwise rotation in degrees. - When `animateRotation` is `true` (default), the rotation is applied as a CSS `transform` on the icon wrapper, animating via the `.pr-icon` `transform` transition declared in styles. - When `animateRotation` is `false`, the rotation is applied as a static SVG `transform` attribute on an inner `<g>`, preserving the wrapper's layout box and producing an instantaneous, non-animated rotation suitable for static-export contexts.
`title`	`string`	—	The title of the icon.

Storybook

Interactive examples and edge cases for this component are in Storybook.

SVGAsset, IconColor, TextType, and usePrefersReducedMotion are exported from @prepared911/ui-core.

Morph (`morph`)

Pass morph to animate when active toggles. Techniques are selected via IconMorphTechnique — pick explicitly to avoid accidental motion changes:

`technique`	Motion	When to use
`IconMorphTechnique.Crossfade` (default)	Rotating crossfade (fade + 90° spin)	Topologically different pairs (Menu ↔ Dismiss, sun ↔ moon). Keeps existing CORE-544 motion. Requires `to`.
`IconMorphTechnique.Path`	Interpolates paired path `d` attributes	Compatible siblings with equal geometry counts and matching topology (SortAscending ↔ SortDescending). Compound paths, holes, or opposite winding can produce malformed in-between frames; use crossfade for those pairs. Falls back to crossfade when counts differ. Resamples geometry only for the duration of the transition and restores the exact source geometry at rest, so idle icons are identical to non-morphing `Icon`. Requires `to`.
`IconMorphTechnique.PivotRotate`	Path-morphs each subpath into its in-place invert	Compound paths that would weld as a single `d` and have no sibling target, such as `ChevronUpDown` on the Navbar app switcher. Uses the same interpolator as `IconMorphTechnique.Path` (SortAscending ↔ SortDescending). Does not take `to`. Idle markup matches a non-morphing `Icon` except that each subpath is its own `<path>`.