Rive.rivLottie.json
Animated Icons for Vue
Unicorn Icons works in Vue 3 with both Rive and Lottie formats. @rive-app/webgl provides GPU-accelerated Rive rendering with state machine support. lottie-web handles Lottie JSON playback with a simple loadAnimation call inside onMounted. Both integrate naturally with Vue's ref and lifecycle system.
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/webgl
npm install @rive-app/webgl2
Add the animation
<template>
<canvas ref="canvas" width="64" height="64" />
</template>
<script setup>
import { ref, onMounted } from "vue";
import { Rive } from "@rive-app/webgl";
const canvas = ref(null);
onMounted(() => {
new Rive({
src: "/your_icon.riv",
canvas: canvas.value,
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
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>