Do I need a Lottie plugin for WordPress?

No. The lottie-player web component works in a Custom HTML block with no plugin. Just paste the script tag and the element — it loads directly from a CDN.

Where do I upload the Lottie JSON in WordPress?

You can upload the JSON to WordPress Media Library (it may need a file type whitelist adjustment), use WordPress's built-in file manager, or host it on any public URL — a CDN, S3 bucket, or jsDelivr all work fine.

Will this work with page builders like Elementor or Divi?

Yes. Any page builder that allows HTML embedding works. In Elementor, use the HTML widget. In Divi, use the Code module. Paste the same code from this guide and it will work.

Limited offer — lifetime access:$75$60

Lottie · WordPress

Using Lottie icons in WordPress

No plugin needed. Add a Custom HTML block in Gutenberg and paste the lottie-player web component — it loads from a CDN and plays inline.

Host your Lottie JSON file

Download the Lottie JSON from Unicorn Icons. Upload it to any public host — your WordPress media library, a CDN, or an S3 bucket. You need a public HTTPS URL.

Add a Custom HTML block in Gutenberg

Open your page or post in the WordPress editor. Click + to add a block, search for 'Custom HTML', and add it.

Paste the lottie-player code

Paste this into the Custom HTML block. Replace the src URL with your uploaded JSON file URL.

HTML

<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>

Play on hover (optional)

Replace autoplay with hover and the animation only plays when a visitor 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>

Using a page builder?

The same code works in any WordPress HTML embed — Elementor's HTML widget, Divi's Code module, or Beaver Builder's HTML module. Paste and save.

Common questions

Do I need a plugin?

No. The Custom HTML block and lottie-player CDN script handle everything. No plugin installation needed.

Where do I put the JSON file?

Any public HTTPS URL works. Easiest: upload to WordPress Media Library. If it blocks the JSON filetype, rename it to .txt temporarily or use a CDN.

Works with Elementor/Divi?

Yes. Any HTML embed in any page builder works. Paste the same code from step 3 into the HTML widget/module.

Get your animated icons

Browse icons ready for WordPress — free to download.

Browse icons