300 icônes · Lottie JSON · licence MIT

Icônes Lottie gratuites

Chaque icône useAnimations est une animation Lottie JSON standard : n’importe quel lecteur Lottie peut la jouer, que ce soit lottie-web sur le web, lottie-ios, lottie-android, Flutter ou React Native. Les fichiers sont gratuits sous licence MIT, sans inscription, et servis depuis des URL stables avec CORS activé : vous pouvez les charger directement ou les télécharger dans votre projet.

Fichiers et URL

Chaque icône a sa page (en anglais) à l’adresse /icons/<id>, avec un aperçu et les téléchargements. Les fichiers eux-mêmes :

https://useanimations.com/icons/<id>.json          # animation Lottie JSON
https://useanimations.com/icons/<id>.zip           # le JSON et les SVG statiques
https://useanimations.com/icons/<id>/<state>.svg   # SVG statique de chaque état
https://useanimations.com/icons.json               # catalogue de toutes les icônes

icons.json liste chaque icône avec son id, son titre, sa catégorie, ses mots-clés, son interaction, sa taille, sa durée et les URL de ses fichiers : de quoi choisir facilement des icônes par mot-clé dans un script ou laisser un agent de code en sélectionner une. Les fichiers Lottie pèsent 2 kB en médiane.

Web : lottie-web

Le lecteur de référence, développé par Airbnb. Chargez-le depuis un CDN, indiquez-lui l’URL d’une icône et choisissez le moteur de rendu SVG, qui garde l’icône nette et permet de la recolorer en CSS. Utilisez la version complète (lottie.min.js) : la version light ignore les 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>

Suivre la couleur du texte (rendu SVG)

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

Web : interactions au survol et au clic

lottie-web sait lancer et arrêter une animation, mais les interactions sont à votre charge. Voici la bascule au clic de l’icône de menu, avec prise en charge de la réduction des animations ; toutes les interactions suivent le même schéma, et le composant React ci-dessous fait tout cela pour vous.

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 : composant web dotLottie

Le lecteur de LottieFiles fait le rendu dans un canvas avec un moteur WebAssembly et lit aussi bien le Lottie JSON standard que les fichiers .lottie. Un canvas conserve les couleurs du fichier : les icônes restent noires, sauf si vous recolorez le 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>

Ou l’API JavaScript : 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

Aucun lecteur Lottie à installer : le package embarque son propre lecteur de 8 kB, joue l’interaction de chaque icône, suit la couleur du texte et respecte la réduction des animations. Chaque icône est un module distinct : vous ne livrez que celles que vous importez.

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

Intégrez le JSON au bundle avec require() pour un usage hors ligne, ou chargez-le depuis son 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)

Ajoutez le package https://github.com/airbnb/lottie-spm.git avec Swift Package Manager, puis placez le JSON dans votre bundle ou chargez-le depuis son 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)

Ajoutez com.airbnb.android:lottie-compose (ou com.airbnb.android:lottie pour les vues). Placez le JSON dans res/raw pour un usage hors ligne avec 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

Le package lottie est un lecteur en pur Dart pour Android, iOS, le web et le 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')

Icônes avec expressions

2 icônes utilisent des expressions After Effects (loopOut ou wiggle). Sur le web, lisez-les avec la version complète de lottie-web, pas avec lottie_light. Les lecteurs natifs n’évaluent pas les expressions : testez ces icônes sur iOS, Android et Flutter ou choisissez-en une autre ; react-useanimations les joue telles qu’elles ont été conçues.

Questions fréquentes

Ces icônes Lottie sont-elles gratuites pour un usage commercial ?

Oui. Les 300 icônes Lottie sont sous licence MIT : utilisez-les, modifiez-les et redistribuez-les dans vos projets personnels et commerciaux, sans attribution obligatoire et sans compte pour les télécharger.

Quel est le format des fichiers Lottie ?

Du Lottie JSON standard (le format Bodymovin), uniquement avec des calques de forme : ni images, ni polices, ni ressources externes. Chaque icône est dessinée sur un plan de travail de 24 ou 32 px, s’adapte à toutes les tailles et pèse de 1 kB à 14 kB, 2 kB en médiane.

Faut-il lottie-web pour utiliser les icônes dans React ?

Non. react-useanimations embarque son propre lecteur de 8 kB, sans dépendance : vous installez un seul package et importez les icônes dont vous avez besoin. lottie-web ne sert qu’en dehors de React, sur des pages web classiques ou avec d’autres frameworks.

Quelles icônes nécessitent la version complète de lottie-web ?

2 icônes utilisent des expressions After Effects (loopOut ou wiggle) : Error, Twitter. Sur le web, il leur faut la version complète de lottie-web ; lottie_light ignore les expressions. Les lecteurs natifs (lottie-ios, lottie-android, le package lottie de Flutter) ne les évaluent pas non plus : ces icônes peuvent donc s’y animer différemment.

Puis-je changer la couleur d’une icône Lottie ?

Sur le web, le moteur de rendu SVG de lottie-web écrit les couleurs sous forme d’attributs : une règle CSS sur les tracés suffit à recolorer l’icône. Les lecteurs natifs passent par leurs API de propriétés dynamiques : ColorValueProvider sur iOS, LottieProperty.COLOR et STROKE_COLOR sur Android, ValueDelegate.color dans Flutter.

Icônes Lottie populaires