Rive.rivLottie.json
Animated Icons for React
Every Unicorn Icon is available in both Rive and Lottie formats for React. Use @rive-app/react-canvas for GPU-accelerated interactive animations with built-in hover and click state machines. Use lottie-react for simple JSON playback. Both libraries are lightweight, tree-shakeable, and fully TypeScript-typed.
Animated icons
View all icons →Browse by category
Animated icons across 24 categories, all available in Rive and Lottie formats.
Communication iconsBusiness & legal iconsArrows iconsEnergy iconsEmoji iconsFilm & video iconsGraphs iconsFood & drinks iconsE commerce iconsDate & time iconsCelebration iconsHealth iconsLoaders iconsMaps & location iconsScience & Education iconsProgramming iconsMusic & audio iconsTravel iconsMarketing iconsTransport iconsWeather iconsUi iconsFinance iconsTechnology icons
Rive integration
Rive icons include interactive state machines for hover and click — no extra animation code required. GPU-accelerated with smaller file sizes than Lottie.
1
Install @rive-app/react-canvas
npm install @rive-app/react-canvas2
Add the animation
import { useRive } from "@rive-app/react-canvas";
export default function MyIcon() {
const { RiveComponent } = useRive({
src: "/your_icon.riv",
stateMachines: "State Machine 1",
autoplay: true,
});
return <RiveComponent style={{ width: 64, height: 64 }} />;
}Lottie integration
Use Lottie for simple playback-only animations or when integrating with existing Lottie-based tooling.
1
Install lottie-react
npm install lottie-react2
Add the animation
import Lottie from "lottie-react";
import animationData from "./your_icon.json";
export default function MyIcon() {
return <Lottie animationData={animationData} loop={true} style={{ width: 64, height: 64 }} />;
}