5 iconos · licencia MIT

Iconos animados de alerta

Triá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.

De los 5 iconos, 4 se reproducen sin parar y 1 se repite con cada 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 alertas

Dónde usarlos

Errores de validación bajo los campos de un formulario
Banners de error y de advertencia en la parte superior de una página
Filas fallidas en una tabla de estado de despliegues o tareas
Diálogos de confirmación de acciones destructivas
Páginas de estado del sistema durante una incidencia

Por interacción

Iconos animados en bucle · 4
Se reproduce sin parar; se queda en el primer fotograma estático si se prefiere movimiento reducido. Alert circle, Alert octagon, Alert triangle, Error.
Iconos animados al hacer clic · 1
Se reproduce una vez desde el principio con cada clic, salvo que se prefiera movimiento reducido. X Octagon.

Añade uno a tu app

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

npm install react-useanimations

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

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

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

npx shadcn@latest add https://useanimations.com/r/alert-triangle.json

import { AnimatedAlertTriangle } from '@/components/animations/alert-triangle';

<AnimatedAlertTriangle 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 alerta se incluyen?

5 iconos: Alert circle, Alert octagon, Alert triangle, Error y X Octagon. Todos son gratis para proyectos personales y comerciales con la licencia MIT, sin necesidad de atribución.

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

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

¿Puedo usar estos iconos animados de alerta sin React?

Sí. Cada icono es un archivo Lottie JSON en https://useanimations.com/icons/<id>.json (por ejemplo, https://useanimations.com/icons/alert-triangle.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). Error usa expresiones de After Effects, así que en la web necesita la versión completa de lottie-web.