Os ícones que toda página feita com IA usa, só que mexendo
O Lucide Animated tem 467 ícones do Lucide com uma animação pequena em cada um, grátis e aberto. Como pegar o código, a busca, e o detalhe do celular que deixa o ícone parado se você só colar.
O check, a seta, o carrinho. Quem monta página com IA conhece esses ícones, porque eles vêm do Lucide, a biblioteca que já vem marcada no shadcn. Na newsletter do Lucide eu mostrei como escolher pelo nome e mudar o traço pra sair da cara de template. Aqui é o passo seguinte: o movimento.
O Lucide Animated pega 467 ícones do Lucide e dá uma animação pequena pra cada um, feita com o Motion. É aberto e grátis, e pode ir pra projeto de cliente.
Como pega um ícone
A grade é a própria biblioteca: passou o mouse, o ícone mexe. No mesmo cartão aparecem três botões: Copiar código .tsx, Copiar comando do shadcn e Abrir no v0.
O comando do shadcn é o caminho mais limpo. Ele coloca um arquivo por ícone dentro do projeto e instala o Motion junto, se ainda não tiver. O ícone vira um componente React que já mexe quando o mouse passa por cima.
Pra achar o ícone, aperta ⌘F e digita em inglês. A busca é aproximada: procurando cart, ela traz o carrinho, o cartão de crédito e outros parecidos.
Cada ícone também tem uma página própria, com o comando de instalação, as palavras-chave e os ícones parecidos, como a do sino.
O detalhe do celular
A animação dispara quando o mouse passa por cima, e isso só existe em aparelho com mouse. A própria documentação avisa: no toque, quem usa o ícone precisa disparar a animação por código.
De graça, e continua assim
A licença é MIT, que libera uso próprio e comercial. O site tem uma página de apoio com doação opcional, e nela o criador, o dmytro, deixou escrito que os ícones vão ser sempre grátis e abertos, com ou sem doação. O repositório no GitHub tem 8.138 estrelas hoje. A home também indica um curso dele, o Invisible Details, que é outro produto e não é preciso pra usar os ícones.
E tem o que precisa pra IA trabalhar sozinha: o llms.txt com a lista dos 467, uma skill com o jeito certo de instalar e usar, e um servidor MCP pra buscar ícone por nome ou palavra. Se o projeto não é em React, existem versões feitas por outras pessoas pra Svelte, Vue e Angular, linkadas na mesma lista.
O que eu faria
- Escolheria um ícone só pra animar, o do botão principal. Se todos os ícones mexem, nenhum chama atenção.
- Buscaria pelo nome em inglês, olhando os parecidos na página do ícone.
- Mandaria a IA ler o llms.txt e instalar o ícone pelo comando do shadcn.
- Pediria pra ela disparar a animação quando o botão aparece na tela e no toque, pra funcionar no celular.
- Manteria o mesmo traço dos outros ícones da página, pra o animado não parecer de outra família.
Aqui na Nomics a gente já fez mais de 400 páginas, e é esse tipo de detalhe que ninguém pede e todo mundo sente. O link: lucide-animated.com.