9 ícones · licença MIT

Ícones animados para desenvolvedores

Chaves de código, terminal, branches do Git, commits, merges e pull requests, além de servidores e bancos de dados. Feitos para ferramentas de desenvolvimento, sites de documentação e páginas de status em que termos de Git e de infraestrutura fazem parte da interface.

Dos 9 ícones, 1 fica em loop contínuo e 8 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 ícones de desenvolvimento

Onde usar

Status de pull requests, merges e branches em ferramentas de desenvolvimento
Botões de snippet de código e de embed na documentação
Seções de terminal e CLI em landing pages
Saúde de servidores e bancos de dados em páginas de status
Dicas de atalhos de teclado com a tecla Command

Por interação

Ícones animados em loop · 1
Toca continuamente; fica no primeiro frame estático quando o usuário prefere movimento reduzido. Terminal.
Ícones animados que tocam no hover · 8
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. Code, Command, Database, Git Branch, Git Commit, Git Merge, Git Pull Request, Server.

Adicione um ao seu app

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

npm install react-useanimations

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

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

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

npx shadcn@latest add https://useanimations.com/r/git-branch.json

import { AnimatedGitBranch } from '@/components/animations/git-branch';

<AnimatedGitBranch 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 para desenvolvedores estão incluídos?

9 ícones: Code, Command, Database, Git Branch, Git Commit, Git Merge, Git Pull Request, Server e Terminal. 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 para desenvolvedores no React?

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

Posso usar estes ícones animados para desenvolvedores sem React?

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