22 iconos · licencia MIT

Iconos animados de redes sociales

Iconos de marca de redes sociales y de las herramientas donde desarrolladores y diseñadores comparten su trabajo: X, Instagram, YouTube, Discord, Telegram, Figma y más. Se animan con hover, lo que hace que los enlaces del pie de página y del perfil inviten a hacer clic.

De los 22 iconos, 3 se reproducen con hover y retroceden al salir el cursor, 9 se reproducen una vez con hover y 10 se repiten en bucle mientras el cursor está encima. Cada uno se ofrece como componente de React, componente de shadcn/ui, animación Lottie JSON y SVG estático, gratis para uso comercial con la licencia MIT.

Todos los iconos de redes sociales

Dónde usarlos

Enlaces a redes sociales en el pie de un sitio
Botones para compartir en entradas de blog
Enlaces a perfiles de autores y del equipo
Botones de invitación a servidores de chat de la comunidad
Inicio de sesión con una cuenta social o de desarrollador

Por interacción

Iconos animados con hover · 3
Avanza con mouseenter y retrocede con mouseleave. Instagram, YouTube, YouTube V2.
Iconos animados que se reproducen con hover · 9
Se reproduce una vez con mouseenter, salvo que se prefiera movimiento reducido. Salir no lo detiene, y volver a entrar durante la reproducción no lo reinicia. Chrome, Codesandbox, Figma, Framer, GitLab, Slack, Trello, Twitch, Twitter X.
Iconos animados en bucle con hover · 10
Se repite en bucle durante el hover, termina el ciclo en curso tras mouseleave y se queda estático si se prefiere movimiento reducido. Behance, Codepen, Discord, Dribbble, Facebook, Github, Linkedin, Pocket, Telegram, Twitter.

Añade uno a tu app

Con React, instala react-useanimations e importa el icono; reproducirá por sí solo su interacción “Bucle con hover”. Todos los iconos de esta categoría funcionan igual: cambia github por el nombre que aparece en la página de cada uno.

npm install react-useanimations

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

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

Con shadcn/ui, la CLI añade un componente listo para usar:

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

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

<AnimatedGithub size={24} />

¿No usas React? Cada icono es un archivo Lottie JSON en /icons/<id>.json; en Iconos Lottie encontrarás reproductores para web, iOS, Android y Flutter.

Preguntas frecuentes

¿Qué iconos animados de redes sociales se incluyen?

22 iconos: Behance, Chrome, Codepen, Codesandbox, Discord, Dribbble, Facebook, Figma, Framer, Github, GitLab, Instagram y 10 más. Todos son gratis para proyectos personales y comerciales con la licencia MIT, sin necesidad de atribución.

¿Cómo uso estos iconos animados de redes sociales en React?

Instala react-useanimations, añade import github from 'react-useanimations/lib/github' y renderiza <UseAnimations animation={github} size={32} />. El icono reproduce su interacción “Bucle con hover” y sigue el color del texto. Con shadcn/ui, ejecuta en su lugar npx shadcn@latest add https://useanimations.com/r/github.json.

¿Puedo usar estos iconos animados de redes sociales sin React?

Sí. Cada icono es un archivo Lottie JSON en https://useanimations.com/icons/<id>.json (por ejemplo, https://useanimations.com/icons/github.json) que se reproduce con lottie-web, lottie-ios, lottie-android o el paquete lottie de Flutter; los SVG estáticos están en la página de cada icono (en inglés). Twitter usa expresiones de After Effects, así que en la web necesita la versión completa de lottie-web.