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 icônes · SVG et PNG
Icônes weather : Trait
Contours d’une seule couleur qui prennent la couleur du texte. Idéal pour les interfaces.
Icônes weather : Trait couleur
Contours remplis de couleur, qui s’accordent avec les icônes au trait.
Icônes weather : Plat
Illustrations en aplats de couleur, sans contour, pour sites, apps et présentations.
Icônes weather : Dégradé
Dégradés doux pour pages d’accueil, bannières et présentations.
Icônes weather : Plein
Formes pleines d’une seule couleur, nettes en petite taille comme à l’impression.
Icônes weather : 3D
Rendus en trois dimensions pour en-têtes et pages d’accueil.
Icônes weather : Cercle
Chaque icône est placée dans un cercle : lignes et listes restent alignées.
Icônes weather : Autres styles
Packs aux styles variés et moins courants.
Icônes weather populaires
Un mélange des icônes weather les plus téléchargées, tous styles confondus. Lancez une recherche pour voir le reste.
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 sur les icônes weather
Des réponses courtes sur les formats, la modification et l'utilisation.
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.
