Climacons free weather icons

Last Updated on June 30, 2026 by Editorial Team

Climacons is a set of 75 climatically categorised icons for web and user interface designers created by Adam Whitcroft. These icons are available in EPS, PNG, PSD and SVG format.

The Visual Language Behind Climacons

What makes this set read so cleanly at small sizes is its restraint. Every icon is built from the same handful of shapes: a rounded cloud outline, short radiating sun rays, straight rain strokes, a snowflake asterisk, and thin lightning bolts. Nothing is decorative for its own sake. The consistent stroke weight and single orange fill color mean the whole grid feels like one cohesive family rather than icons scavenged from different sources.

Look closely and you’ll notice the designer solved the “combination weather” problem elegantly. Instead of drawing dozens of unique scenes, the set layers a small vocabulary of parts: sun peeking behind cloud, cloud with rain dots, cloud with rain dashes for heavier downpour, snow with a sun sliver for sleet-like conditions, and horizontal bar clouds for fog or mist. This modular approach is why the set can cover so many climate states without feeling bloated.

Reading the Subtle Variations

Several icons look nearly identical at a glance but encode real differences in meteorological meaning:

• Dotted rain versus dashed rain, suggesting light drizzle compared to steady or heavy rain
• A single rain drop next to a cloud, likely indicating a slight chance of precipitation
• Snowflake asterisks that swap in for rain dashes to signal snow or sleet
• Wavy horizontal lines beneath a cloud shape, standing in for wind or breeze
• A bolt cutting through a cloud for thunderstorm conditions

This kind of granularity matters in forecast interfaces where users scan quickly and need to distinguish “light rain” from “heavy rain” without reading text.

Where This Icon Style Fits Best

The thin, single-color line style pairs naturally with dashboard and data-driven interfaces. It sits comfortably in:

• Weather widgets embedded in a homepage, app dashboard, or smart home display
• Forecast cards in travel booking flows, where knowing the weather at a destination helps a user decide
• Agricultural or logistics dashboards that track conditions across multiple locations at once
• Editorial weather sections for news sites, where a lightweight icon says more than a paragraph of description
• Wearable or smartwatch complications, since the shapes stay legible even when scaled down

The orange color shown in the preview reads warm and energetic, which suits a friendly consumer app. In a more neutral or corporate dashboard, the same linework would carry the design just as well in a muted gray or a brand accent color.

Adapting the Icons to Your Own Palette

Because the icons are built as simple outlined shapes, restyling them is straightforward in any vector editor:

• Select the icon paths and change the fill or stroke color as a group so the whole set updates together, keeping consistency across every state
• Adjust stroke width slightly if you need the icons to feel bolder for a larger touch target, or thinner for a more delicate editorial look
• Group the cloud, sun, and precipitation elements separately if you plan to animate them, since many weather apps subtly animate rain dashes falling or sun rays pulsing
• Scale the whole set proportionally rather than resizing icons individually, so line weights stay visually matched across a UI
• Round or square off the cloud corners slightly if you want to match a more geometric brand identity

Because the shapes are so simple, they also take well to color coding. Some designers assign a distinct hue to each weather category, blue for rain, yellow for sun, gray for cloud, so users can scan a weekly forecast strip and recognize patterns by color before even reading the icon shape.

Pairing With Type and Layout

Given the geometric, rounded character of these icons, they pair well with humanist sans-serif typefaces that share similarly soft terminals. Avoid pairing them with heavy slab serifs or ornate display type, since the contrast in weight and personality will feel disjointed.

In a forecast card layout, keep the icon as the visual anchor with temperature and day labels arranged around it using clear hierarchy: largest text for temperature, smaller for day name, smallest for descriptive text like “partly cloudy.” Because the icons already communicate a lot of information visually, resist the urge to over-label every icon with redundant text.

Practical Questions Designers Ask

Do these icons work well at very small sizes, like a status bar?
The simplified shapes and open line style hold up reasonably well down to small sizes, though the more detailed combination icons (sun-behind-cloud-with-rain) will read more clearly once they’re at least icon-button size rather than tiny inline text size.

Can I mix only a subset of the icons into an existing UI kit?
Yes. Because the stroke weight and proportions are consistent across the whole set, you can pull just the icons you need, for example only the four or five core states most forecasts use, without the rest of the set feeling incomplete.

What if my product needs filled icons instead of line icons?
You can convert the outlined strokes to filled shapes in a vector editor by expanding the stroke, then merging overlapping paths. This gives you a solid silhouette version that reads well at very small sizes or in favicon-style contexts.

How many distinct weather states should I actually use in my product?
Most consumer apps only need eight to twelve states even if a full icon set offers many more. Pick the ones that map directly to whatever weather data source you’re pulling from, and keep the rest in reserve for future features like severe weather alerts.