Do I need a paid Webflow plan to add custom code?

Custom code in Site Settings (Head Code / Footer Code) requires a paid Webflow site plan. The Embed element within the canvas also requires a paid plan to work in published output. The free plan shows embeds in the designer but not when published.

Where do I host the Lottie JSON file for Webflow?

Upload the JSON to Webflow Assets (in the Assets panel), use a CDN like jsDelivr, or serve it from your own storage. You need a public HTTPS URL that the lottie-player element can fetch.

Can I control when the Lottie animation plays in Webflow?

Yes. Remove the autoplay attribute from the lottie-player element and use Webflow Interactions to trigger a JavaScript call that plays the animation. Or use the hover attribute on lottie-player to play on hover automatically.

Limited offer — lifetime access:$75$60

Lottie · Webflow

Using Lottie icons in Webflow

Two steps: add the lottie-player script to your page head, then drop an Embed block wherever you want the icon.

Add the script to your page head

In Webflow: go to Page Settings → Custom Code → Head Code. Paste the lottie-player script. This loads the custom element for the whole page.

HTML

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

Upload your JSON to Webflow Assets

In the Webflow designer, open the Assets panel and upload your Lottie JSON file. Copy the URL it generates — you'll need it in the next step.

Add an Embed block with the lottie-player element

Add an HTML Embed element to your page. Paste the lottie-player tag with your JSON URL in the src attribute.

HTML

<lottie-player
  src="https://your-domain.com/your-animation.json"
  background="transparent"
  speed="1"
  style="width: 150px; height: 150px;"
  loop
  autoplay>
</lottie-player>

Play on hover (optional)

Add the hover attribute to the lottie-player element instead of autoplay. The animation plays when a user hovers over it.

HTML

<lottie-player
  src="https://your-domain.com/your-animation.json"
  background="transparent"
  speed="1"
  style="width: 150px; height: 150px;"
  loop
  hover>
</lottie-player>

Custom code requires a paid Webflow plan

The Head Code field and Embed elements only work in published output on paid Webflow site plans. They render in the designer on all plans.

Common questions

Do I need a paid plan?

Yes. Custom code in Head/Footer and published Embed elements require a paid Webflow site plan.

Where do I host the JSON?

Upload to Webflow Assets and copy the URL. Or use any public HTTPS URL — jsDelivr, your own CDN, S3 bucket.

How do I play on hover?

Replace autoplay with hover in the lottie-player attributes. Step 4 shows the exact markup.

Get your animated icons

Browse icons ready for Webflow — free to download.

Browse icons