What's the difference between RiveComponent and useRive?

RiveComponent is the simple path — just a component with src and stateMachines props. useRive is the hook version that gives you the rive runtime object so you can fire state machine inputs programmatically from React event handlers.

Does Rive work in Next.js?

Yes. Mark the component 'use client' since Rive needs a canvas in the browser. The .riv file can be served from your public folder or any URL.

Limited offer — lifetime access:$75$60

Rive · React

Using Rive icons in React

The useRive hook gives you the runtime. From there, firing the Hover and Clicked inputs on mouse events takes about 10 lines.

Install @rive-app/react-canvas

One package from npm.

npm install @rive-app/react-canvas

Simple embed with RiveComponent

This is the quickest path. Point it at your .riv file and pass the state machine name. Unicorn Icons all use 'State Machine 1'.

import { RiveComponent } from "@rive-app/react-canvas";

function RiveIcon() {
  return (
    <RiveComponent
      src="/your_animation.riv"
      stateMachines="State Machine 1"
      artboard="Main"
      autoplay
      style={{ width: 150, height: 150 }}
    />
  );
}

Trigger state machines with useRive

Use useRive when you need to fire the Hover or Clicked inputs from React event handlers. The hook gives you the live rive runtime.

import { useRive, useStateMachineInput } from "@rive-app/react-canvas";

function RiveIcon() {
  const { rive, RiveComponent } = useRive({
    src: "/your_animation.riv",
    stateMachines: "State Machine 1",
    autoplay: true,
  });

  const hoverInput = useStateMachineInput(rive, "State Machine 1", "Hover");
  const clickInput = useStateMachineInput(rive, "State Machine 1", "Clicked");

  return (
    <div
      style={{ width: 150, height: 150 }}
      onMouseEnter={() => hoverInput && (hoverInput.value = true)}
      onMouseLeave={() => hoverInput && (hoverInput.value = false)}
      onClick={() => clickInput?.fire()}
    >
      <RiveComponent />
    </div>
  );
}

Common questions

What state machine names do Unicorn Icons use?

All icons use a state machine called State Machine 1 with boolean input Hover and trigger input Clicked.

RiveComponent vs useRive — which to use?

RiveComponent for simple embeds with no interaction. useRive when you need to fire state machine inputs from React events.

Does this work in Next.js?

Yes. Add "use client" to the component — Rive needs a browser canvas. Serve the .riv file from your public folder.

Get your animated icons

Browse icons ready for React — free to download.

Browse icons