Using unicorn icons in HTML

Learn how to integrate lottie animations into your HTML page effortlessly.

1. Include Lottie Script

Use the CDN link to include Lottie Script in your HTML page or use the local file path.

copy

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

2. Add a Container for Animation

Create a container for your animation and set its width and height.

copy

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

3. Load and Play Animation

Load the animation file using the loadAnimation method. Make sure to use proper path for your animation file.

copy

<script>
  var animation = lottie.loadAnimation({
    container: document.getElementById('lottie-container'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: 'animation.json' // Replace with your animation file path
  });
</script>

4. Control Animation

copy

animation.pause(); // Pause
animation.play(); // Play
animation.stop(); // Stop

5. Get Lottie Animations

Find free animations at Unicornicons.

We use cookies