10 ícones · licença MIT

Mais ícones animados

Ícones que não pertencem a um grupo maior: carinhas de emoji para feedback, uma xícara de café, um relógio, uma linha de pulso e uma indicação de rolar para baixo. O ícone de rolar para baixo é uma dica comum na seção hero de que há mais conteúdo abaixo.

Dos 10 ícones, 4 ficam em loop contínuo e 6 tocam uma vez no hover. Cada um vem como componente React, componente shadcn/ui e animação Lottie JSON, além de SVGs estáticos, e é gratuito para uso comercial sob a licença MIT.

Todos os outros ícones

Onde usar

Dicas de rolar para baixo no fim da seção hero
Carinhas feliz, neutra e triste em widgets de feedback
Indicadores de atividade e uptime
Horário de funcionamento e seletores de hora
Links de “buy me a coffee” e de apoio

Por interação

Ícones animados em loop · 4
Toca continuamente; fica no primeiro frame estático quando o usuário prefere movimento reduzido. Activity, Arrow down, Arrow up, Scroll down.
Í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. Clock, Coffee, Frown, Meh, Smile, Tool.

Adicione um ao seu app

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

npm install react-useanimations

import UseAnimations from 'react-useanimations';
import scrollDown from 'react-useanimations/lib/scrollDown';

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

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

npx shadcn@latest add https://useanimations.com/r/scroll-down.json

import { AnimatedScrollDown } from '@/components/animations/scroll-down';

<AnimatedScrollDown 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 outros ícones animados estão incluídos?

10 ícones: Activity, Arrow down, Arrow up, Clock, Coffee, Frown, Meh, Scroll down, Smile e Tool. Todos são gratuitos para projetos pessoais e comerciais sob a licença MIT, sem exigência de atribuição.

Como uso estes outros ícones animados no React?

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

Posso usar estes outros ícones animados sem React?

Sim. Cada ícone é um arquivo Lottie JSON em https://useanimations.com/icons/<id>.json (por exemplo, https://useanimations.com/icons/scroll-down.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.