Lottie · HTML

Lottie in HTML

Add Lottie animated icons to any HTML page via CDN — no build tools or framework required.

1

Include the Lottie script

Add the CDN script tag to your HTML page's or before your closing tag.

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

Add a container element

Create a container div for your animation. Set its size with CSS or inline styles.

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

Load and play the animation

Call lottie.loadAnimation() with the path to your downloaded icon JSON file.

copy
<script>
  var animation = lottie.loadAnimation({
    container: document.getElementById('lottie-container'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: 'your_animation.json' // Path to your downloaded icon
  });
</script>
4

Control the animation

Use the animation instance to pause, play, or stop at any time.

copy
animation.pause(); // Pause
animation.play();  // Resume
animation.stop();  // Stop and reset
Get your icons
Browse animated icons ready for HTML.
Browse free icons →