300 icon · Lottie JSON · Giấy phép MIT

Icon Lottie miễn phí

Mỗi icon của useAnimations là một animation Lottie JSON chuẩn, nên mọi Lottie player đều phát được: lottie-web trên web, lottie-ios, lottie-android, Flutter và React Native. Các tệp miễn phí theo giấy phép MIT, không cần đăng ký, được phục vụ từ URL cố định có bật CORS, nên bạn có thể dùng thẳng từ URL hoặc tải về đưa vào dự án.

Tệp và URL

Mỗi icon có một trang tại /icons/<id> với bản xem trước và các tệp tải về. Bản thân các tệp:

https://useanimations.com/icons/<id>.json          # animation Lottie JSON
https://useanimations.com/icons/<id>.zip           # tệp JSON và các SVG tĩnh
https://useanimations.com/icons/<id>/<state>.svg   # SVG tĩnh của từng trạng thái
https://useanimations.com/icons.json               # catalog của mọi icon

icons.json liệt kê mọi icon kèm id, tiêu đề, danh mục, từ khóa, tương tác, kích thước, thời lượng và URL tệp, nhờ vậy dễ dàng chọn icon theo từ khóa trong một script hoặc để coding agent tự chọn. Tệp Lottie có kích thước trung vị 2 kB.

Web: lottie-web

Player tham chiếu của Airbnb. Tải nó từ CDN, trỏ tới URL của icon và chọn renderer SVG: icon giữ được độ sắc nét và có thể đổi màu bằng CSS. Hãy dùng bản đầy đủ (lottie.min.js), vì bản light bỏ qua expression.

<div id="icon" style="width: 48px; height: 48px"></div>

<script src="https://cdn.jsdelivr.net/npm/lottie-web@5.13.0/build/player/lottie.min.js"></script>
<script>
  lottie.loadAnimation({
    container: document.getElementById('icon'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: 'https://useanimations.com/icons/loading.json',
  });
</script>

Theo màu chữ (renderer SVG)

#icon path[stroke^='rgb']:not([stroke='rgb(255,255,255)']) { stroke: currentColor; }
#icon path[fill='rgb(0,0,0)'] { fill: currentColor; }

Web: tương tác hover và click

lottie-web chỉ phát và dừng, còn tương tác thì bạn phải tự viết. Dưới đây là tương tác click bật/tắt của icon menu, có hỗ trợ giảm chuyển động; mọi tương tác khác đều theo cùng một khuôn mẫu, và React component bên dưới làm sẵn tất cả cho bạn.

import lottie from 'lottie-web'; // npm install lottie-web

const el = document.querySelector('#menu-button');
const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/menu.json' });
const motion = matchMedia('(prefers-reduced-motion: reduce)');
let isOn = true; // Frame 0 is on; the final frame is off.
el.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });

Web: web component dotLottie

Player của LottieFiles render lên canvas bằng engine WebAssembly, phát được cả Lottie JSON thuần lẫn tệp .lottie. Canvas giữ nguyên màu trong tệp, nên icon sẽ có màu đen trừ khi bạn sửa màu trong JSON.

<script type="module" src="https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-wc@0.10.0/dist/dotlottie-wc.js"></script>

<dotlottie-wc src="https://useanimations.com/icons/loading.json" autoplay loop style="width: 48px; height: 48px"></dotlottie-wc>

Hoặc dùng JavaScript API: npm install @lottiefiles/dotlottie-web

import { DotLottie } from '@lottiefiles/dotlottie-web';

new DotLottie({
  canvas: document.querySelector('#icon-canvas'),
  src: 'https://useanimations.com/icons/loading.json',
  autoplay: true,
  loop: true,
});

React: react-useanimations

Không cần cài Lottie player: package có player riêng chỉ 8 kB, chạy tương tác của từng icon, tự theo màu chữ và tôn trọng thiết lập giảm chuyển động. Mỗi icon là một module riêng, nên bạn chỉ đưa vào bundle những icon đã import.

// npm install react-useanimations
import UseAnimations from 'react-useanimations';
import loading from 'react-useanimations/lib/loading';

<UseAnimations animation={loading} size={48} />

React Native: lottie-react-native

Đóng gói JSON bằng require() để dùng offline, hoặc tải từ URL của nó.

// npm install lottie-react-native
import LottieView from 'lottie-react-native';

<LottieView
  source={{ uri: 'https://useanimations.com/icons/loading.json' }} // or require('./loading.json')
  autoPlay
  loop
  style={{ width: 48, height: 48 }}
/>

iOS: lottie-ios (SwiftUI)

Thêm package từ https://github.com/airbnb/lottie-spm.git bằng Swift Package Manager, rồi đưa tệp JSON vào bundle hoặc tải từ URL của nó.

import Lottie
import SwiftUI

struct LoadingIcon: View {
  var body: some View {
    // Bundled file: LottieView(animation: .named("loading"))
    LottieView {
      await LottieAnimation.loadedFrom(url: URL(string: "https://useanimations.com/icons/loading.json")!)
    }
    .looping()
    .frame(width: 48, height: 48)
  }
}

Android: lottie-android (Jetpack Compose)

Thêm com.airbnb.android:lottie-compose (hoặc com.airbnb.android:lottie nếu dùng View). Đặt tệp JSON trong res/raw để dùng offline với LottieCompositionSpec.RawRes.

// build.gradle.kts: implementation("com.airbnb.android:lottie-compose:6.7.1")
@Composable
fun LoadingIcon() {
  val composition by rememberLottieComposition(
    LottieCompositionSpec.Url("https://useanimations.com/icons/loading.json")
  )
  LottieAnimation(
    composition = composition,
    iterations = LottieConstants.IterateForever,
    modifier = Modifier.size(48.dp),
  )
}

Flutter: lottie

Package lottie là một player viết hoàn toàn bằng Dart, chạy trên Android, iOS, web và desktop.

// pubspec.yaml: lottie: ^3.6.1
import 'package:lottie/lottie.dart';

Lottie.network(
  'https://useanimations.com/icons/loading.json',
  width: 48,
  height: 48,
) // or Lottie.asset('assets/loading.json')

Icon có expression

2 icon dùng expression của After Effects (loopOut hoặc wiggle). Trên web, hãy phát chúng bằng bản đầy đủ của lottie-web, không phải lottie_light. Các player native không xử lý expression, nên hãy kiểm tra những icon này trên iOS, Android và Flutter hoặc chọn icon khác; react-useanimations phát chúng đúng như thiết kế.

Câu hỏi thường gặp

Các icon Lottie này có miễn phí cho mục đích thương mại không?

Có. Cả 300 icon Lottie đều dùng giấy phép MIT: bạn được dùng, chỉnh sửa và phân phối lại trong dự án cá nhân lẫn thương mại, không bắt buộc ghi nguồn và không cần tài khoản để tải về.

Tệp Lottie có định dạng gì?

Lottie JSON chuẩn (định dạng Bodymovin), chỉ gồm shape layer: không có ảnh, font hay tài nguyên bên ngoài. Mỗi icon được vẽ trên artboard 24 hoặc 32 px, co giãn tới mọi kích thước và nặng từ 1 kB đến 14 kB, trung vị 2 kB.

Có cần lottie-web để dùng icon trong React không?

Không. react-useanimations có player riêng chỉ 8 kB và không có dependency, nên bạn chỉ cần cài một package và import những icon cần dùng. lottie-web chỉ cần khi dùng ngoài React, trên trang web thuần hoặc trong framework khác.

Những icon nào cần bản đầy đủ của lottie-web?

2 icon dùng expression của After Effects (loopOut hoặc wiggle): Error và Twitter. Trên web, chúng cần bản đầy đủ của lottie-web; lottie_light bỏ qua expression. Các player native (lottie-ios, lottie-android, package lottie của Flutter) cũng không xử lý expression, nên ở đó các icon này có thể chuyển động khác đi.

Có đổi màu icon Lottie được không?

Trên web, renderer SVG của lottie-web ghi màu dưới dạng thuộc tính, nên một rule CSS nhắm vào các path là đổi được màu icon. Các player native dùng API dynamic property riêng: ColorValueProvider trên iOS, LottieProperty.COLOR và STROKE_COLOR trên Android, và ValueDelegate.color trong Flutter.

Icon Lottie phổ biến