12 icônes · licence MIT

Icônes animées d’appareils

Téléphones, tablettes, écrans, montres et imprimantes, avec les indicateurs de connexion qui les accompagnent : wifi, Bluetooth et batterie. Elles conviennent aux sélecteurs d’appareil, aux commutateurs d’aperçu responsive et aux statuts de connectivité.

Sur les 12 icônes, 1 bascule entre deux états au clic, 1 se rejoue à chaque clic et 10 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 d’appareils

Où les utiliser

Commutateurs d’aperçu responsive mobile, tablette et ordinateur
Statut de connexion wifi et Bluetooth
Indicateurs de batterie et de charge
Listes des appareils dans les paramètres de sécurité du compte
Boutons d’impression sur les factures et les rapports

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. Wifi Off.
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. Printer.
Icônes animées à lecture au survol · 10
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. Battery, Battery Charging, Bluetooth, CPU, Hard Drive, Monitor, Smartphone, Tablet, Watch, WiFi.

En ajouter une à votre app

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

npm install react-useanimations

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

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

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

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

import { AnimatedWifi } from '@/components/animations/wifi';

<AnimatedWifi 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’appareils sont incluses ?

12 icônes : Battery, Battery Charging, Bluetooth, CPU, Hard Drive, Monitor, Printer, Smartphone, Tablet, Watch, WiFi et Wifi Off. Toutes sont gratuites pour les projets personnels et commerciaux sous licence MIT, sans attribution obligatoire.

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

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

Puis-je utiliser ces icônes animées d’appareils 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/wifi.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.