Limited offer — lifetime access:$75$60
Lottie · React

Lottie in React

Integrate Lottie animated icons into your React app using the lottie-react library.

1

Install lottie-react

Add the lottie-react package from npm.

JS
npm install lottie-react
2

Add the animation to your component

Import your downloaded icon JSON and pass it to the Lottie component.

JS
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;
3

Control the animation

Use props to control playback, looping, and hook into animation events.

JS
<Lottie
  animationData={animationData}
  loop={false}
  autoplay={false}
  onComplete={() => console.log("Animation complete")}
/>

Get your animated icons

Browse icons ready for React — free to download.

Browse icons