dotLottie vs Lottie JSON: Which Should You Use in 2025?

Two formats exist for Lottie animations: the original .json (Lottie JSON) and the newer .lottie (dotLottie). They render identically in the browser â but one is dramatically smaller. Here's when to use each, and how to switch.

TL;DR

.json â use when maximum tooling compatibility matters
.lottie â use for everything else. 75% smaller, faster, supports multiple animations per file

What Is Lottie JSON?

.json is the original format from Airbnb's Bodymovin plugin. Plain text JSON describing every layer, shape, keyframe, and property.

Human-readable
Universal support
Editable with IconKing

What Is dotLottie (.lottie)?

A ZIP archive containing the Lottie JSON + assets.

Same spinner: ~25KB JSON vs ~7KB dotLottie (72% smaller)
Multiple animations in one file
Embedded fonts/images
Metadata baked in

Size Comparison

Animation	`.json`	`.lottie`	Savings
Loading spinner	24KB	6KB	75%
Success checkmark	18KB	5KB	72%
Hero illustration	145KB	38KB	74%

Converting

IconKing converts .json â .lottie in the browser:

Go to iconking.net
Drop your file
Click convert + download

No account, no upload limit, fully client-side.

Migrating React

// Before: lottie-react
import Lottie from 'lottie-react';
<Lottie animationData={animData} loop autoplay />

// After: dotlottie-react
import { DotLottieReact } from '@lottiefiles/dotlottie-react';
<DotLottieReact src="/animations/animation.lottie" loop autoplay />

When to Use Each

Use .json when:

Using lottie-web/lottie-react directly and don't want to swap libraries
CMS plugins that only support .json
Programmatic manipulation with addValueCallback

Use .lottie when:

New projects
Mobile apps (meaningful bandwidth savings)
Multiple animations in one file
Core Web Vitals matter

Summary

	`.json`	`.lottie`
File size	Larger	~75% smaller
Compatibility	Universal	Growing
Multiple animations	No	Yes
Best for	Legacy projects	New projects, mobile

If you're starting fresh: use .lottie. Convert at IconKing.

DEV Community