Using unicorn icons in HTML

Learn how to integrate lottie animations into your HTML page effortlessly.

1. Include Rive Web via CDN

Use the CDN link to include rive Script in your HTML page or use the local file path.

copy

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

2. Add Canvas and Load Animation

copy

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

<script>
  const canvas = document.getElementById("rive-canvas");

  new rive.Rive({
    src: "your_animation.riv",
    canvas: canvas,
    autoplay: true,
    stateMachines: ["Clicked", "Hover"],
    artboard: "Main",
    onLoad: () => console.log("Rive loaded")
  });
</script>

3. Get Lottie Animations

Find free animations at Unicornicons.

We use cookies