22 ícones · licença MIT

Ícones animados de redes sociais

Ícones de marca de redes sociais e das ferramentas em que desenvolvedores e designers compartilham trabalho: X, Instagram, YouTube, Discord, Telegram, Figma e outras. Eles animam no hover, o que deixa os links do rodapé e do perfil com mais cara de clicáveis.

Dos 22 ícones, 3 tocam no hover e voltam ao contrário quando o mouse sai, 9 tocam uma vez no hover e 10 ficam em loop durante o 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 redes sociais

Onde usar

Links de redes sociais no rodapé do site
Botões de compartilhar em posts de blog
Links de perfil de autores e da equipe
Botões de convite para servidores de comunidade
Login com conta de rede social ou de desenvolvedor

Por interação

Ícones animados no hover · 3
Toca para a frente no mouseenter e ao contrário no mouseleave. Instagram, YouTube, YouTube V2.
Ícones animados que tocam no hover · 9
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. Chrome, Codesandbox, Figma, Framer, GitLab, Slack, Trello, Twitch, Twitter X.
Ícones animados em loop no hover · 10
Fica em loop durante o hover, termina o ciclo atual depois do mouseleave e fica estático quando o usuário prefere movimento reduzido. Behance, Codepen, Discord, Dribbble, Facebook, Github, Linkedin, Pocket, Telegram, Twitter.

Adicione um ao seu app

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

npm install react-useanimations

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

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

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

npx shadcn@latest add https://useanimations.com/r/github.json

import { AnimatedGithub } from '@/components/animations/github';

<AnimatedGithub 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 redes sociais estão incluídos?

22 ícones: Behance, Chrome, Codepen, Codesandbox, Discord, Dribbble, Facebook, Figma, Framer, Github, GitLab, Instagram e mais 10. 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 redes sociais no React?

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

Posso usar estes ícones animados de redes sociais sem React?

Sim. Cada ícone é um arquivo Lottie JSON em https://useanimations.com/icons/<id>.json (por exemplo, https://useanimations.com/icons/github.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). Twitter usa expressões do After Effects, então na web precisa do build completo do lottie-web.