Rive in HTML

Add Rive animated icons to any HTML page via CDN using canvas-based rendering — no build tools or framework required.

Include the Rive script

Add the Rive WebGL CDN script tag to your HTML page.

HTML

<script src="https://unpkg.com/@rive-app/webgl@2.9.1"></script>

Add a canvas element

Rive renders into a canvas element. Set the width and height to match your icon size.

HTML

<canvas id="rive-canvas" width="150" height="150"></canvas>

Load the animation

Initialise Rive with the path to your downloaded .riv file and configure state machines.

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")
});

Fire state machine inputs

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;

Get your animated icons

Browse icons ready for HTML — free to download.

Browse icons