The quickest way: install lottie-react, drop in your JSON file, and you're done. Takes about 2 minutes.
One package from npm. That's all you need.
npm install lottie-reactDownload the Lottie JSON from Unicorn Icons, put it next to your component, and import it directly.
import Lottie from "lottie-react";
import animationData from "./your_animation.json";
const LottieIcon = () => (
<div style={{ width: 150, height: 150 }}>
<Lottie animationData={animationData} loop={true} />
</div>
);
export default LottieIcon;Pass loop={false} to play once, or grab a ref to play and pause the animation from your own logic.
import Lottie from "lottie-react";
import { useRef } from "react";
import animationData from "./your_animation.json";
const LottieIcon = () => {
const ref = useRef(null);
return (
<div
style={{ width: 150, height: 150 }}
onMouseEnter={() => ref.current?.play()}
onMouseLeave={() => ref.current?.stop()}
>
<Lottie
lottieRef={ref}
animationData={animationData}
loop={false}
autoplay={false}
/>
</div>
);
};What's the difference between lottie-react and lottie-web?
lottie-react wraps lottie-web with a declarative component API. For most React projects it's easier — props instead of imperative calls. If you need more control, use lottie-web directly with a useRef.
Does this work in Next.js?
Yes. Add "use client" to any component that uses lottie-react, since it runs in the browser. Your JSON can be a local import or fetched from a URL — both work.
How do I play on hover?
Set autoplay={false}, grab a ref with lottieRef, then call ref.current.play() on mouseenter and ref.current.stop() on mouseleave. See step 3 above.
Get your animated icons
Browse icons ready for React — free to download.