Why does Rive use a canvas instead of SVG?

Rive renders via WebGL or Canvas 2D for GPU-accelerated animation. This is what makes it so performant — especially for complex state machine transitions. The trade-off is that canvas content isn't part of the DOM, so you can't style it with CSS.

What .riv file should I use?

Download the Rive format from Unicorn Icons. The .riv file contains the artboard and state machine. Serve it from a public folder or CDN — it loads via fetch just like a JSON file.

How do I trigger the hover animation on mouse events?

After the animation loads, get the state machine inputs with r.stateMachineInputs('State Machine 1'). Find the 'Hover' input and set its value to true on mouseenter and false on mouseleave.

Limited offer — lifetime access:$75$60

Rive · HTML

Using Rive icons in HTML

No npm needed. One CDN script, one canvas element, and a path to your .riv file. Rive renders GPU-accelerated animations straight into the canvas.

Add the Rive script

Paste this into your HTML — it loads the Rive WebGL runtime from a CDN.

HTML

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

Add a canvas element

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

HTML

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

Load the animation

Initialise Rive with your .riv file, artboard name, and state machine. Unicorn Icons use 'State Machine 1'.

const r = new rive.Rive({
  src: "your_animation.riv",
  canvas: document.getElementById("rive-icon"),
  autoplay: true,
  artboard: "Main",
  stateMachines: ["State Machine 1"],
  onLoad: () => console.log("Rive loaded")
});

Fire state machine inputs

Get the inputs after load and use them to trigger animations on user events. Hover and Clicked are included in every Unicorn Icon.

const canvas = document.getElementById("rive-icon");

const r = new rive.Rive({
  src: "your_animation.riv",
  canvas,
  autoplay: true,
  stateMachines: ["State Machine 1"],
  onLoad: () => {
    const inputs = r.stateMachineInputs("State Machine 1");
    const hover = inputs.find((i) => i.name === "Hover");

    canvas.addEventListener("mouseenter", () => (hover.value = true));
    canvas.addEventListener("mouseleave", () => (hover.value = false));
  }
});

Common questions

Why canvas instead of SVG?

Rive uses WebGL for GPU-accelerated rendering — that's what makes state machine transitions so smooth. The trade-off is that canvas content isn't in the DOM, so CSS won't affect the animation visuals.

Where do I get the .riv file?

Download the Rive format from Unicorn Icons. Serve it from a public folder or CDN — it loads over HTTP like any static file.

How do I trigger hover?

In the onLoad callback, get the inputs and find the one named Hover. Set hover.value = true on mouseenter, false on mouseleave. Step 4 shows the full pattern.

Get your animated icons

Browse icons ready for HTML — free to download.

Browse icons