300 иконок · Lottie JSON · лицензия MIT

Бесплатные Lottie-иконки

Каждая иконка useAnimations — это стандартная анимация Lottie JSON, поэтому её воспроизводит любой Lottie-плеер: lottie-web в браузере, lottie-ios, lottie-android, Flutter и React Native. Файлы бесплатны по лицензии MIT, без регистрации, и отдаются по постоянным URL с включённым CORS, так что их можно загружать напрямую или скачать в свой проект.

Файлы и URL

У каждой иконки есть страница /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, названием, категорией, ключевыми словами, взаимодействием, размером, длительностью и URL файлов — так иконки легко подбирать по ключевому слову в скрипте или доверить выбор ИИ-агенту. Медианный размер файла Lottie — 2 КБ.

Веб: lottie-web

Эталонный плеер от Airbnb. Подключите его с CDN, укажите URL иконки и выберите 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

Плеер от LottieFiles рендерит на canvas с помощью движка на WebAssembly и воспроизводит как обычный 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 КБ, который проигрывает взаимодействие каждой иконки, берёт цвет текста и учитывает уменьшение движения. Каждая иконка — отдельный модуль, поэтому в сборку попадают только импортированные.

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

Подключите JSON через require(), чтобы он работал офлайн, или загружайте его по URL.

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

Добавьте пакет https://github.com/airbnb/lottie-spm.git через Swift Package Manager, затем положите JSON в бандл приложения или загружайте его по URL.

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 (или com.airbnb.android:lottie для View). Для офлайн-работы положите 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, веба и десктопа.

// 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 до 14 КБ, медиана — 2 КБ.

Нужен ли lottie-web, чтобы использовать иконки в React?

Нет. У react-useanimations есть собственный плеер на 8 КБ без зависимостей, так что вы устанавливаете один пакет и импортируете нужные иконки. lottie-web нужен только вне React — на обычных веб-страницах или в других фреймворках.

Каким иконкам нужна полная сборка lottie-web?

2 иконки используют выражения After Effects (loopOut или wiggle): Error и Twitter. В браузере им нужна полная сборка lottie-web, lottie_light выражения игнорирует. Нативные плееры (lottie-ios, lottie-android, lottie для Flutter) выражения тоже не вычисляют, поэтому там эти иконки могут двигаться иначе.

Можно ли изменить цвет Lottie-иконки?

В браузере SVG-рендерер lottie-web записывает цвета в атрибуты, поэтому иконку перекрашивает CSS-правило для path. В нативных плеерах есть API динамических свойств: ColorValueProvider на iOS, LottieProperty.COLOR и STROKE_COLOR на Android и ValueDelegate.color во Flutter.

Популярные Lottie-иконки