Lottie · React

Lottie in React

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

Install lottie-react

Add the lottie-react package from npm.

copy

npm install lottie-react

Add the animation to your component

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

copy

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;

Control the animation

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

copy

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

Get your icons

Browse animated icons ready for React.

Browse free icons →