16 icônes · licence MIT

Icônes météo animées

Soleil, lune, nuages, pluie, neige, éclairs et vent pour les prévisions et tout ce qui suit le moment de la journée. Le soleil et la lune font aussi un interrupteur naturel entre mode clair et mode sombre.

Sur les 16 icônes, 2 basculent entre deux états au clic, 13 se jouent une fois au survol et 1 boucle pendant le 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 météo

Où les utiliser

Widgets météo et cartes de prévisions
Bascule entre thème clair et thème sombre
Heures de lever et de coucher du soleil dans les apps de voyage
Températures sur les tableaux de bord de maison connectée
Indicateurs d’énergie et d’alimentation

Par interaction

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. Cloud Off, Zap Off.
Icônes animées à lecture au survol · 13
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. Cloud Drizzle, Cloud Lightning, Cloud Rain, Cloud Snow, Droplet, Moon, Sun, Sunrise, Sunset, Thermometer, Umbrella, Wind, Zap.
Icônes animées en boucle au survol · 1
Boucle pendant le survol, termine le cycle en cours après mouseleave et reste fixe quand la réduction des animations est activée. Cloud.

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 sun par le nom indiqué sur leur page.

npm install react-useanimations

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

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

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

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

import { AnimatedSun } from '@/components/animations/sun';

<AnimatedSun 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 météo animées sont incluses ?

16 icônes : Cloud, Cloud Drizzle, Cloud Lightning, Cloud Off, Cloud Rain, Cloud Snow, Droplet, Moon, Sun, Sunrise, Sunset, Thermometer et 4 autres. Toutes sont gratuites pour les projets personnels et commerciaux sous licence MIT, sans attribution obligatoire.

Comment utiliser ces icônes météo animées dans React ?

Installez react-useanimations, ajoutez import sun from 'react-useanimations/lib/sun' et affichez <UseAnimations animation={sun} 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/sun.json.

Puis-je utiliser ces icônes météo animées 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/sun.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.