Do I need npm to use Lottie in HTML?

No. The CDN script tag loads lottie-web directly in the browser. You just need the script tag in your HTML and a path to your JSON animation file.

Where do I put the Lottie JSON file?

Put the JSON file anywhere your server can serve it. The path in lottie.loadAnimation() should be the URL or relative path to that file — the same way you'd reference an image or a script.

Can I use Lottie without a server?

You need to serve the JSON file from somewhere — a local server, a CDN, or your hosting. The CDN script for lottie-web itself loads fine from a local file, but the path option in loadAnimation() uses a fetch request, so file:// paths won't work. Use a simple local server (like live-server or VS Code's Live Preview) during development.

Limited offer — lifetime access:$75$60

Lottie · HTML

Using Lottie icons in HTML

No npm, no build step. One CDN script tag and a JSON file is all you need. Works in any HTML page, static site, or template engine.

Add the CDN script

Paste this into your <head> or just before the closing </body> tag.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.9.6/lottie.min.js"></script>

Add a container div

Give it a fixed size — Lottie will fill whatever dimensions you set.

HTML

<div id="lottie-icon" style="width: 150px; height: 150px;"></div>

Load your animation

Point path at your downloaded JSON file. It autoplays and loops by default.

var anim = lottie.loadAnimation({
  container: document.getElementById('lottie-icon'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'your_animation.json'
});

Control playback

Use the returned animation instance to pause, play, or stop whenever you need.

anim.pause();
anim.play();
anim.stop();

Common questions

Do I need npm?

No. The CDN script handles everything. You just need the script tag and a path to your JSON file.

Where do I put the JSON file?

Anywhere your server serves files. The path option works like an image src — relative paths, absolute paths, CDN URLs all work.

Will this work on a local file?

Not with file:// — Lottie fetches the JSON over HTTP. Use a local server (VS Code Live Preview, npx serve, etc.) while developing.

Get your animated icons

Browse icons ready for HTML — free to download.

Browse icons