Animated weather icons: 24 looping Lottie animations, light and dark (JSON, .lottie, SVG)

This pack is for UI designers and front-end developers who build a forecast app or website, a weather widget or a dashboard, and want icons in motion without animating them themselves. Each icon is a lightweight file in Lottie format that loops, in light and dark, in colour, with a static SVG image for people who have asked for less motion. At rest, every animation uses the drawing of the icon of the same name in the Beryl Design weather line icon pack: you can show the static icon in a list of days and its animated version for the current forecast, with no change of shape between the two.

• 24 animations, in 6 families:
  • Sky: sun, moon-stars, cloud, clouds;
  • Mixed: cloud-sun, cloud-moon, cloud-sun-rain, rainbow;
  • Rain: drizzle, rain, rain-heavy, thunderstorm;
  • Snow and ice: snow, snow-heavy, sleet, hail;
  • Wind and fog: fog, wind, wind-strong, tornado;
  • Landmarks: sunrise, sunset, thermometer-hot, umbrella.
• 24 loops: every animation runs continuously, none plays only once.
• 2 themes, light and dark, for every animation.
• 48 Lottie JSON files: every animation in light and in dark.
• 24 .lottie files: every animation, with its dark theme included in the same file.
• 48 static SVG images: the resting frame of every animation, in light and in dark, to show when the “reduce motion” setting is on.
• 1 HTML demo page, offline: the 24 animations playing in the browser, grouped by family, with a choice of light, dark or the system setting. Clicking an icon pauses it on its static image, a second click starts it again. When the system asks for less motion, the page shows the static images instead.

Archive layout:

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

The zip also contains the licence text, a README file and the credits.

How to use it

• In a web page or an app: load the JSON of the theme you want, or the .lottie file, into a Lottie player. Each animation loops without a jump: its last frame joins the first.
• Colours: the icons are in colour, with one colour per role. Ink is used for clouds, wind, fog and objects, amber for the sun, the moon and lightning, blue for water, red for heat. These colours are stored in named slots: a player that supports slots lets you change them without editing the file; with a player that does not read them, use the JSON of the theme you want. In the .lottie file, the dark theme is switched on from the player.
• Less motion: when the visitor has turned on “reduce motion” (prefers-reduced-motion), show the static SVG of the same name instead of the animation. The demo page shows how this works.
• Timing: every animation runs at 60 frames per second, and one cycle lasts 2,000 ms at most. The heaviest JSON file weighs 10,388 bytes, the heaviest .lottie file 1,710 bytes.

Good to know

• The match with the weather line icon pack covers the 24 subjects of this pack: the static pack contains other icons, which have no animated version. At rest, the difference in shape from the static icon stays under 0.003 units of the 24 grid (a curve replaces a circular arc there), which cannot be seen on screen.
• In the light theme, the amber of the sun, the moon and lightning reaches a contrast of 3.18:1, just above the 3:1 threshold required for graphical objects. On a coloured light background, check it.
• In rainbow, the light runs through the bands of the arc one after the other. Twice per cycle, for about 130 ms, two bands are incomplete at the same time; they lack 0.75 px at most at 24 px.

Production and AI

The animations were written by script with an AI assistant (Claude Code), which produced the geometry, the motion, the Lottie and SVG files, the scripts and the demo page. Everything was then reviewed and checked: Lottie schema validation, rendering in two players, loop seams, durations, static images compared with the animated render, match with the static icon pack, contrast in light and dark, contact sheets reviewed. No image was produced by an image generator: every file comes out of the same code.

• Lottie JSON: the open format for vector animations, read by Lottie players for the web and mobile and by the design and prototyping tools that import this format.
• dotLottie (.lottie): a compressed archive that bundles the animation and its dark theme, for players that read this format.
• SVG: one static image per animation and per theme, drawn in a 24 frame with a 1.5 stroke, which displays in any browser and imports into most design tools.
• HTML: the demo page, to open in a browser, offline. It ships with the open source lottie-web 5.13.0 player.

The animations were checked in two web players, one rendering to SVG, the other to canvas.

The animations come under a commercial licence: you can use them in your personal and professional projects, including for your clients and in the websites or apps you sell, but you may not resell or redistribute the files, even for free. The demo player, lottie-web, is free software under the MIT licence, and its notice is included in demo/vendor/.

• Which animation tool to choose in 2026
• A tool to create interactive animations in Lottie format (in French)

1.0.0 (12 November 2026): first version.