300 iconos · 20 categorías

Categorías de iconos animados

Cada icono de useAnimations pertenece a una categoría, desde flechas de navegación y controles multimedia hasta loaders y logotipos de redes sociales. Abre una categoría para ver todos sus iconos, dónde usarlos y el código para añadir uno, o explora por interacción.

Alertas5 iconosTriángulos de advertencia, círculos de alerta y señales de stop que laten lo justo para llamar la atención sin parpadear. Colócalos junto a un campo de formulario con error, al principio de un banner de error o en una columna de estado, donde un icono estático pasa fácilmente desapercibido.
Notificaciones4 iconosCampanas que suenan cuando hay actividad nueva o que alternan entre campana y campana silenciada. Un breve balanceo de la campana dirige la mirada hacia el contador de no leídos, y las versiones que alternan sirven también como control para silenciar un canal o un hilo.
Navegación34 iconosMenús hamburguesa que se transforman en un botón de cerrar, y flechas, chevrons y flechas de esquina que se desplazan hacia su dirección con hover. Dejan claro adónde lleva cada control: abrir el panel lateral, volver atrás, desplegar una fila o salir del sitio.
Acciones64 iconosLos verbos de una interfaz: guardar, eliminar, descargar, actualizar, dar me gusta, añadir a marcadores, buscar y ajustes. Cada uno confirma el clic o el hover al que responde: un corazón se rellena cuando das me gusta a una publicación y la tapa de una papelera se levanta antes de eliminar.
Contenido22 iconosArchivos, carpetas, libros, correo, adjuntos y personas. Identifican aquello con lo que trabaja el usuario, y las variantes de añadir, quitar y marcar hacen que gestionar listas y equipos se sienta ágil.
Formularios3 iconosUna casilla de verificación, un botón de opción y un interruptor que se animan entre los estados marcado y desmarcado. Úsalos donde un input normal se queda plano, como en checklists de onboarding y pantallas de ajustes, sin que el estado deje de leerse de un vistazo.
Multimedia28 iconosReproducir y pausar, volumen, micrófono, cámara, saltar y aleatorio para reproductores de audio y vídeo. Los iconos que alternan cambian entre sus dos estados, de reproducir a pausa o de micrófono a silenciado, así que el botón siempre muestra lo que hará el siguiente clic.
Edición de texto10 iconosNegrita, cursiva, subrayado, alineación y listas para barras de herramientas de texto enriquecido. Una animación breve al hacer clic confirma que se aplicó el formato, algo útil en editores donde el cambio en el propio texto es sutil.
Comunicación13 iconosTeléfonos, burbujas de chat, botones de enviar, buzón de voz y RSS. Los iconos de llamada cubren los estados que necesita un registro de llamadas (entrante, saliente, perdida y desviada), y el icono de enviar despide cada mensaje con un pequeño gesto al hacer clic.
Dispositivos12 iconosTeléfonos, tabletas, monitores, relojes e impresoras, además de los indicadores de conexión que los rodean: wifi, Bluetooth y batería. Sirven para selectores de dispositivo, conmutadores de vista previa responsive y estado de conectividad.
Clima16 iconosSol, luna, nubes, lluvia, nieve, rayos y viento para pronósticos y para todo lo que siga la hora del día. El sol y la luna también funcionan como un interruptor natural entre modo claro y modo oscuro.
Mapas y ubicación9 iconosPines de mapa, flechas de navegación, globos terráqueos, dianas y anclas. Un pin que cae con hover ayuda a que destaque un localizador de tiendas o una dirección de entrega, y el globo funciona como selector de idioma o de región.
Comercio electrónico11 iconosCarritos, bolsas de compra, etiquetas de precio, regalos, tarjetas de crédito y camiones de reparto para tiendas online. Una animación de añadir al carrito confirma el clic sin necesidad de un aviso emergente, y los iconos del camión y del paquete dan un poco de vida al estado del pedido.
Gráficos5 iconosGráficos de barras, un gráfico circular y flechas de tendencia para analítica e informes. Los iconos de tendencia al alza y a la baja muestran de un vistazo si una métrica subió o bajó, lo que encaja en tarjetas de KPI y en registros de cambios de cifras.
Desarrollo9 iconosLlaves 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.
Diseño y maquetación10 iconosCuadrículas, columnas, capas, recorte, pluma y cursor para editores y constructores de páginas. Encajan en barras de herramientas donde los usuarios organizan contenido, cambian entre vista de cuadrícula y de tabla o eligen una herramienta de dibujo.
Formas y matemáticas8 iconosCírculos, cuadrados, triángulos, hexágonos, un octógono y signos de división. Úsalos como herramientas de formas en apps de dibujo, como operadores de una calculadora o como marcadores neutros en diagramas y pasos de onboarding.
Carga5 iconosSpinners y loaders que se repiten en bucle mientras algo está en curso. Pon uno dentro de un botón de envío mientras se ejecuta una petición, en lugar del contenido que aún se está cargando o en una pantalla de bienvenida a pantalla completa; se quedan quietos cuando el usuario prefiere movimiento reducido.
Redes sociales22 iconosIconos 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.
Otros10 iconosIconos que no pertenecen a un grupo mayor: caras emoji para valoraciones, una taza de café, un reloj, una línea de pulso y una indicación para desplazarse hacia abajo. El icono de desplazamiento es una pista habitual en la sección hero para indicar que hay más contenido debajo.