Static icons look dead. Animated ones make interactions feel alive. We've put together guides for every major platform — pick your format and stack, each one has working code you can drop straight in.
All icons on this page are free to download.
Lottie
All Lottie guides →Two installs: lottie-react and your icon JSON. Done. Works with any React app, Next.js included.
One CDN script tag, one div, one JSON file. No build tools, no npm. Paste and it works.
Load your icon in onMounted with lottie-web. Works the same in Vue 3 and Nuxt.
Airbnb's Lottie library makes this easy. Drop the JSON in res/raw, add one XML tag.
Swift Package Manager install, then LottieAnimationView with a file name. That's it.
Lottie.asset wraps your icon JSON and autoplays. AnimationController if you need full control.
No-Code / CMS
Lottie and Rive both work in Framer. Lottie via a marketplace component, Rive via the built-in integration.
Add icons to Webflow with a CDN script in the page head and an Embed block for the HTML.
Works in any Gutenberg site with the Custom HTML block. No plugin required for either format.
Wix's HTML embed element lets you drop in animated icons with no code restrictions.
useRive hook gives you the runtime. Fire the Hover or Clicked state machine input on mouse events.
Rive WebGL renders on a canvas. No framework needed — just a script tag and a .riv file path.
Initialise Rive in onMounted with a canvas ref. State machine inputs work exactly the same.
RiveAnimationView in XML, then fireState() in Kotlin to trigger the Hover and Click animations.
RiveViewModel handles the runtime. Call triggerInput or setBooleanInput to drive the state machine.
StateMachineController gives you the Hover and Clicked inputs. Wrap in MouseRegion and GestureDetector.