Partly Cloudy SVG icon, line

Free

Rays from a small sun appear behind a larger cloud, indicating partly cloudy skies. It belongs on hourly forecast grids and outdoor activity planners.

Fixed colourcurrentColor becomes your colour

Inline styleOne style attribute per shape

Minified

partly cloudy cloud sun forecast weather icon line

How to use it

HTML <img>

<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/g7cJSR6Jw7i2/amnt.svg" alt="Partly Cloudy" width="48" height="48">

Inline SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 8a3 3 0 0 0-5.8-1"/><path d="M12 2v1M5.5 4.5l.7.7M20 8h-1M18.5 4.5l-.7.7"/><path d="M6 20a3.5 3.5 0 0 1-.5-7A6 6 0 0 1 17 11.5a4.25 4.25 0 0 1 1.25 8.5H6Z"/></svg>

CSS background-image

.partly-cloudy {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/g7cJSR6Jw7i2/amnt.svg");
  background-size: contain;
}

CSS mask-image (takes the text colour)

.partly-cloudy {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/g7cJSR6Jw7i2/amnt.svg") center / contain no-repeat;
}

React

import PartlyCloudySvg from "./partly-cloudy.jsx"; // from the React tab above

<PartlyCloudySvg width={48} height={48} />

Made with AMNT

AMNT SVG 1.1 drew this from the words Partly Cloudy: A small sun with visible rays peeking from behind a larger cloud. as part of the pack Weather icons, line. Want one like it? Make your own in the SVG studio.

Rest of Weather icons, line

Whole pack

Similar SVGs

Licence: free. A Free account may use it for personal work; Pro and Max download it with a commercial licence, fixed at download, forever. No credit needed. Read the licence