Aller au contenu
FR

4 icônes · licence MIT

Icônes animées de cloche de notification

Des cloches qui sonnent à chaque nouvelle activité ou qui basculent entre cloche et cloche barrée. Un léger balancement attire le regard vers le nombre de non-lus, et les versions à bascule servent aussi de bouton pour couper les notifications d’un canal ou d’un fil.

Sur les 4 icônes, 2 bouclent en continu et 2 basculent entre deux états au 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 de notification

Où les utiliser

  • Bouton du centre de notifications dans l’en-tête d’une app
  • Badge de non-lus qui sonne à l’arrivée d’un nouveau message
  • Activation et désactivation des notifications d’un canal ou d’un fil
  • Réglages des notifications e-mail et push
  • Boutons d’abonnement aux rappels et aux alertes

Par interaction

  • Icônes animées en boucle · 2

    Joue en continu ; reste sur la première image, fixe, quand la réduction des animations est activée. Notification V3, Notification V4.

  • Icônes animées à bascule au clic · 2

    Bascule entre deux états au clic, ou change d’état immédiatement quand la réduction des animations est activée. Notification, Notification V2.

En ajouter une à votre app

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

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

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

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

npx shadcn@latest add https://useanimations.com/r/notification.json
import { AnimatedNotification } from '@/components/animations/notification';

<AnimatedNotification 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 de cloche de notification sont incluses ?

4 icônes : Notification, Notification V2, Notification V3 et Notification V4. Toutes sont gratuites pour les projets personnels et commerciaux sous licence MIT, sans attribution obligatoire.

Comment utiliser ces icônes animées de cloche de notification dans React ?

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

Puis-je utiliser ces icônes animées de cloche de notification 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/notification.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). Aucune n’utilise d’expressions : la version light de lottie-web suffit.