13 iconos · licencia MIT

Iconos animados de comunicación

Telé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.

De los 13 iconos, 1 alterna entre dos estados al hacer clic, 3 se repiten con cada clic y 9 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 comunicación

Dónde usarlos

Botón de enviar en formularios de chat y comentarios
Registros de llamadas entrantes, salientes y perdidas
Botones de contacto y de soporte
Botones para abrir un widget de chat
Campos de menciones y de direcciones de correo

Por interacción

Iconos animados que alternan con un clic · 1
Alterna entre dos estados al hacer clic, o cambia de inmediato si se prefiere movimiento reducido. Phone Off.
Iconos animados al hacer clic · 3
Se reproduce una vez desde el principio con cada clic, salvo que se prefiera movimiento reducido. Phone, Phone Call, Send.
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. At Sign, Message Circle, Message Square, Phone Forwarded, Phone Incoming, Phone Missed, Phone Outgoing, RSS, Voicemail.

Añade uno a tu app

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

npm install react-useanimations

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

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

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

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

import { AnimatedSend } from '@/components/animations/send';

<AnimatedSend 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 comunicación se incluyen?

13 iconos: At Sign, Message Circle, Message Square, Phone, Phone Call, Phone Forwarded, Phone Incoming, Phone Missed, Phone Off, Phone Outgoing, RSS, Send y 1 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 comunicación en React?

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

¿Puedo usar estos iconos animados de comunicación sin React?

Sí. Cada icono es un archivo Lottie JSON en https://useanimations.com/icons/<id>.json (por ejemplo, https://useanimations.com/icons/send.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.