300 ícones · Lottie JSON · licença MIT

Ícones Lottie grátis

Cada ícone do useAnimations é uma animação Lottie JSON padrão, então qualquer player Lottie consegue tocá-la: lottie-web na web, lottie-ios, lottie-android, Flutter e React Native. Os arquivos são gratuitos sob a licença MIT, sem cadastro, e servidos em URLs estáveis com CORS habilitado, então você pode carregá-los direto ou baixá-los para o seu projeto.

Arquivos e URLs

Cada ícone tem uma página em /icons/<id> (em inglês) com prévia e downloads. Os arquivos em si:

https://useanimations.com/icons/<id>.json          # animação Lottie JSON
https://useanimations.com/icons/<id>.zip           # o JSON e os SVGs estáticos
https://useanimations.com/icons/<id>/<state>.svg   # SVG estático de cada estado
https://useanimations.com/icons.json               # catálogo de todos os ícones

O icons.json lista cada ícone com id, título, categoria, palavras-chave, interação, tamanho, duração e URLs dos arquivos, o que facilita escolher ícones por palavra-chave num script ou deixar um agente de código escolher. A mediana dos arquivos Lottie é de 2 kB.

Web: lottie-web

O player de referência, do Airbnb. Carregue-o de uma CDN, aponte para a URL de um ícone e escolha o renderer SVG, que mantém o ícone nítido e permite mudar a cor via CSS. Use o build completo (lottie.min.js): o build light ignora expressões.

<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 a cor do texto (renderer SVG)

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

Web: interações de hover e clique

O lottie-web toca e para, mas as interações ficam por sua conta. Este é o “alternar no clique” do ícone de menu, com suporte a movimento reduzido; todas as interações seguem o mesmo padrão, e o componente React mais abaixo faz tudo isso por você.

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

O player da LottieFiles renderiza num canvas com um motor em WebAssembly e toca tanto Lottie JSON puro quanto arquivos .lottie. Um canvas mantém as cores do arquivo, então os ícones ficam pretos, a menos que você mude as cores no 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 a 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

Nenhum player Lottie para instalar: o pacote tem o próprio player de 8 kB, executa a interação de cada ícone, segue a cor do texto e respeita o movimento reduzido. Cada ícone é um módulo separado, então só vão para produção os que você importa.

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

Inclua o JSON no bundle com require() para uso offline ou carregue-o pela 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)

Adicione o pacote https://github.com/airbnb/lottie-spm.git com o Swift Package Manager e depois coloque o JSON no bundle do app ou carregue-o pela 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)

Adicione com.airbnb.android:lottie-compose (ou com.airbnb.android:lottie para views). Coloque o JSON em res/raw para uso offline com 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

O pacote lottie é um player escrito em Dart puro para Android, iOS, web e 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')

Ícones com expressões

2 ícones usam expressões do After Effects (loopOut ou wiggle). Na web, toque-os com o build completo do lottie-web, não com o lottie_light. Os players nativos não avaliam expressões, então teste esses ícones no iOS, no Android e no Flutter ou escolha outro; o react-useanimations os toca como foram desenhados.

Perguntas frequentes

Estes ícones Lottie são gratuitos para uso comercial?

Sim. Todos os 300 ícones Lottie têm licença MIT: você pode usar, modificar e redistribuir em projetos pessoais e comerciais, sem exigência de atribuição e sem precisar de conta para baixar.

Em que formato estão os arquivos Lottie?

Lottie JSON padrão (o formato Bodymovin), só com shape layers: sem imagens, fontes ou assets externos. Cada ícone é desenhado numa prancheta de 24 ou 32 px, escala para qualquer tamanho e pesa de 1 kB a 14 kB, com mediana de 2 kB.

Preciso do lottie-web para usar os ícones no React?

Não. O react-useanimations tem o próprio player de 8 kB, sem dependências, então você instala um único pacote e importa os ícones de que precisa. O lottie-web só é necessário fora do React, em páginas web comuns ou em outros frameworks.

Quais ícones precisam do build completo do lottie-web?

2 ícones usam expressões do After Effects (loopOut ou wiggle): Error e Twitter. Na web, eles precisam do build completo do lottie-web; o lottie_light ignora expressões. Os players nativos (lottie-ios, lottie-android e o lottie do Flutter) também não avaliam expressões, então esses ícones podem se mover de outro jeito neles.

Posso mudar a cor de um ícone Lottie?

Na web, o renderer SVG do lottie-web escreve as cores como atributos, então uma regra CSS nos paths muda a cor do ícone. Os players nativos usam suas APIs de propriedades dinâmicas: ColorValueProvider no iOS, LottieProperty.COLOR e STROKE_COLOR no Android e ValueDelegate.color no Flutter.

Ícones Lottie populares