Motion

Every icon draws on by default. Nine more presets are a prop away, and icons with a second state swap to it. Motion is short and quiet: most presets finish in under 600 ms and every one ends exactly at the resting pose.

Presets

Default and choice

Every icon draws on by default, so a set of icons moves the same way. That holds in all 10 styles: filled shapes trace their outline first, then fill in.

Pick any other preset per icon with the preset prop. Each icon also carries a suggestion from its name, matched on whole words, so bell suggests wiggle and clock never shakes like lock.

<SettingsIcon />                 // draws on (default)
<SettingsIcon preset="spin" />   // spins
<BellIcon preset="wiggle" />     // rings

Triggers

• hover (default): plays once on pointer enter, and on keyboard focus of the closest button or link.
• click: plays on pointer down.
• inView: plays once when half the icon is visible.
• loop: repeats with a short pause and stops while off screen. Only one icon loops at a time on a page.
• none: drive it yourself through the ref.

const bell = useRef<AnimatedIconHandle>(null)

<button onMouseEnter={() => bell.current?.startAnimation()}>
  <BellIcon ref={bell} trigger="none" />
  Notifications
</button>

Two-state icons

A few icons have a second state drawn into them. agent-view shows two bars at rest and a smiling face on hover or focus. These icons play swap by default: the bars fold flat as the face opens out of the same line in 180 ms, and they trade back when the pointer leaves and focus moves on.

With click, inView, loop or the ref, the second state holds for 840 ms, then returns. Picking swap for an icon with one state plays draw, and any other preset leaves the second state hidden.

<a href="/llms.txt" aria-label="View as AI agent">
  <AgentViewIcon size={16} />  // swaps while hovered or focused
</a>

Motion per style

• Filled shapes in Outlined, Filled and Pixel trace their outline, then fill in. Pixel traces its rows from top to bottom.
• Riso draws its color plate along with the ink, and Glass fills its gradient body as the outline traces.
• Riso slides its plate into register and back.
• Glass sweeps its highlight once.
• Neon flickers its glow on when it appears.

Reduced motion

When the system asks for reduced motion, icons skip movement and show a 150 ms fade instead. Two-state icons still change state, as a 150 ms cross-fade with no movement. You do not need to handle this yourself.