300 个图标 · Lottie JSON · MIT 许可

免费 Lottie 图标

每个 useAnimations 图标都是标准的 Lottie JSON 动画，任何 Lottie 播放器都能播放：网页上的 lottie-web，以及 lottie-ios、lottie-android、Flutter 和 React Native。这些文件依据 MIT 许可证免费提供，无需注册，托管在固定网址上并已开启 CORS，既可以直接加载，也可以下载到项目中。

文件与网址

每个图标在 /icons/<id> 都有一个页面，提供预览和下载。文件本身的地址如下：

https://useanimations.com/icons/<id>.json          # Lottie JSON 动画
https://useanimations.com/icons/<id>.zip           # JSON 与静态 SVG
https://useanimations.com/icons/<id>/<state>.svg   # 每个状态的静态 SVG
https://useanimations.com/icons.json               # 全部图标的目录

icons.json 列出了每个图标的 id、标题、类别、关键词、交互方式、尺寸、时长和文件网址，方便在脚本中按关键词挑选图标，或者交给编程智能体来选择。Lottie 文件大小的中位数为 2 kB。

网页：lottie-web

Airbnb 推出的参考播放器。从 CDN 加载，把它指向图标网址，并选择 SVG 渲染器：这样图标始终清晰，还能用 CSS 改色。请使用完整版（lottie.min.js），轻量版不支持表达式。

<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>

跟随文字颜色（SVG 渲染器）

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

网页：悬停与点击交互

lottie-web 只负责播放和停止，交互需要您自己实现。下面是菜单图标的点击切换，并支持减少动态效果；其他交互的写法都与此相同，而下文的 React 组件会替您完成这一切。

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(); } });

网页：dotLottie Web 组件

LottieFiles 推出的播放器，用 WebAssembly 引擎渲染到 canvas 上，既能播放普通的 Lottie JSON，也能播放 .lottie 文件。canvas 会保留文件中的颜色，因此除非修改 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>

或者使用 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

无需安装 Lottie 播放器：这个软件包自带 8 kB 的播放器，会播放每个图标的交互、跟随文字颜色，并尊重减少动态效果设置。每个图标都是独立模块，只有您导入的图标才会被打包。

// 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

用 require() 把 JSON 打包进应用以便离线使用，或者从网址加载。

// 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）

通过 Swift Package Manager 从 https://github.com/airbnb/lottie-spm.git 添加依赖，然后把 JSON 放进应用包，或者从网址加载。

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）

添加 com.airbnb.android:lottie-compose（使用 View 时添加 com.airbnb.android:lottie）。如需离线使用，把 JSON 放在 res/raw 中，并通过 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

lottie 包是纯 Dart 实现的播放器，支持 Android、iOS、Web 和桌面端。

// 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')

使用表达式的图标

2 个图标用到了 After Effects 表达式（loopOut 或 wiggle）。在网页上，请用 lottie-web 的完整版播放，而不是 lottie_light。原生播放器不会执行表达式，因此请在 iOS、Android 和 Flutter 上实际测试这些图标，或者换用其他图标；react-useanimations 则能按设计效果播放它们。

常见问题

这些 Lottie 图标可以免费商用吗？

可以。全部 300 个 Lottie 图标都采用 MIT 许可证：可以在个人和商业项目中使用、修改和再分发，无需署名，下载也不需要注册账号。

Lottie 文件是什么格式？

标准的 Lottie JSON（即 Bodymovin 格式），只包含形状图层：没有图片、字体或外部资源。每个图标绘制在 24 或 32 px 的画板上，可以缩放到任意尺寸，文件大小在 1 kB 到 14 kB 之间，中位数为 2 kB。

在 React 中使用这些图标需要 lottie-web 吗？

不需要。react-useanimations 自带 8 kB 的播放器，没有任何依赖，只需安装一个软件包，再导入需要的图标即可。只有在 React 之外，比如普通网页或其他框架中，才需要 lottie-web。

哪些图标需要 lottie-web 的完整版？

有 2 个图标用到了 After Effects 表达式（loopOut 或 wiggle）：Error、Twitter。在网页上，它们需要 lottie-web 的完整版；lottie_light 会忽略表达式。原生播放器（lottie-ios、lottie-android、Flutter 的 lottie）同样不会执行表达式，因此这些图标在那里的动效可能会有所不同。

可以修改 Lottie 图标的颜色吗？

在网页上，lottie-web 的 SVG 渲染器会把颜色写成属性，因此给路径加一条 CSS 规则就能给图标改色。原生播放器则使用各自的动态属性 API：iOS 上是 ColorValueProvider，Android 上是 LottieProperty.COLOR 和 STROKE_COLOR，Flutter 中是 ValueDelegate.color。

热门 Lottie 图标