Why does Wix use an HTML Embed (iFrame) for custom elements?

Wix runs all custom HTML in an isolated iFrame for security. This means the lottie-player script loads inside the iFrame context, which is fine for displaying animations. The downside is you can't easily interact with Wix page state from inside the embed.

Where do I host the Lottie JSON file for Wix?

Use any public HTTPS URL — jsDelivr, Cloudflare R2, S3, or your own server. Wix doesn't have a general-purpose file host for JSON, so you need an external URL.

Can I use Wix Studio instead of the classic Wix editor?

Yes. Wix Studio has an HTML Embed element that works the same way. Add → Embed & Social → HTML iFrame. Paste the same code snippet and it works.

Limited offer — lifetime access:$75$60

Lottie · Wix

Using Lottie icons in Wix

Wix runs custom HTML in an iFrame embed. Paste a self-contained snippet with the lottie-player script inside — no Velo code needed.

Host your Lottie JSON file

Download the Lottie JSON from Unicorn Icons and upload it to any public host. You need a public HTTPS URL — jsDelivr, Cloudflare R2, S3, or your own server all work.

Add an HTML Embed element in Wix

In the Wix editor: click + Add Elements → Embed & Social → Embed HTML. This adds an HTML iFrame element to your page.

Paste the lottie-player snippet

Click 'Enter Code' on the embed element. Paste the full HTML below — both the script tag and the lottie-player element.

HTML

<html>
<body style="margin:0;padding:0;background:transparent;">
  <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
  <lottie-player
    src="https://your-domain.com/your-animation.json"
    background="transparent"
    speed="1"
    style="width:150px;height:150px;"
    loop
    autoplay>
  </lottie-player>
</body>
</html>

Resize the embed to match your icon

In the Wix editor, drag the embed element to match the icon size you set in the HTML (e.g., 150×150px). Wix uses iFrame, so the embed box needs to match the content size.

iFrame sizing note

Wix embeds run in an iFrame, so the embed element size in the Wix editor needs to match the HTML content size. If the icon looks cut off, increase the embed element's height and width in the editor.

Common questions

Why does Wix use an iFrame?

Wix sandboxes custom HTML for security. The embed runs in an isolated iFrame — the lottie-player script loads inside it, which works fine for displaying animations.

Where do I host the JSON?

Any public HTTPS URL works. Wix doesn't host JSON files natively, so use jsDelivr, Cloudflare R2, S3, or your own server.

Works in Wix Studio?

Yes. Add → Embed & Social → HTML iFrame. Same code, same result.

Get your animated icons

Browse icons ready for Wix — free to download.

Browse icons