Free Weather SVG Icons: Weather Icons & Meteocons

Weather icons need to communicate a forecast at a glance: sun, rain, snow, wind, and dozens of in-between conditions, without relying on color alone. This collection covers two open-source packs: Weather Icons by Erik Flowers (219 icons, Open Font License, the long-standing standard used across weather widgets since 2012) and Meteocons by Bas Milius (447 icons, MIT licensed, a modern flat-style set with day/night variants for most conditions). Together they cover both a classic, widely-recognized icon language and a contemporary flat aesthetic.

2 icon packs · 666 total icons · Free & open source

Icon Packs

Weather Icons

219 icons OFL-1.1

Meteocons

447 icons MIT

Common Use Cases

1 Weather app dashboards and current-conditions widgets

2 Forecast cards showing multi-day outlooks

3 Travel and outdoor-activity planning tools

4 IoT weather station displays and smart-home dashboards

5 News and media weather segments

6 Agriculture and logistics apps needing condition alerts

Frequently Asked Questions

Weather Icons (Erik Flowers) is the older, more established set: 219 icons under the Open Font License, originally built as an icon font and widely used across weather widgets for over a decade. Meteocons (Bas Milius) is a newer, MIT-licensed set of 447 icons with a flatter, more modern visual style and explicit day/night variants for conditions like clear, cloudy, and partly-cloudy.

Meteocons explicitly distinguishes day and night variants for most conditions (clear-day vs. clear-night, for example), look for "-day" and "-night" suffixes in the icon names. Weather Icons has some day/night pairs (day-sunny vs. night-clear) but not full coverage across every condition; check the pack page search for what is available.

Yes. Meteocons is MIT licensed, free for commercial use with a license notice preserved in your project. Weather Icons uses the SIL Open Font License, also free for commercial use, though as a font-derived license it has specific terms around bundling/embedding fonts versus using the individual SVG glyphs directly (using the standalone SVGs, as offered here, sidesteps font-embedding restrictions).

Meteocons covers the full range of standard meteorological conditions (clear, cloudy, rain, drizzle, thunderstorm, snow, sleet, fog, wind, hail) plus moon phases and UV/wind-speed indicators. Weather Icons covers a similarly broad set and adds extras like wind direction arrows, barometer states, and Beaufort scale symbols.

Most weather APIs (OpenWeatherMap, WeatherAPI, Tomorrow.io) return a condition code or short description (e.g. "light rain", "clear sky"). Build a small lookup table mapping each API's condition strings to the closest icon slug in Meteocons or Weather Icons, neither pack ships an official mapping table, since APIs use inconsistent taxonomies.

Yes, both packs are static SVGs, but their simple shapes (sun rays, raindrops, cloud outlines) animate well with CSS keyframes or a library like Motion: rotate sun rays slowly, translate raindrops downward on a loop, or fade between cloud layers. Respect prefers-reduced-motion and pause looping animations for users who request it.

Weather icons are almost always paired with a text description ("Partly Cloudy", "72°F"), so mark the icon aria-hidden="true" and let the visible text carry the accessible label. If an icon-only state appears (e.g. a compact forecast strip), add aria-label with the condition name.

Meteocons' MIT license and Weather Icons' Open Font License don't require a visible on-page credit, but both technically require preserving the license file/notice within your project's source or documentation. A footer or about-page credit is good practice but not legally mandatory.