Animation

Every icon has its own motion. Four things decide when it plays; they work the same on every platform.

Hover and focus (default)

With nothing set, an icon plays when the pointer enters, or focus moves into, the closest button, link, label, summary, tab or menu item around it, and returns to rest when it leaves. On the web, data-icon-trigger makes any element the trigger. In Compose, pass the control’s interactionSource; in SwiftUI, a hovering pointer plays it.

autoAnimated={false}

Turns the hover / focus trigger off. The icon stays at rest until your code plays it, with the handle or play.

The handle: startAnimation() and stopAnimation()

React’s ref, Vue’s template ref, Svelte’s bind:this, Compose’s rememberPulsoIconHandle() and SwiftUI’s PulsoIconHandle. Both methods return (or resolve) when the motion has finished, so you can wait for it:

await check.current?.startAnimation();

play

State instead of calls: the motion starts when play becomes true and returns to rest when it becomes false. Useful for “new message”, “uploading”, “saved”.

<Bell autoAnimated={false} play={hasNewMessage} />

animated={false}

The icon never moves: hover, focus, the handle and play all do nothing. Use it for icons that must stay still, such as in dense tables.

You want	Use
Play on hover / focus	nothing (default)
Play only from code	autoAnimated={false} + handle
Play while a state is true	autoAnimated={false} + play
Never move	animated={false}

Reduced motion

When the system asks for reduced motion, icons stay at rest whatever triggers them, including play and startAnimation(). A site can’t override that, and shouldn’t.

Performance

An icon only runs while it plays; at rest it is a plain SVG (or Canvas drawing on Apple platforms) with no timers. Avoid playing large numbers of icons at the same moment.