Does Framer's Rive component support state machines?

Yes. Framer's Rive component accepts a state machine name. Set it to 'State Machine 1' — the name used by all Unicorn Icons. The Hover and Clicked inputs respond to Framer's built-in hover interactions.

Where do I host the .riv file for Framer?

Upload it to Framer Assets (drag into the Assets panel and copy the URL), or use any public HTTPS host — a CDN, S3 bucket, or jsDelivr. The Rive component fetches it over HTTP.

Can I use Framer's interaction system with a Rive icon?

Yes. You can layer Framer interactions on top of the Rive component. For hover-triggered state machine inputs, the Rive component handles this automatically when the Hover input is present. For more complex triggers, use a Framer Code Component with @rive-app/react-canvas.

Limited offer — lifetime access:$75$60

Rive · Framer

Using Rive icons in Framer

Framer has a built-in Rive component. Point it at your .riv file URL, set the state machine name, and hover interactions work out of the box.

Host your .riv file

Download the Rive format from Unicorn Icons. Upload it to Framer Assets (drag into the Assets panel) or any public HTTPS host. Copy the URL.

Insert a Rive component in Framer

In the Framer canvas: press I to open Insert, search for 'Rive', and add the Rive component. It appears in the built-in components list.

Connect your .riv file

Select the Rive component. In the right panel, paste your .riv file URL into the Source field. The animation loads and plays in the canvas.

Set the state machine name

In the component properties, set the State Machine field to 'State Machine 1' — the name used in every Unicorn Icon. This enables the Hover and Clicked interactions.

Enable hover interaction

With the state machine set, Rive in Framer responds to mouse hover events automatically via the Hover input. The animation plays on hover and returns to idle on mouse leave — no extra Framer interactions needed.

Need more control?

For custom interaction logic — triggering animations from Framer component props or page state — create a Code Component using @rive-app/react-canvas. See the Rive + React guide for the code pattern.

Common questions

Does Framer support Rive state machines?

Yes. Set State Machine to State Machine 1. The Hover input responds to Framer's hover events automatically.

Where do I host the .riv file?

Framer Assets is easiest — drag in and copy the URL. Any public HTTPS URL works too.

Can I combine Framer interactions with Rive?

Yes for basic cases. For complex triggers, write a Code Component with @rive-app/react-canvas and use the useRive hook.

Get your animated icons

Browse icons ready for Framer — free to download.

Browse icons