5 icônes · licence MIT

Icônes animées d’alerte

Triangles d’avertissement, cercles d’alerte et panneaux stop qui pulsent juste assez pour attirer l’œil, sans clignoter. Placez-les à côté d’un champ de formulaire en erreur, en tête d’une bannière d’erreur ou dans une colonne de statut : là où une icône fixe passe facilement inaperçue.

Sur les 5 icônes, 4 bouclent en continu et 1 se rejoue à chaque clic. Chacune est disponible en composant React, en composant shadcn/ui et en animation Lottie JSON, ainsi qu’en SVG statique, gratuitement pour un usage commercial sous licence MIT.

Toutes les icônes d’alerte

Où les utiliser

Erreurs de validation sous les champs de formulaire
Bannières d’erreur et d’avertissement en haut de page
Lignes en échec dans un tableau de déploiements ou de tâches
Boîtes de dialogue de confirmation avant une action destructive
Pages de statut pendant un incident

Par interaction

Icônes animées en boucle · 4
Joue en continu ; reste sur la première image, fixe, quand la réduction des animations est activée. Alert circle, Alert octagon, Alert triangle, Error.
Icônes animées au clic · 1
Rejoue une fois l’animation depuis le début à chaque clic, sauf si la réduction des animations est activée. X Octagon.

En ajouter une à votre app

Avec React, installez react-useanimations et importez l’icône : elle joue d’elle-même son interaction « boucle ». Toutes les icônes de cette catégorie fonctionnent de la même façon : remplacez alertTriangle par le nom indiqué sur leur page.

npm install react-useanimations

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

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

Avec shadcn/ui, la CLI ajoute un composant prêt à l’emploi :

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

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

<AnimatedAlertTriangle size={24} />

Vous n’utilisez pas React ? Chaque icône est un fichier Lottie JSON à l’adresse /icons/<id>.json ; la page Icônes Lottie présente les lecteurs pour le web, iOS, Android et Flutter.

Questions fréquentes

Quelles icônes animées d’alerte sont incluses ?

5 icônes : Alert circle, Alert octagon, Alert triangle, Error et X Octagon. Toutes sont gratuites pour les projets personnels et commerciaux sous licence MIT, sans attribution obligatoire.

Comment utiliser ces icônes animées d’alerte dans React ?

Installez react-useanimations, ajoutez import alertTriangle from 'react-useanimations/lib/alertTriangle' et affichez <UseAnimations animation={alertTriangle} size={32} />. L’icône joue son interaction « boucle » et suit la couleur du texte. Avec shadcn/ui, lancez plutôt npx shadcn@latest add https://useanimations.com/r/alert-triangle.json.

Puis-je utiliser ces icônes animées d’alerte sans React ?

Oui. Chaque icône est un fichier Lottie JSON disponible à l’adresse https://useanimations.com/icons/<id>.json (par exemple https://useanimations.com/icons/alert-triangle.json), lisible avec lottie-web, lottie-ios, lottie-android ou le package lottie de Flutter ; les SVG statiques se trouvent sur la page de chaque icône (en anglais). Error utilise des expressions After Effects : sur le web, il lui faut donc la version complète de lottie-web.