300 iconos · Lottie JSON · licencia MIT

Iconos Lottie gratis

Cada icono de useAnimations es una animación Lottie JSON estándar, así que cualquier reproductor de Lottie puede reproducirla: lottie-web en la web, lottie-ios, lottie-android, Flutter y React Native. Los archivos son gratis con la licencia MIT, sin registro, y se sirven desde URL estables con CORS habilitado, así que puedes cargarlos directamente o descargarlos en tu proyecto.

Archivos y URL

Cada icono tiene una página en /icons/<id> (en inglés) con vista previa y descargas. Los archivos en sí:

https://useanimations.com/icons/<id>.json          # animación Lottie JSON
https://useanimations.com/icons/<id>.zip           # el JSON y los SVG estáticos
https://useanimations.com/icons/<id>/<state>.svg   # SVG estático de cada estado
https://useanimations.com/icons.json               # catálogo de todos los iconos

icons.json recoge cada icono con su id, título, categoría, palabras clave, interacción, tamaño, duración y URL de archivos, lo que facilita elegir iconos por palabra clave desde un script o dejar que un agente de programación escoja uno. Los archivos Lottie pesan 2 kB de mediana.

Web: lottie-web

El reproductor de referencia, creado por Airbnb. Cárgalo desde un CDN, apúntalo a la URL de un icono y elige el renderizador SVG, que mantiene el icono nítido y permite cambiarle el color con CSS. Usa la versión completa (lottie.min.js): la versión ligera ignora las expresiones.

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

Seguir el color del texto (renderizador SVG)

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

Web: interacciones de hover y clic

lottie-web reproduce y detiene, pero las interacciones corren de tu cuenta. Este es el toggle con clic del icono de menú, con soporte para movimiento reducido; todas las interacciones siguen el mismo patrón, y el componente de React que verás más abajo lo hace todo por ti.

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: componente web de dotLottie

El reproductor de LottieFiles renderiza en un canvas con un motor WebAssembly y reproduce tanto Lottie JSON normal como archivos .lottie. Un canvas conserva los colores del archivo, así que los iconos se quedan en negro a menos que cambies el color en el 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>

O la API de 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

No hace falta instalar ningún reproductor de Lottie: el paquete trae su propio reproductor de 8 kB, reproduce la interacción de cada icono, sigue el color del texto y respeta el movimiento reducido. Cada icono es un módulo independiente, así que solo envías los que importas.

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

Incluye el JSON en el bundle con require() para usarlo sin conexión, o cárgalo desde su 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)

Añade el paquete desde https://github.com/airbnb/lottie-spm.git con Swift Package Manager y, después, incluye el JSON en tu bundle o cárgalo desde su 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)

Añade com.airbnb.android:lottie-compose (o com.airbnb.android:lottie para vistas). Coloca el JSON en res/raw para usarlo sin conexión con 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

El paquete lottie es un reproductor escrito íntegramente en Dart para Android, iOS, web y escritorio.

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

Iconos con expresiones

2 iconos usan expresiones de After Effects (loopOut o wiggle). En la web, reprodúcelos con la versión completa de lottie-web, no con lottie_light. Los reproductores nativos no evalúan expresiones, así que prueba estos iconos en iOS, Android y Flutter o elige otro; react-useanimations los reproduce tal como se diseñaron.

Preguntas frecuentes

¿Estos iconos Lottie son gratis para uso comercial?

Sí. Los 300 iconos Lottie tienen licencia MIT: úsalos, modifícalos y redistribúyelos en proyectos personales y comerciales, sin atribución obligatoria y sin necesidad de una cuenta para descargarlos.

¿En qué formato están los archivos Lottie?

Lottie JSON estándar (el formato Bodymovin) solo con capas de forma: sin imágenes, fuentes ni recursos externos. Cada icono está dibujado en una mesa de trabajo de 24 o 32 px, se escala a cualquier tamaño y pesa entre 1 kB y 14 kB, con una mediana de 2 kB.

¿Necesito lottie-web para usar los iconos en React?

No. react-useanimations trae su propio reproductor de 8 kB sin dependencias, así que instalas un solo paquete e importas los iconos que necesitas. lottie-web solo hace falta fuera de React, en páginas web sin framework o en otros frameworks.

¿Qué iconos necesitan la versión completa de lottie-web?

2 iconos usan expresiones de After Effects (loopOut o wiggle): Error y Twitter. En la web necesitan la versión completa de lottie-web; lottie_light ignora las expresiones. Los reproductores nativos (lottie-ios, lottie-android y el paquete lottie de Flutter) tampoco evalúan expresiones, así que estos iconos pueden moverse de otra forma en ellos.

¿Puedo cambiar el color de un icono Lottie?

En la web, el renderizador SVG de lottie-web escribe los colores como atributos, así que una regla CSS sobre los trazados cambia el color del icono. Los reproductores nativos usan sus API de propiedades dinámicas: ColorValueProvider en iOS, LottieProperty.COLOR y STROKE_COLOR en Android, y ValueDelegate.color en Flutter.

Iconos Lottie populares