# Animated weather icons

> 16 free animated weather icons, including Cloud, Cloud Drizzle and Cloud Lightning. For React, shadcn/ui and Lottie JSON, MIT licensed.

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.

## Icons

- [Cloud](https://useanimations.com/icons/cloud) (`cloud`, hover-loop)
- [Cloud Drizzle](https://useanimations.com/icons/cloud-drizzle) (`cloudDrizzle`, hover-replay)
- [Cloud Lightning](https://useanimations.com/icons/cloud-lightning) (`cloudLightning`, hover-replay)
- [Cloud Off](https://useanimations.com/icons/cloud-off) (`cloudOff`, click-toggle)
- [Cloud Rain](https://useanimations.com/icons/cloud-rain) (`cloudRain`, hover-replay)
- [Cloud Snow](https://useanimations.com/icons/cloud-snow) (`cloudSnow`, hover-replay)
- [Droplet](https://useanimations.com/icons/droplet) (`droplet`, hover-replay)
- [Moon](https://useanimations.com/icons/moon) (`moon`, hover-replay)
- [Sun](https://useanimations.com/icons/sun) (`sun`, hover-replay)
- [Sunrise](https://useanimations.com/icons/sunrise) (`sunrise`, hover-replay)
- [Sunset](https://useanimations.com/icons/sunset) (`sunset`, hover-replay)
- [Thermometer](https://useanimations.com/icons/thermometer) (`thermometer`, hover-replay)
- [Umbrella](https://useanimations.com/icons/umbrella) (`umbrella`, hover-replay)
- [Wind](https://useanimations.com/icons/wind) (`wind`, hover-replay)
- [Zap](https://useanimations.com/icons/zap) (`zap`, hover-replay)
- [Zap Off](https://useanimations.com/icons/zap-off) (`zapOff`, click-toggle)

## 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](https://useanimations.com/interactions/click-toggle) (2): Toggles between two states on click, or switches immediately when reduced motion is preferred.
- [Hover-to-play animated icons](https://useanimations.com/interactions/hover-replay) (13): Plays once on mouseenter unless reduced motion is preferred. Leaving does not stop it; entering during playback does not restart it.
- [Hover loop animated icons](https://useanimations.com/interactions/hover-loop) (1): Loops while hovered, finishes the current cycle after mouseleave and stays static when reduced motion is preferred.

## Code

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

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

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

Every icon is also a Lottie JSON file at `https://useanimations.com/icons/<id>.json`: [Lottie icons](https://useanimations.com/lottie-icons).

## 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.

## More categories

- [Animated alert icons](https://useanimations.com/categories/alerts) (5)
- [Animated notification bell icons](https://useanimations.com/categories/notifications) (4)
- [Animated navigation and arrow icons](https://useanimations.com/categories/navigation) (34)
- [Animated action icons](https://useanimations.com/categories/action) (64)
- [Animated file, folder and user icons](https://useanimations.com/categories/content) (22)
- [Animated form control icons](https://useanimations.com/categories/form) (3)
- [Animated media player icons](https://useanimations.com/categories/media) (28)
- [Animated text editing icons](https://useanimations.com/categories/text-editing) (10)
- [Animated communication icons](https://useanimations.com/categories/communication) (13)
- [Animated device icons](https://useanimations.com/categories/devices) (12)
- [Animated map and location icons](https://useanimations.com/categories/maps-location) (9)
- [Animated e-commerce icons](https://useanimations.com/categories/commerce) (11)
- [Animated chart icons](https://useanimations.com/categories/charts) (5)
- [Animated developer icons](https://useanimations.com/categories/development) (9)
- [Animated design and layout icons](https://useanimations.com/categories/design-layout) (10)
- [Animated shape and math icons](https://useanimations.com/categories/shapes-math) (8)
- [Animated loading icons](https://useanimations.com/categories/loading) (5)
- [Animated social media icons](https://useanimations.com/categories/social-media) (22)
- [More animated icons](https://useanimations.com/categories/other) (10)

HTML version: https://useanimations.com/categories/weather