Rive.rivLottie.json
Animated Icons for HTML / JavaScript
Both Rive and Lottie work in plain HTML via CDN — no build tools or framework required. The Rive WebGL runtime loads .riv files with state machine support for mouse interactions. lottie-web renders JSON files to SVG or canvas. Both are ideal for landing pages and no-framework projects.
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 WebGL CDN
<script src="https://unpkg.com/@rive-app/webgl@latest/rive.js"></script>2
Add the animation
<canvas id="icon" width="64" height="64"></canvas>
<script>
new rive.Rive({
src: "your_icon.riv",
canvas: document.getElementById("icon"),
stateMachines: "State Machine 1",
autoplay: true,
});
</script>Lottie integration
Use Lottie for simple playback-only animations or when integrating with existing Lottie-based tooling.
1
Install lottie-web CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.9.6/lottie.min.js"></script>2
Add the animation
<div id="icon" style="width:64px;height:64px;"></div>
<script>
lottie.loadAnimation({
container: document.getElementById("icon"),
renderer: "svg",
loop: true,
autoplay: true,
path: "your_icon.json",
});
</script>