Can I change the colour of a weather icon?

Yes. Recolour an icon on the page, or change the whole grid. Icons also use currentColor, so they can take the colour of the text around them.

What formats can I export?

You can copy SVG code or export PNG, WebP, JPG, a React component, a data URI, or CSS using a background-image or mask-image data URI.

Can I use these icons in a commercial project?

Pro and Max accounts get a commercial licence for what they download. Free accounts can use free items for personal projects.

Free weather SVG icons

38 SVGs

Search the library

Browse weather SVG icons for sun, rain, clouds, snow, wind and storms. Use them in forecast screens, travel pages, school worksheets or a daily weather report. The icons use currentColor, so they can take the colour of the text around them. Each item is real SVG code, made by our own models and checked by a judge before publication.

Recolour one icon or the whole grid on this page. You can also change stroke width, size, opacity and rotation. Copy SVG code, export a PNG, WebP or JPG, or use a CSS data URI or React component. For personal projects, free items are available with a free account.

cloud snow rain wind storm sun moon temperature forecast winter night lightning

Packs

Sets drawn in one style.

Weather icons, line

38 SVGs · Free 24 · Premium 14

Not what you need?

Describe it: the SVG studio opens with this style filled in.

More icons

Questions

Can I change the colour of a weather icon?: Yes. Recolour an icon on the page, or change the whole grid. Icons also use currentColor, so they can take the colour of the text around them.
What formats can I export?: You can copy SVG code or export PNG, WebP, JPG, a React component, a data URI, or CSS using a background-image or mask-image data URI.
Can I use these icons in a commercial project?: Pro and Max accounts get a commercial licence for what they download. Free accounts can use free items for personal projects.