How to use animated Lottie icons

Lottie icons are small vector animations stored as JSON. They stay sharp at any size, weigh a few kilobytes and can be recoloured in code.

Which file to pick

• Lottie JSON — the universal format, works with every Lottie player. One file per stroke weight and theme.
• dotLottie (.lottie) — a compressed container; MotiLoop files hold the light and dark themes in one file, switched in the player.
• SVG — the static first frame, for places where motion isn't needed, or as a placeholder while the animation loads.
• PNG — for email, slides and tools without vector support.

Loop, hover or still

Every MotiLoop animation starts and ends on its static frame. That means you can loop it, play it once on hover or tap and stop on frame 0, or show it as a still — the icon never "jumps".

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie_light.min.js"></script>
<div id="icon" style="width:48px;height:48px"></div>
<script>
  const anim = lottie.loadAnimation({
    container: document.getElementById("icon"),
    renderer: "svg", loop: true, autoplay: false,
    path: "search_2.0_light.json"
  });
  icon.addEventListener("mouseenter", () => anim.play());
  icon.addEventListener("mouseleave", () => anim.goToAndStop(0, true));
</script>

React

import Lottie from "lottie-react";
import search from "./icons/search_2.0_light.json";

export const SearchIcon = () => <Lottie animationData={search} loop style={{ width: 24, height: 24 }} />;

iOS, Android, Flutter, React Native

Use the same JSON with lottie-ios, lottie-android, the lottie Flutter package or lottie-react-native. The icons use shape layers only — no images, expressions or effects — so they render the same in every player.

Figma

The Complete sets include a Figma file with every icon as a component with Theme (light / dark) × Weight (1.5 / 2.0 / 2.5) variants and colour variables, so mock-ups match the shipped animation.

Recolouring

Colours sit in Lottie slots named base and accent. Players that support slots can change them at runtime; otherwise edit the two values once in the JSON.