Weather line icon pack (36 icons)

This pack brings together 36 weather icons in line style, delivered as SVG, PNG and SVG sprite, under a commercial license. It is meant for designers and developers building a forecast app or website, a widget, a dashboard that shows outdoor conditions, or a travel and booking interface. The icons cover the state of the sky, precipitation, wind and atmospheric phenomena, then the measurements a forecast shows next to the outlook: temperature, humidity, UV index, wind direction, pressure. Each file has a plain English name (rain-heavy, cloud-moon, uv-index) that you can map straight to the condition code returned by your weather data source. All of them share the same stroke, with no fill and rounded ends: a weekly forecast, a city card and a measurements panel stay in a single style, from mockup to code.

• 36 line icons in 4 families:
  • Sky (9): sun, moon, moon-stars, cloud, clouds, cloud-sun, cloud-moon, sunrise, sunset;
  • Precipitation (11): drizzle, rain, rain-heavy, cloud-sun-rain, thunderstorm, lightning, snow, snow-heavy, snowflake, sleet, hail;
  • Atmosphere and wind (8): fog, haze, dust, wind, wind-strong, tornado, hurricane, rainbow;
  • Measurements (8): thermometer, thermometer-hot, thermometer-cold, humidity, umbrella, uv-index, wind-direction, pressure.
• 36 SVG files, one per icon.
• 108 PNG files: each icon at 24, 48 and 96 px.
• 1 SVG sprite holding the 36 icons as symbols.
• 1 HTML demo page.

A few drawing choices worth knowing before you buy. Precipitation types differ by their shape under the cloud: slanted strokes for rain, small round drops for drizzle, open flakes for snow, hollow hailstones for hail, a mix of rain and snow for sleet. Night only has moon, moon-stars and cloud-moon: there is no night variant of rain, thunderstorm or snow. lightning is a bolt on its own, thunderstorm a cloud with its bolt. uv-index pairs a sun with the letters UV, humidity is a drop marked with a percent sign, wind-direction an arrow in a circle and pressure a dial with a needle.

File layout:

svg/
png/24/
png/48/
png/96/
sprite/weather-line-icons.svg
demo/index.html

Production and AI

The icons were drawn as SVG with an AI assistant, then reviewed and checked one by one: rendered at 24 and 48 px, then each icon reviewed on a contact sheet before release. The pack contains no AI-generated images.

• SVG: unfilled vectors whose stroke takes the text color (currentColor). You change the color with the CSS color property and the weight with the stroke-width attribute, set once on the root element. The files open in most design tools and work directly in code (HTML, components).
• PNG 24, 48 and 96 px: black icons on a transparent background, for a presentation, a document or software that does not import SVG.
• SVG sprite: a single file where each icon is a <symbol> named after its file, called with <use href="#cloud-sun"/>.
• HTML: a self-contained demo page, with no script or external resource, that shows the icons by family at 24 or 48 px and in several colors, including on a dark background.

Buying the pack grants the commercial license (page in French): you can use these icons in a commercial app, website or dashboard, for yourself or for a client. You may not resell or redistribute the files themselves, on their own or in another pack.

• How to keep a common style across a whole set: the method for producing consistent icons (in French).
• Generating your icons or buying a pack: generative AI versus paid icon packs (in French).
• Same stroke and naming for an online store: the e-commerce line icon pack.

1.0.0 (November 10, 2026): first version.