TL;DR
- CSS for simple hover effects, Lottie for playing designer timelines, Rive for interactive icons
- Rive puts hover, click and state logic in the file; Lottie needs that logic in your code
- Accessibility comes from the wrapper: buttons, aria-pressed in sync with the animation, focus, reduced motion
- Try interactive Rive icons in the animated icons collection
If you are adding animated icons to a product, you will end up choosing between CSS, Lottie and Rive. They solve different problems. This guide compares them on what matters for icons: file size, interactivity, editing workflow and accessibility.
The short answer
What is Lottie?
Lottie is a format for animations exported from After Effects (with the Bodymovin plugin) as JSON, played by a runtime such as lottie-web or lottie-react. Designers animate in a tool they know; developers drop in the JSON and play it.
For icons, Lottie works like a video you can control: play, pause, set direction, jump to a frame. Interactivity such as "play the hover animation, then reverse it on leave" is code you write around the player, and two-state icons mean scrubbing between frame ranges.
What is Rive?
Rive is a design and animation tool with its own runtime. A .riv file contains the artwork, the animations and a state machine: states, transitions and inputs (booleans, numbers, triggers), plus listeners for hover and click. Your code sets inputs; the file decides what to animate.
For icons, that means a nav icon can have its own hover state, a bell can toggle between muted and unmuted, and an emoji can play a reveal, an idle loop and a hover animation, all from one small file.
Side by side
| CSS / SVG | Lottie | Rive | |
|---|---|---|---|
| Runtime | None | lottie-web (about 60 KB gzipped, lighter builds exist) | Rive runtime (WebAssembly, loaded once) |
| Per-icon size | The SVG | Often 10-100 KB JSON | Often 3-60 KB binary |
| Hover / click | CSS selectors | Code around the player | Built into the state machine |
| Multiple states | Class toggles | Frame-range scrubbing | Native |
| Who edits it | Developer, in CSS | Designer, in After Effects | Designer or developer, in the free Rive editor |
| Text and colours at runtime | Yes | Limited | Via inputs and data binding, if the file exposes them |
Workflow
Lottie: animate in After Effects, export with Bodymovin, check that every feature you used is supported, optimise the JSON, then integrate. A change means repeating the round-trip.
Rive: design and animate in the browser-based editor, build the state machine, export a .riv. Public files on the Rive Community can be remixed, and many are free to use with credit (check each file's license).
CSS: edit the stylesheet. Nothing to export.
Interactivity is the deciding factor
Most icon animations in an interface are interactive: hover, press, toggle, select. That is where the formats diverge most.
Accessibility for all three
The format does not make an icon accessible; the wrapper does.
<button> with an aria-label.aria-pressed, and that value must match what the animation shows. With Rive, read it from the state machine's state changes rather than counting clicks, because a click during a transition can be ignored by the file.prefers-reduced-motion: pause loops and shorten transitions.Which should you pick?
| You need | Pick |
|---|---|
| A subtle lift or spin on existing icons | CSS |
| A designer's existing After Effects animation | Lottie |
| Hover icons with character, nav icons, toggles, reactions | Rive |
To see what interactive Rive icons feel like in a real UI, try the live demos in the animated icons collection: springy hover icons, animated nav icons, a mute bell and emoji reactions, each one a complete React component. For the code behind all five approaches, read animated icons in React.
More articles
Animated SVG Icons: How to Make Icons Move (Draw, Morph, Transform)
How to make animated SVG icons: stroke drawing with pathLength, transforms with transform-box, path morphing, hover triggers and React components, plus the mistakes that break them.
Icon Hover Animation with CSS: 8 Effects with Copy-Paste Code
Eight CSS icon hover effects (spring scale, tilt, bell ring, wiggle, bounce, spin, stroke draw-on and colour sweep) with copy-paste code that stays smooth and accessible.
Animated Icons in React: 5 Ways to Add Them (CSS, SVG, Motion, Lottie, Rive)
How to add animated icons to a React or Next.js app: CSS hover transitions, animated SVG, Motion, Lottie and Rive, with code for each and a guide to picking the right one.