Add Rive animated icons to any HTML page via CDN using canvas-based rendering — no build tools or framework required.
Add the Rive WebGL CDN script tag to your HTML page.
<script src="https://unpkg.com/@rive-app/webgl@2.9.1"></script>Rive renders into a canvas element. Set the width and height to match your icon size.
<canvas id="rive-canvas" width="150" height="150"></canvas>Initialise Rive with the path to your downloaded .riv file and configure state machines.
<script>
const canvas = document.getElementById("rive-canvas");
const r = new rive.Rive({
src: "your_animation.riv",
canvas: canvas,
autoplay: true,
artboard: "Main",
stateMachines: ["State Machine 1"], // e.g. "Clicked", "Hover"
onLoad: () => console.log("Rive loaded")
});
</script>Trigger animations in response to user events by firing state machine inputs.
const inputs = r.stateMachineInputs("State Machine 1");
const trigger = inputs.find((i) => i.name === "Trigger");
trigger?.fire();
// For boolean inputs:
const hovered = inputs.find((i) => i.name === "Hover");
hovered.value = true;