Weather SVG Icons

This collection covers icons for common weather conditions — sun, rain, snow, wind, clouds, and more — pulled from multiple libraries into one searchable set. Some icons are static, others include built-in animation for conditions like rain or wind. Useful for weather widgets, forecast dashboards, or any interface that needs to represent live conditions at a glance.

2 icon packs·Free & open source

Icon Packs

Meteocons

450 iconsMIT

Weather Icons

230 iconsOpen Font License

Common Use Cases

1
Weather widgets and forecast cards showing current or upcoming conditions
2
Dashboards that display live weather data alongside other metrics
3
Travel and booking platforms showing expected weather at a destination
4
Agriculture, logistics, or outdoor event apps that factor weather into planning
5
News and media sites embedding weather summaries in articles or homepages
6
Smart home or IoT interfaces displaying local weather alongside device status
7
Onboarding or settings screens where users select notification preferences by weather condition

Frequently Asked Questions

Coverage varies by library, but common conditions include clear skies, clouds, rain, snow, thunderstorms, fog, and wind, often with variations for day and night. Check each library's pack page for its full list of conditions.

It's a mix. Some libraries, like Meteocons, include built-in animation for conditions like falling rain or drifting clouds, while others provide static icons meant to be paired with your own motion if needed. Check the pack page to see which type a given library offers.

This collection doesn't provide that mapping directly, since each weather API uses its own condition codes. You'll need to match your API's condition codes (e.g. 'clear-day', 'rain', 'partly-cloudy') to the closest icon name in the library you choose — most libraries use fairly standard, readable naming that makes this straightforward.

Some libraries include separate day and night variants (for example, a sun vs. a moon for clear skies), while others use a single icon regardless of time of day. Check the specific library's coverage if day/night distinction matters for your use case.

Each icon keeps the license from its source library attached to it, and terms can differ between Meteor Icons, Meteocons, and other included libraries. Check the license shown on the individual icon or pack page before using it in a commercial product.

For most icons, yes — since they're SVG, you can override fill or stroke colors with CSS. Icons with built-in animation may have colors defined within the SVG itself, so check whether the specific icon uses currentColor or hardcoded colors before assuming it'll follow your theme automatically.

Less common conditions may not be covered by every library, since most focus on the conditions used most often in typical weather apps. If a specific condition is missing, it's worth checking a second library in this collection or falling back to the closest general icon (like a generic storm icon).

Weather SVG Icons

Icon Packs

Meteocons

Weather Icons

Common Use Cases

Frequently Asked Questions

More Collections

Brands & Logos

Maps & Location

Food & Drink

Transport & Vehicle

Emoji

E-Commerce

Medical & Health

UI & Interface

Weather SVG Icons

Icon Packs

Meteocons

Weather Icons

Common Use Cases

Frequently Asked Questions

What weather conditions are covered in this collection?

Are all the icons animated, or are some static?

How do I map these icons to real weather API data (like OpenWeatherMap or similar)?

Do these icons distinguish between day and night conditions?

Are these icons free to use in commercial projects?

Can I change the color of these icons to match my app's theme?

What if a specific condition, like 'hail' or 'sandstorm', isn't available?

More Collections

Brands & Logos

Maps & Location

Food & Drink

Transport & Vehicle

Emoji

E-Commerce

Medical & Health

UI & Interface