Skip to content

16 icons · MIT licensed

Animated weather icons

Sun, moon, clouds, rain, snow, lightning and wind for forecasts and anything that follows the time of day. The sun and moon also make a natural light and dark mode switch.

Of the 16 icons, 2 toggle between two states on click, 13 play once on hover and 1 loops while hovered. Each one comes as a React component, a shadcn/ui component and a Lottie JSON animation with static SVGs, free for commercial use under the MIT license.

All weather icons

Where to use them

  • Weather widgets and forecast cards
  • Light and dark theme switches
  • Sunrise and sunset times in travel apps
  • Temperature readings on smart home dashboards
  • Energy and power status indicators

By interaction

  • Click-to-toggle animated icons · 2

    Toggles between two states on click, or switches immediately when reduced motion is preferred. Cloud Off, Zap Off.

  • Hover-to-play animated icons · 13

    Plays once on mouseenter unless reduced motion is preferred. Leaving does not stop it; entering during playback does not restart it. Cloud Drizzle, Cloud Lightning, Cloud Rain, Cloud Snow, Droplet, Moon, Sun, Sunrise, Sunset, Thermometer, Umbrella, Wind, Zap.

  • Hover loop animated icons · 1

    Loops while hovered, finishes the current cycle after mouseleave and stays static when reduced motion is preferred. Cloud.

Add one to your app

With React, install react-useanimations and import the icon; it plays its hover replay interaction on its own. Every icon in this category works the same way: swap sun for the name on its page.

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

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

With shadcn/ui, the CLI adds a ready-made component:

npx shadcn@latest add https://useanimations.com/r/sun.json
import { AnimatedSun } from '@/components/animations/sun';

<AnimatedSun size={24} />

Not using React? Each icon is a Lottie JSON file at /icons/<id>.json; see Lottie icons for web, iOS, Android and Flutter players.

FAQ

Which animated weather icons are included?

16 icons: Cloud, Cloud Drizzle, Cloud Lightning, Cloud Off, Cloud Rain, Cloud Snow, Droplet, Moon, Sun, Sunrise, Sunset, Thermometer and 4 more. All of them are free for personal and commercial projects under the MIT license, with no attribution required.

How do I use these animated weather icons in React?

Install react-useanimations, add import sun from 'react-useanimations/lib/sun' and render <UseAnimations animation={sun} size={32} />. The icon plays its hover replay interaction and follows the text color. With shadcn/ui, run npx shadcn@latest add https://useanimations.com/r/sun.json instead.

Can I use these animated weather icons without React?

Yes. Each icon is a Lottie JSON file at https://useanimations.com/icons/<id>.json (for example https://useanimations.com/icons/sun.json), playable with lottie-web, lottie-ios, lottie-android or Flutter's lottie package; static SVGs are on each icon page. None of them use expressions, so lottie-web's light build is enough.