Animated Icons

Demo & usage

More examples

When to use

• Giving one icon a moment of motion: a bell on a new notification, a spinner during a sync, a check when something saved.
• You want the motion that suits each glyph without choosing one per icon — `default` already resolves it.
• For a page-wide loading state use a Spinner or Skeleton; an animated icon draws the eye to one spot, which is wasted on a whole screen.

Async states

None — this component has nothing to load, so it has no loading, empty or error state to drive.

Outputs

Customization & theming

• Pick the motion with `animation` — `default` for the glyph's curated choice, or one of 27 presets (`draw`, `draw-loop`, `pulse`, `spin`, `spin-ccw`, `spin-slow`, `beat`, `ring`, `swing`, `wobble`, `jello`, `tada`, `shake`, `flash`, `blink`, `pop`, `bounce`, `float`, `flip`, `sweep`, `fly`, `hinge`, `rotate-in`, `nudge-right`, `nudge-left`, `nudge-up`, `nudge-down`).
• Choose what starts it with `trigger` (hover · click · in-view · mount · manual); with `manual`, bind `play` or call `start()` / `stop()`.
• Shape the timing with `delay`, `speed`, `duration` and `easing`; `loop` repeats and `persist` keeps the end state instead of resetting.
• Tune `in-view` with `viewOnce` and `viewMargin` (an IntersectionObserver root margin).
• Everything `sv-icon-pro` takes is forwarded: `name`, `size`, `weight`, `strokeWidth`, `title`, `flip`, `rotate` and `cssClass`.
• React to `animationStart` / `animationDone` — both emit the RESOLVED motion key, so a handler can tell which motion `default` picked.
• Apply `svAnimate` directly to any icon you have already placed; pass `svAnimateFor` when the icon is a per-icon component with no `name` for the resolver to read.

Best practices

• Do: Leave `animation="default"` unless you have a reason. The per-glyph choices are curated, and a generic `pulse` on everything reads as a page that is merely busy.
• Do: Set `title` on an icon whose motion is the status — a spinning glyph that says nothing announces nothing, and the motion is exactly the information a screen-reader user cannot see.
• Do: Reserve `loop` for state that is genuinely ongoing (syncing, recording). A looping decoration never stops competing with the content beside it.
• Tip: Scale timing with `speed` rather than replacing `duration`; each preset's duration is tuned to its own keyframes.
• Don't: Don't use motion as the only signal that something changed. `prefers-reduced-motion` suppresses playback entirely, so anyone on that setting sees a static icon and no state at all.
• Don't: Don't animate more than one or two icons in a view. The point of motion is that it is the only thing moving.

Accessibility

• `prefers-reduced-motion: reduce` suppresses playback entirely — the icon renders in its resting state rather than playing a shortened version, because a smaller amount of the thing that triggers vestibular symptoms is still that thing.
• Motion never carries meaning on its own. Set `title` when the animation IS the status: it names the glyph `role="img"`, which is the only part of a spinning icon that reaches a screen reader.
• Playback is Web Animations API only, with no CSS keyframes and no library, so it degrades to a static icon under SSR and on any runtime without WAAPI instead of throwing.
• The animation runs on transforms and stroke properties, so it never moves the glyph out of its box and never reflows the text beside it.
• `animationDone` fires with the resolved motion key on non-looping playback, so a host can wait for the motion to finish before moving focus rather than guessing at a duration.