Where do I host the Lottie JSON file for Framer?

Anywhere that serves the file over HTTPS with CORS headers. Good options: upload directly to Framer Assets, use a CDN like jsDelivr or unpkg, or drop it in an S3 bucket with public read access. The Framer Lottie component accepts any public URL.

Can I use a Lottie JSON file from Unicorn Icons directly in Framer?

Yes. Download the Lottie JSON from Unicorn Icons, upload it to Framer Assets or any public host, then paste that URL into the Lottie component's source field. The animation plays in the Framer canvas and in published output.

Does the Lottie animation play on hover in Framer?

The Framer Lottie component supports autoplay and loop settings. For hover-triggered playback, you can use Framer's built-in interaction system: set the animation to not autoplay, then add a hover interaction that triggers a component variant with autoplay enabled.

Limited offer — lifetime access:$75$60

Lottie · Framer

Using Lottie icons in Framer

Framer has a Lottie component in the marketplace. Drop it on your canvas, paste a JSON URL, done. No code required.

Host your Lottie JSON file

Download the Lottie JSON from Unicorn Icons. Upload it to Framer Assets (drag into the Assets panel) or any public host. You need a public HTTPS URL.

Insert a Lottie component

In the Framer canvas: press I to open Insert, search for 'Lottie', and add the component. It should appear in the marketplace results.

Connect your JSON URL

Select the Lottie component on the canvas. In the right panel, paste your JSON URL into the Source field. The animation loads and plays in the canvas.

Set loop and autoplay

In the component properties panel, toggle Loop and Autoplay as needed. For hover-triggered play, set Autoplay off and wire a Framer interaction to start playback on hover.

Prefer Rive in Framer?

Framer also supports Rive natively — with state machine inputs for hover and click built in. See the Rive + Framer guide.

Common questions

Where do I host the JSON file?

Framer Assets is the easiest — drag the file into the Assets panel and copy the URL. Any public HTTPS host with CORS open works too.

Can I use Unicorn Icons' JSON directly?

Yes. Download, upload to Framer Assets or your own host, paste the URL. The animation plays exactly as it does everywhere else.

How do I play on hover?

Set Autoplay off. Add a Framer hover interaction that triggers a component variant with Autoplay on. Or use Framer's Code Override to call play/stop on the Lottie instance.

Get your animated icons

Browse icons ready for Framer — free to download.

Browse icons