13 icônes · licence MIT

Icônes animées de communication

Téléphones, bulles de discussion, boutons d’envoi, messagerie vocale et RSS. Les icônes d’appel couvrent les états entrant, sortant, manqué et transféré dont un journal d’appels a besoin, et l’icône d’envoi donne au message un petit élan au clic.

Sur les 13 icônes, 1 bascule entre deux états au clic, 3 se rejouent à chaque clic et 9 se jouent une fois au survol. 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 communication

Où les utiliser

Bouton d’envoi des formulaires de chat et de commentaire
Journaux d’appels avec appels entrants, sortants et manqués
Boutons de contact et de support
Boutons de lancement de widget de chat
Champs de mention et d’adresse e-mail

Par interaction

Icônes animées à bascule au clic · 1
Bascule entre deux états au clic, ou change d’état immédiatement quand la réduction des animations est activée. Phone Off.
Icônes animées au clic · 3
Rejoue une fois l’animation depuis le début à chaque clic, sauf si la réduction des animations est activée. Phone, Phone Call, Send.
Icônes animées à lecture au survol · 9
Se joue une fois sur mouseenter, sauf si la réduction des animations est activée. Sortir ne l’arrête pas ; entrer pendant la lecture ne la relance pas. At Sign, Message Circle, Message Square, Phone Forwarded, Phone Incoming, Phone Missed, Phone Outgoing, RSS, Voicemail.

En ajouter une à votre app

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

npm install react-useanimations

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

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

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

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

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

<AnimatedSend 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 communication sont incluses ?

13 icônes : At Sign, Message Circle, Message Square, Phone, Phone Call, Phone Forwarded, Phone Incoming, Phone Missed, Phone Off, Phone Outgoing, RSS, Send et 1 autres. Toutes sont gratuites pour les projets personnels et commerciaux sous licence MIT, sans attribution obligatoire.

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

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

Puis-je utiliser ces icônes animées de communication 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/send.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.