300 ikon · Lottie JSON · licence MIT

Lottie ikony zdarma

Každá ikona useAnimations je standardní Lottie JSON animace, takže ji přehraje jakýkoli Lottie přehrávač: lottie-web na webu, lottie-ios, lottie-android, Flutter i React Native. Soubory jsou zdarma pod licencí MIT, bez registrace, a jsou dostupné na stálých URL s povoleným CORS, takže je můžete načítat přímo nebo si je stáhnout do projektu.

Soubory a URL

Každá ikona má na adrese /icons/<id> stránku s náhledem a soubory ke stažení (v angličtině). Samotné soubory:

https://useanimations.com/icons/<id>.json          # Lottie JSON animace
https://useanimations.com/icons/<id>.zip           # JSON a statická SVG
https://useanimations.com/icons/<id>/<state>.svg   # statické SVG každého stavu
https://useanimations.com/icons.json               # katalog všech ikon

icons.json obsahuje všechny ikony s jejich id, názvem, kategorií, klíčovými slovy, interakcí, velikostí, délkou a URL souborů. Ikony tak snadno vyberete podle klíčového slova ve skriptu nebo výběr necháte na AI agentovi. Medián velikosti Lottie souboru je 2 kB.

Web: lottie-web

Referenční přehrávač od Airbnb. Načtěte ho z CDN, nasměrujte ho na URL ikony a zvolte SVG renderer, se kterým ikona zůstane ostrá a jde přebarvit přes CSS. Použijte plný build (lottie.min.js): light build výrazy (expressions) nepodporuje.

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

Přebírání barvy textu (SVG renderer)

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

Web: interakce na hover a kliknutí

lottie-web umí přehrávat a zastavovat, interakce si ale musíte napsat sami. Tohle je přepínání kliknutím u ikony menu s podporou omezeného pohybu; všechny interakce fungují podle stejného vzoru a React komponenta níže to všechno udělá za vás.

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: webová komponenta dotLottie

Přehrávač od LottieFiles vykresluje pomocí enginu ve WebAssembly do canvasu a kromě souborů .lottie přehraje i obyčejný Lottie JSON. Canvas zachová barvy ze souboru, takže ikony zůstanou černé, dokud JSON nepřebarvíte.

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

Nebo 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

Žádný Lottie přehrávač instalovat nemusíte: balíček má vlastní přehrávač o velikosti 8 kB, přehrává interakci každé ikony, přebírá barvu textu a respektuje omezený pohyb. Každá ikona je samostatný modul, takže do aplikace dostanete jen ty, které naimportujete.

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

Pro offline použití zabalte JSON do aplikace přes require(), nebo ho načtěte z jeho 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)

Přidejte balíček z https://github.com/airbnb/lottie-spm.git přes Swift Package Manager a pak vložte JSON do bundlu aplikace, nebo ho načtěte z jeho 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)

Přidejte com.airbnb.android:lottie-compose (nebo com.airbnb.android:lottie pro views). Pro offline použití dejte JSON do res/raw a načtěte ho přes 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

Balíček lottie je přehrávač napsaný čistě v Dartu pro Android, iOS, web i 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')

Ikony s výrazy (expressions)

2 ikony používají výrazy (expressions) z After Effects (loopOut nebo wiggle). Na webu je přehrávejte plným buildem lottie-web, ne lottie_light. Nativní přehrávače výrazy nevyhodnocují, takže tyto ikony na iOS, Androidu a ve Flutteru otestujte, nebo zvolte jinou; react-useanimations je přehraje tak, jak byly navržené.

Časté dotazy

Jsou tyto Lottie ikony zdarma i pro komerční použití?

Ano. Všech 300 Lottie ikon je pod licencí MIT: můžete je používat, upravovat a dále šířit v osobních i komerčních projektech, bez uvedení autora a bez účtu ke stažení.

V jakém formátu jsou Lottie soubory?

Standardní Lottie JSON (formát Bodymovin) jen s tvarovými vrstvami: žádné obrázky, fonty ani externí soubory. Každá ikona je nakreslená na plátně 24 nebo 32 px, škáluje se na libovolnou velikost a má 1 až 14 kB, medián 2 kB.

Je pro použití ikon v Reactu potřeba lottie-web?

Ne. react-useanimations má vlastní přehrávač o velikosti 8 kB bez závislostí, takže nainstalujete jeden balíček a naimportujete ikony, které potřebujete. lottie-web potřebujete jen mimo React, na obyčejných webových stránkách nebo v jiných frameworcích.

Které ikony potřebují plný build lottie-web?

2 ikony používají výrazy (expressions) z After Effects (loopOut nebo wiggle): Error a Twitter. Na webu potřebují plný build lottie-web; lottie_light výrazy ignoruje. Nativní přehrávače (lottie-ios, lottie-android, lottie pro Flutter) výrazy také nevyhodnocují, takže se tam tyto ikony mohou pohybovat jinak.

Můžu změnit barvu Lottie ikony?

Na webu zapisuje SVG renderer lottie-web barvy jako atributy, takže ikonu přebarvíte CSS pravidlem pro cesty (paths). Nativní přehrávače mají vlastní API pro dynamické vlastnosti: ColorValueProvider na iOS, LottieProperty.COLOR a STROKE_COLOR na Androidu a ValueDelegate.color ve Flutteru.

Oblíbené Lottie ikony