Weather icon packs
Sun, rain, storms and forecasts drawn in matching sets. Line icons for widgets, lineal color and gradient artwork for dashboards and apps.
72 packs · 8 styles · 2,942 icons · SVG and PNG
Line weather icons
One-color outlines that take on your text color. Best for interfaces.
Line color weather icons
Outlines filled with color. They pair well with line icon sets.
Flat weather icons
Solid color artwork without outlines, for websites, apps and slides.
Gradient weather icons
Soft color gradients for landing pages, banners and presentations.
Solid weather icons
Solid one-color shapes that stay clear at small sizes and in print.
3D weather icons
Three-dimensional renders for hero sections and landing pages.
Circle weather icons
Every icon sits inside a circle, so rows and lists line up neatly.
More styles weather icons
Packs in mixed and less common styles.
Popular weather icons
A mix of the most downloaded weather icons across every style. Search to see the rest.
WeatherFilled
WeatherFlat
WeatherFlat
WeatherLineal
WeatherLineal Color
WeatherBlue
WeatherLineal Gradient
WeatherLineal Color
WeatherLineal Color
WeatherFlat
WeatherFlat
WeatherOutline ColorChoosing weather icons
Weather icons are read at a glance: a forecast row, a home-screen widget, a map overlay. Clarity matters more than detail.
Cover the full set of conditions
A basic forecast needs at least clear, partly cloudy, cloudy, rain, heavy rain, thunderstorm, snow, sleet, fog and wind, plus day and night versions of clear and partly cloudy. Check that a pack includes all of these before you commit, because a missing icon borrowed from another pack is easy to spot.
Style by context
- Line weather icons fit apps and widgets that sit next to text and numbers.
- Line color and flat icons make conditions easier to tell apart at small sizes, since sun, rain and snow each get their own color.
- Gradient and 3D artwork suits hero sections and travel or event pages, where the icon is a visual rather than data.
Don't rely on color alone
Rain and snow can look alike in a single color at 16 px. Pair each icon with the temperature or a short label such as "Rain" or "Snow", and give it an accessible name for screen readers.
Units and extra data
Forecasts often show more than the sky: wind speed, humidity, UV index, sunrise and sunset, air quality. Choose a pack that covers these too, or check that a second pack uses the same stroke and corner style. Show units such as °C or km/h next to the number rather than inside the icon, so one icon works in every region.
Day, night and motion
Night versions usually swap the sun for a moon. Keep both in the same pack so the shapes line up when the forecast switches at sunset. If you plan to animate icons later, start from a line pack: simple strokes are the easiest to animate with CSS.
Before you download
- List every condition your weather data can return and map each one to an icon.
- Check for day and night versions where you need them.
- Test the icons at your smallest size next to real temperatures.
- Add text labels or accessible names for every condition.
- Keep wind, humidity and UV icons in the same style as the conditions.
Related: travel icons for trip pages and arrow icons for wind direction. Or search weather icons by condition.
Questions about weather icons
Short answers on formats, editing and use.
Which weather conditions should an icon set include?
At minimum: clear, partly cloudy, cloudy, rain, heavy rain, thunderstorm, snow, sleet, fog and wind, with day and night versions of clear and partly cloudy. Check the pack page to confirm coverage.
Which style is best for a forecast widget?
Line or line color icons. They stay clear at small sizes next to temperatures, and line icons follow your text color in light and dark themes.
Can I show the wind direction with an icon?
Yes. Use a simple arrow icon and rotate it to the wind bearing with CSS, so one SVG covers every direction. Arrow packs in the same style as your weather icons keep the widget consistent.
Can I use weather icons in commercial projects?
Yes. IconHub icons are free for personal and commercial projects with attribution. You can't resell them as files or use them in a logo. The license page has the full summary.
