4 iconos · licencia MIT

Iconos animados de campana de notificación

Campanas 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.

De los 4 iconos, 2 se reproducen sin parar y 2 alternan entre dos estados al hacer clic. 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 notificaciones

Dónde usarlos

Botón del centro de notificaciones en la cabecera de una aplicación
Indicador de no leídos que suena cuando llega un mensaje nuevo
Interruptor para silenciar y reactivar un canal o un hilo
Ajustes de notificaciones por correo y push
Botones para suscribirse a recordatorios y alertas

Por interacción

Iconos animados en bucle · 2
Se reproduce sin parar; se queda en el primer fotograma estático si se prefiere movimiento reducido. Notification V3, Notification V4.
Iconos animados que alternan con un clic · 2
Alterna entre dos estados al hacer clic, o cambia de inmediato si se prefiere movimiento reducido. Notification, Notification V2.

Añade uno a tu app

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

npm install react-useanimations

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

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

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

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

import { AnimatedNotification } from '@/components/animations/notification';

<AnimatedNotification 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 campana de notificación se incluyen?

4 iconos: Notification, Notification V2, Notification V3 y Notification V4. Todos son gratis para proyectos personales y comerciales con la licencia MIT, sin necesidad de atribución.

¿Cómo uso estos iconos animados de campana de notificación en React?

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

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

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