Lottie or Rive
Animated Icons for Vue
Vue 3 integrates cleanly with lottie-web for Lottie JSON animations and @rive-app/webgl for Rive. Both use a canvas or div container with an onMounted lifecycle hook for initialisation. The animation instance can be stored in a ref for programmatic control — play, pause, stop, and speed adjustments.
Quick start
1
Install lottie-web
npm install lottie-web2
Add the animation
<template>
<div ref="container" style="width: 64px; height: 64px;" />
</template>
<script setup>
import { ref, onMounted } from "vue";
import lottie from "lottie-web";
const container = ref(null);
onMounted(() => {
lottie.loadAnimation({
container: container.value,
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