Icônes météo animées : 24 animations Lottie en boucle, clair et sombre (JSON, .lottie, SVG)

Ce pack s’adresse aux designers UI et aux développeurs front-end qui conçoivent une appli ou un site de prévisions, un widget météo ou un tableau de bord, et qui veulent des icônes en mouvement sans les animer eux-mêmes. Chaque icône est un fichier léger au format Lottie qui tourne en boucle, en clair et en sombre, en couleur, accompagné d’une image SVG fixe pour les personnes qui ont demandé moins d’animation. Au repos, chaque animation reprend le dessin de l’icône du même nom du pack d’icônes météo en ligne de Beryl Design : vous pouvez afficher l’icône fixe dans une liste de jours et sa version animée pour la prévision du moment, sans changement de forme entre les deux.

• 24 animations, en 6 familles :
  • Ciel : sun, moon-stars, cloud, clouds ;
  • Mixte : cloud-sun, cloud-moon, cloud-sun-rain, rainbow ;
  • Pluie : drizzle, rain, rain-heavy, thunderstorm ;
  • Neige et glace : snow, snow-heavy, sleet, hail ;
  • Vent et brouillard : fog, wind, wind-strong, tornado ;
  • Repères : sunrise, sunset, thermometer-hot, umbrella.
• 24 boucles : toutes les animations tournent en continu, aucune ne se joue une seule fois.
• 2 thèmes, clair et sombre, pour chaque animation.
• 48 fichiers Lottie JSON : chaque animation en clair et en sombre.
• 24 fichiers .lottie : chaque animation, avec son thème sombre inclus dans le même fichier.
• 48 images SVG fixes : l’image de repos de chaque animation, en clair et en sombre, à afficher quand le réglage « réduire les animations » est actif.
• 1 page HTML de démonstration, hors ligne : les 24 animations jouées dans le navigateur, rangées par famille, avec un choix entre clair, sombre et le réglage du système. Un clic sur une icône la met en pause sur son image fixe, un second clic la relance. Quand le système demande moins d’animation, la page affiche les images fixes à la place. Les textes de cette page sont en anglais.

Organisation de l’archive :

json/light/<nom>.json
json/dark/<nom>.json
lottie/<nom>.lottie
svg/light/<nom>.svg
svg/dark/<nom>.svg
demo/index.html
demo/animations.js
demo/vendor/

Le zip contient aussi le texte de la licence, un fichier LISEZMOI et les crédits.

Comment l’utiliser

• Dans une page web ou une application : chargez le JSON du thème voulu, ou le fichier .lottie, dans un lecteur Lottie. Chaque animation boucle sans à-coup : sa dernière image rejoint la première.
• Couleurs : les icônes sont en couleur, avec une couleur par rôle. L’encre sert aux nuages, au vent, au brouillard et aux objets, l’ambre au soleil, à la lune et à l’éclair, le bleu à l’eau, le rouge à la chaleur. Ces couleurs sont rangées dans des slots nommés : un lecteur qui prend en charge les slots permet de les changer sans modifier le fichier ; avec un lecteur qui ne les lit pas, prenez le JSON du thème voulu. Dans le fichier .lottie, le thème sombre s’active depuis le lecteur.
• Moins d’animation : quand la personne qui visite a activé « réduire les animations » (prefers-reduced-motion), affichez le SVG fixe du même nom à la place de l’animation. La page de démonstration montre ce fonctionnement.
• Rythme : toutes les animations tournent à 60 images par seconde, et un cycle dure 2 000 ms au plus. Le plus lourd des fichiers JSON pèse 10 388 octets, le plus lourd des fichiers .lottie 1 710 octets.

À savoir

• Le raccord avec le pack d’icônes météo en ligne vaut pour les 24 sujets de ce pack : le pack statique contient d’autres icônes, qui n’ont pas de version animée. Au repos, l’écart de forme avec l’icône statique reste sous 0,003 unité de la grille de 24 (une courbe y remplace un arc de cercle), ce qui ne se voit pas à l’écran.
• En thème clair, l’ambre du soleil, de la lune et de l’éclair atteint un contraste de 3,18:1, juste au-dessus du seuil de 3:1 demandé pour les éléments graphiques. Sur un fond clair coloré, vérifiez-le.
• Dans rainbow, la lumière parcourt les bandes de l’arc l’une après l’autre. Deux fois par cycle, pendant environ 130 ms, deux bandes sont incomplètes en même temps ; il leur manque au plus 0,75 px à 24 px.

Fabrication et IA

Les animations ont été écrites par script avec un assistant d’IA (Claude Code), qui a produit la géométrie, les mouvements, les fichiers Lottie et SVG, les scripts et la page de démonstration. Tout a ensuite été relu et contrôlé : validation du schéma Lottie, rendu dans deux lecteurs, raccord des boucles, durées, images fixes comparées au rendu animé, raccord avec le pack d’icônes statique, contraste en clair et en sombre, planches relues. Aucune image n’a été produite par un générateur d’images : chaque fichier sort du même code.

• Lottie JSON : le format ouvert des animations vectorielles, lu par les lecteurs Lottie pour le web et le mobile et par les outils de design et de prototypage qui importent ce format.
• dotLottie (.lottie) : une archive compressée qui réunit l’animation et son thème sombre, pour les lecteurs qui lisent ce format.
• SVG : une image fixe par animation et par thème, dessinée dans un cadre de 24 au trait de 1,5, qui s’affiche dans tout navigateur et s’importe dans la plupart des outils de design.
• HTML : la page de démonstration, à ouvrir dans un navigateur, sans connexion. Elle embarque le lecteur open source lottie-web 5.13.0.

Les animations ont été contrôlées dans deux lecteurs web, l’un en rendu SVG, l’autre en rendu canvas.

Les animations sont livrées sous licence commerciale : vous pouvez les utiliser dans vos projets personnels et professionnels, y compris pour vos clients et dans les sites ou applications que vous vendez, mais pas revendre ni redistribuer les fichiers, même gratuitement. Le lecteur de la démonstration, lottie-web, est un logiciel libre sous licence MIT, dont la notice est jointe dans demo/vendor/.

• Quel outil d’animation choisir en 2026
• Un outil pour créer des animations interactives au format Lottie

1.0.0 (12 novembre 2026) : première version.