Pular para o conteúdo
PT
v3300 ícones · zero dependências · MIT→

Ícones que ganham vida.

Ícones animados grátis para React, shadcn/ui e Lottie

300 microanimações feitas à mão, com microinterações de hover, clique e loop já incluídas. Use como componente React, adicione com o shadcn ou baixe em SVG e Lottie JSON. Licença MIT.

Ver ícones

Passe o ponteiro pelo campo de ícones.

ícones animados
300
ícones animados
interações prontas
6
interações prontas
player, com gzip
8 kB
player, com gzip
dependências
0
dependências

Interações prontas

Cada ícone sabe como se mover.

Cada ícone vem com a interação para a qual foi desenhado. É só colocar na página e funciona — ou escolha outra com uma única prop. Experimente:

A biblioteca

300 ícones animados grátis

Passe o mouse ou clique para tocar. Abra um ícone para ver o código e os downloads — Lottie JSON, SVG e ZIP.

300 ícones

Alertas

Notificações

Navegação

Ações

Conteúdo

Formulários

Mídia

Edição de texto

Comunicação

Dispositivos

Clima

Mapas e localização

E-commerce

Gráficos

Desenvolvimento

Design e layout

Formas e matemática

Carregamento

Redes sociais

Outros

Use do seu jeito

Instale, importe, pronto.

Um componente React sem dependências, um registry do shadcn, arquivos para download com URLs estáveis e um catálogo que agentes de IA conseguem ler.

Leia a documentação →
import UseAnimations from 'react-useanimations';
import menu from 'react-useanimations/lib/menu';

export function MenuButton({ open, onToggle }) {
  return (
    <UseAnimations
      animation={menu}
      active={open}
      onClick={onToggle}
      size={28}
    />
  );
}

Leves, acessíveis e fáceis de estilizar.

Segue as suas cores

Os ícones usam currentColor: assumem sozinhos a cor do texto, os estados de hover e o modo escuro. Para mudar, use uma prop, uma classe ou CSS puro.

Leve de propósito

8 kB

Player embutido, zero dependências. Cada ícone é um módulo próprio de 2 kB.

Acessível por padrão

Respeita o movimento reduzido, toca as animações de hover no foco pelo teclado e fica fora dos leitores de tela, a menos que você dê um rótulo ao ícone.

Pronto para renderização no servidor

Um client component que renderiza sem problemas em Next.js, Remix e Astro. Os ícones são dados simples que você pode importar em qualquer lugar.

Feito para agentes

Um catálogo tipado com palavras-chave para cada ícone, icons.json, llms.txt e documentação em Markdown.

Encontre a microanimação certa.

Perguntas frequentes

O que são microanimações e ícones animados?

Microanimações são movimentos curtos, com um único propósito, que respondem a uma ação do usuário: um ícone de menu que vira botão de fechar, um coração que se preenche quando você curte um post, um sino que toca quando chega uma notificação. Os ícones animados são o tipo mais comum. Eles deixam a interface mais responsiva e mostram mudanças de estado sem precisar de texto extra.

Qual é a diferença entre os arquivos Lottie e SVG?

O arquivo Lottie JSON contém a animação inteira e toca em qualquer player Lottie, inclusive no que vem embutido no react-useanimations. Os arquivos SVG são imagens estáticas do ícone em repouso, uma por estado (por exemplo, eye e eye-off), para lugares em que nada deve se mexer: e-mails, documentos, ferramentas de design ou um fallback sem JavaScript.

Funciona com Next.js e renderização no servidor?

Sim. O componente é marcado com 'use client' e desenha a animação só no navegador, então pode ser renderizado a partir de server components e de frameworks com SSR, como Next.js, Remix e Astro, sem imports dinâmicos. Os módulos dos ícones são dados simples que os server components podem importar e passar como props. Next.js e renderização no servidor →

Posso usar os ícones em projetos comerciais?

Sim. Os ícones e o pacote react-useanimations têm licença MIT: você pode usar, modificar e redistribuir em trabalhos pessoais e comerciais. A atribuição é bem-vinda, mas não é obrigatória. Licença e termos →

Posso usar os ícones sem React?

Sim. Cada ícone é um arquivo Lottie JSON padrão, então toca com lottie-web em JavaScript puro, Vue, Svelte, Angular ou num CMS, e nos players Lottie para iOS, Android e Flutter. A página de ícones Lottie traz as URLs dos arquivos e snippets prontos de lottie-web para cada interação. Ícones Lottie →

Quanto os ícones aumentam o meu bundle?

O player do react-useanimations 3.1.1 tem cerca de 8 kB com gzip e nenhuma dependência, e cada ícone é um módulo próprio de 1 a 15 kB (mediana de 2 kB), então o bundle inclui só os ícones que você importa.

Deixe a sua interface pulsar.

Grátis e com licença MIT, para uso pessoal e comercial.

Começar