Lottie or Rive
Animated Icons for HTML / JavaScript
Lottie and Rive both work in plain HTML via CDN with no build tools required. lottie-web loads JSON files via a script tag and renders to SVG or canvas. The Rive WebGL runtime loads .riv files the same way, with state machine support for mouse events. Ideal for landing pages, email, and no-framework projects.
Quick start
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>Browse by category
Animated icons across 22 categories, all available in Lottie or Rive format.
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 icons