300 Icons · Lottie JSON · MIT-Lizenz

Kostenlose Lottie-Icons

Jedes useAnimations-Icon ist eine Standard-Lottie-JSON-Animation und läuft damit in jedem Lottie-Player: lottie-web im Web, lottie-ios, lottie-android, Flutter und React Native. Die Dateien sind unter der MIT-Lizenz kostenlos, ohne Registrierung, und liegen unter stabilen URLs mit aktiviertem CORS. Sie können sie also direkt laden oder in Ihr Projekt herunterladen.

Dateien und URLs

Jedes Icon hat eine Seite unter /icons/<id> mit Vorschau und Downloads (nur auf Englisch). Die Dateien selbst:

https://useanimations.com/icons/<id>.json          # Lottie-JSON-Animation
https://useanimations.com/icons/<id>.zip           # JSON und statische SVGs
https://useanimations.com/icons/<id>/<state>.svg   # statisches SVG je Zustand
https://useanimations.com/icons.json               # Katalog aller Icons

icons.json listet jedes Icon mit ID, Titel, Kategorie, Keywords, Interaktion, Größe, Dauer und Datei-URLs auf. So lassen sich Icons per Skript nach Stichwort auswählen, oder ein Coding-Agent sucht eines aus. Die Lottie-Dateien sind im Median 2 kB groß.

Web: lottie-web

Der Referenz-Player von Airbnb. Laden Sie ihn von einem CDN, geben Sie ihm eine Icon-URL und wählen Sie den SVG-Renderer: Damit bleibt das Icon gestochen scharf und lässt sich per CSS umfärben. Nutzen Sie den vollständigen Build (lottie.min.js), denn der Light-Build ignoriert Expressions.

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

Textfarbe übernehmen (SVG-Renderer)

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

Web: Interaktionen für Hover und Klick

lottie-web kann abspielen und stoppen, die Interaktionen bauen Sie aber selbst. Hier ist der Klick-Toggle des Menü-Icons mit Unterstützung für reduzierte Bewegung; alle Interaktionen folgen demselben Muster, und die React-Komponente weiter unten erledigt das alles für Sie.

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: dotLottie-Webkomponente

Der Player von LottieFiles rendert mit einer WebAssembly-Engine in ein Canvas und spielt neben .lottie-Dateien auch reines Lottie JSON ab. Ein Canvas übernimmt die Farben aus der Datei, die Icons bleiben also schwarz, solange Sie das JSON nicht umfärben.

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

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

Kein Lottie-Player nötig: Das Paket bringt einen eigenen Player mit 8 kB mit, spielt die Interaktion jedes Icons ab, übernimmt die Textfarbe und berücksichtigt reduzierte Bewegung. Jedes Icon ist ein eigenes Modul, ausgeliefert werden also nur die, die Sie importieren.

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

Binden Sie das JSON für die Offline-Nutzung mit require() ein oder laden Sie es über seine 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)

Fügen Sie das Paket https://github.com/airbnb/lottie-spm.git mit dem Swift Package Manager hinzu und legen Sie das JSON dann in Ihr Bundle oder laden Sie es über seine 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)

Fügen Sie com.airbnb.android:lottie-compose hinzu (oder com.airbnb.android:lottie für Views). Für die Offline-Nutzung mit LottieCompositionSpec.RawRes legen Sie das JSON in res/raw ab.

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

Das Paket lottie ist ein reiner Dart-Player für Android, iOS, Web und 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')

Icons mit Expressions

2 Icons nutzen After-Effects-Expressions (loopOut oder wiggle). Im Web spielen Sie diese mit dem vollständigen Build von lottie-web ab, nicht mit lottie_light. Native Player werten keine Expressions aus; testen Sie diese Icons daher unter iOS, Android und Flutter oder wählen Sie ein anderes. react-useanimations spielt sie so ab, wie sie gestaltet wurden.

Häufige Fragen

Sind diese Lottie-Icons für die kommerzielle Nutzung kostenlos?

Ja. Alle 300 Lottie-Icons stehen unter der MIT-Lizenz: Sie dürfen sie in privaten und kommerziellen Projekten nutzen, verändern und weitergeben, ohne Namensnennung und ohne Konto für den Download.

In welchem Format liegen die Lottie-Dateien vor?

Standard-Lottie-JSON (das Bodymovin-Format) ausschließlich mit Formebenen: keine Bilder, Schriften oder externen Assets. Jedes Icon ist auf einer Zeichenfläche von 24 oder 32 px gezeichnet, lässt sich beliebig skalieren und ist 1 kB bis 14 kB groß, im Median 2 kB.

Brauche ich lottie-web, um die Icons in React zu nutzen?

Nein. react-useanimations hat einen eigenen Player mit 8 kB ohne Abhängigkeiten: Sie installieren ein Paket und importieren die Icons, die Sie brauchen. lottie-web ist nur außerhalb von React nötig, also auf reinen Webseiten oder in anderen Frameworks.

Welche Icons brauchen den vollständigen Build von lottie-web?

2 Icons nutzen After-Effects-Expressions (loopOut oder wiggle): Error und Twitter. Im Web brauchen sie den vollständigen Build von lottie-web, denn lottie_light ignoriert Expressions. Auch native Player (lottie-ios, lottie-android, das Flutter-Paket lottie) werten keine Expressions aus, dort bewegen sich diese Icons also möglicherweise anders.

Kann ich die Farbe eines Lottie-Icons ändern?

Im Web schreibt der SVG-Renderer von lottie-web die Farben als Attribute, eine CSS-Regel für die Pfade färbt das Icon also um. Native Player nutzen ihre APIs für dynamische Eigenschaften: ColorValueProvider unter iOS, LottieProperty.COLOR und STROKE_COLOR unter Android und ValueDelegate.color in Flutter.

Beliebte Lottie-Icons