Using unicorn icons in react

Learn how to integrate lottie animations into your react application effortlessly.

1. Install lottie react

Install lottie react dependency from npm

copy

npm install lottie-react

2. Add lottie animation to your component

Import animated icon json file in your 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;

3. Control Animation

Add custom events to control animation

copy

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

4. Get Lottie Animations

Find free animations at Unicornicons.

We use cookies