Pular para o conteúdo
PT

64 ícones · licença MIT

Ícones animados de ação

Os verbos da interface: salvar, excluir, baixar, atualizar, curtir, favoritar, buscar e configurar. Cada um confirma o clique ou o hover a que pertence: o coração se preenche quando você curte um post, e a tampa da lixeira se levanta antes de você excluir.

Dos 64 ícones, 2 ficam em loop contínuo, 14 alternam entre dois estados no clique, 30 tocam de novo a cada clique, 11 tocam no hover e voltam ao contrário quando o mouse sai, 6 tocam uma vez no hover e 1 fica em loop durante o hover. Cada um vem como componente React, componente shadcn/ui e animação Lottie JSON (61 deles também como SVGs estáticos), e é gratuito para uso comercial sob a licença MIT.

Todos os ícones de ações

Onde usar

  • Botões de curtir, favoritar e salvar em cards
  • Botões de baixar, enviar e salvar que confirmam a ação
  • Botão de mostrar e ocultar senha num formulário de login
  • Botões de atualizar e sincronizar em dashboards
  • Botões de excluir em tabelas e listas de arquivos
  • Campo de busca que vira botão de limpar

Por interação

  • Ícones animados em loop · 2

    Toca continuamente; fica no primeiro frame estático quando o usuário prefere movimento reduzido. Checkmark, Help.

  • Ícones animados que alternam no clique · 14

    Alterna entre dois estados no clique, ou troca na hora quando o usuário prefere movimento reduzido. Bookmark, Heart, Lock / Unlock, Maxi/Minimize, Maxi/Minimize V2, Plus/X, Search/X, Settings V2, Shield Off, Star, Thumb up, Visibility, Visibility V2, Visibility V3.

  • Ícones animados no clique · 30

    Toca de novo desde o início a cada clique, a menos que o usuário prefira movimento reduzido. Check, Check Circle, Chevron left, Chevron right, Delete, Download, Download Cloud, Download V2, Edit 2, Edit 3, Filter, Heart V2, Link, Link 2, Minus, Minus Circle, Minus Square, Plus Circle, Plus Square, Power, Refresh, Refresh Ccw, Refresh V2, Rotate Ccw, Rotate Cw, Save, Thumbs Down, Upload, Upload Cloud, X Square.

  • Ícones animados no hover · 11

    Toca para a frente no mouseenter e ao contrário no mouseleave. Calendar, Edit, Explore, Folder, Home, Info, Settings, Trash, Trash V2, Zoom In, Zoom Out.

  • Ícones animados que tocam no hover · 6

    Toca uma vez no mouseenter, a menos que o usuário prefira movimento reduzido. Sair não interrompe a animação, e entrar durante a reprodução não a reinicia. Award, Key, Maximize 2, Minimize 2, Shield, Slash.

  • Ícones animados em loop no hover · 1

    Fica em loop durante o hover, termina o ciclo atual depois do mouseleave e fica estático quando o usuário prefere movimento reduzido. Flag.

Adicione um ao seu app

Com React, instale o react-useanimations e importe o ícone; ele executa a interação “Alternar no clique” sozinho. Todos os ícones desta categoria funcionam do mesmo jeito: troque heart pelo nome que aparece na página do ícone.

npm install react-useanimations
import UseAnimations from 'react-useanimations';
import heart from 'react-useanimations/lib/heart';

<UseAnimations animation={heart} size={32} />

Com o shadcn/ui, a CLI adiciona um componente pronto:

npx shadcn@latest add https://useanimations.com/r/heart.json
import { AnimatedHeart } from '@/components/animations/heart';

<AnimatedHeart size={24} />

Não usa React? Cada ícone é um arquivo Lottie JSON em /icons/<id>.json; veja em Ícones Lottie os players para web, iOS, Android e Flutter.

Perguntas frequentes

Quais ícones animados de ação estão incluídos?

64 ícones: Award, Bookmark, Calendar, Check, Check Circle, Checkmark, Chevron left, Chevron right, Delete, Download, Download Cloud, Download V2 e mais 52. Todos são gratuitos para projetos pessoais e comerciais sob a licença MIT, sem exigência de atribuição.

Como uso estes ícones animados de ação no React?

Instale o react-useanimations, adicione import heart from 'react-useanimations/lib/heart' e renderize <UseAnimations animation={heart} size={32} />. O ícone executa a interação “Alternar no clique” e segue a cor do texto. Se você usa shadcn/ui, rode npx shadcn@latest add https://useanimations.com/r/heart.json.

Posso usar estes ícones animados de ação sem React?

Sim. Cada ícone é um arquivo Lottie JSON em https://useanimations.com/icons/<id>.json (por exemplo, https://useanimations.com/icons/heart.json), que pode ser reproduzido com lottie-web, lottie-ios, lottie-android ou o pacote lottie do Flutter; os SVGs estáticos ficam na página de cada ícone (em inglês). Nenhum deles usa expressões, então o build light do lottie-web é suficiente.