9 iconos · licencia MIT

Iconos animados para desarrolladores

Llaves de código, una terminal, ramas de Git, commits, merges y pull requests, además de servidores y bases de datos. Pensados para herramientas de desarrollo, sitios de documentación y páginas de estado donde los términos de Git y de infraestructura forman parte de la interfaz.

De los 9 iconos, 1 se reproduce sin parar y 8 se reproducen una vez con hover. 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 desarrollo

Dónde usarlos

Estado de pull requests, merges y ramas en herramientas de desarrollo
Botones de fragmento de código y de insertar en la documentación
Secciones de terminal y CLI en landing pages
Estado de servidores y bases de datos en páginas de estado
Atajos de teclado con la tecla Command

Por interacción

Iconos animados en bucle · 1
Se reproduce sin parar; se queda en el primer fotograma estático si se prefiere movimiento reducido. Terminal.
Iconos animados que se reproducen con hover · 8
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. Code, Command, Database, Git Branch, Git Commit, Git Merge, Git Pull Request, Server.

Añade uno a tu app

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

npm install react-useanimations

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

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

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

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

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

<AnimatedGitBranch 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 para desarrolladores se incluyen?

9 iconos: Code, Command, Database, Git Branch, Git Commit, Git Merge, Git Pull Request, Server y Terminal. Todos son gratis para proyectos personales y comerciales con la licencia MIT, sin necesidad de atribución.

¿Cómo uso estos iconos animados para desarrolladores en React?

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

¿Puedo usar estos iconos animados para desarrolladores sin React?

Sí. Cada icono es un archivo Lottie JSON en https://useanimations.com/icons/<id>.json (por ejemplo, https://useanimations.com/icons/git-branch.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). Ninguno usa expresiones, así que basta con la versión ligera de lottie-web.