Rive Interactive Icon — Free Rive Runtime Snippet With SVG Fallback

Rive is a design tool and runtime for small, state-machine-driven vector animations — icons that react to hover, loading states that blend between phases, character animations with real logic behind them — exported as a compact .riv binary and played back in the browser with new rive.Rive({ src, canvas, stateMachines }). This snippet demonstrates that exact loading pattern, but since a live sandbox has no server to host a custom .riv file on, it points src at Rive's own public example asset and — critically — wraps the whole load in error handling with an always-available animated SVG checkmark as a fallback, so the preview is never blank even if that external asset is unreachable.

The real Rive API surface

new rive.Rive({ src, canvas, autoplay, stateMachines, onLoad, onLoadError }) is exactly how you'd load Rive in production. stateMachines names the state machine (built visually in the Rive editor) that drives the animation's logic — timelines, blend states, inputs — rather than a single fixed timeline. onLoad fires once the .riv file has been fetched and parsed; onLoadError fires if it can't be. Both are used here for real, not simulated.

Why the fallback matters

Embedding a third-party asset URL in a public snippet is fragile — the demo CDN could move, rate-limit, or go offline, and a broken Rive load would otherwise leave a blank canvas with no explanation. This snippet wraps instantiation in try/catch and always renders a small self-contained SVG (a circle with an animated checkmark stroke, using stroke-dasharray/stroke-dashoffset) underneath, toggling visibility so exactly one of "real Rive" or "fallback icon" is showing at any time — never neither.

A pattern worth reusing beyond Rive

Any snippet that depends on a hosted binary asset — a .riv file, a .lottie file, a font, a texture — benefits from the same shape: attempt the real load, catch both synchronous construction errors and the library's own async error callback, and always have a pure-CSS/SVG stand-in ready to show. See Lottie hover icon button for the same guarantee applied to an inline Lottie animation instead of a fallback SVG.

Where Rive fits vs. Lottie

Lottie plays back an After Effects timeline; Rive is closer to a tiny game engine for vector graphics, with state machines and runtime inputs (useful for things like a play/pause icon that blends between states, or a like-button burst with actual physics). Pick Rive when interaction state needs to drive the animation's logic, not just trigger a linear play.

Customizing it

Swap RIVE_SRC for your own exported .riv file's URL, point stateMachines at the state machine name from your file, and use riveInstance.stateMachineInputs(...) to wire booleans/triggers to hover or click events. Redesign the SVG fallback to visually match your real Rive asset so the transition between "still loading" and "loaded" feels seamless.