mostly cloudy icon
mostly-cloudy from Carbon by IBM · Outline · Planning · Apache-2.0 Free for personal and commercial use.
- Name
- mostly-cloudy
- Set
- Carbon
- Style
- Outline
- Category
- Planning
- Viewbox
- 32×32
- License
- Apache 2.0
The same icon in other sets
More planning icons from Carbon
accumulation-iceaccumulation-precipitationaccumulation-rainaccumulation-snowagriculture-analyticsairline-digital-gateairline-manage-gatesairline-passenger-careairline-rapid-boardairport-01airport-02airport-locationalarmalarm-addalarm-subtractarray-date-timearray-timearrivalbaggage-claimbarbicyclebootbuoybus
Use the mostly cloudy icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M21.743 18.692a6 6 0 0 0 1.057-1.086a5.998 5.998 0 1 0-10.733-4.445A7.56 7.56 0 0 0 6.35 18.25A5.993 5.993 0 0 0 8 30.005h11a5.985 5.985 0 0 0 2.743-11.313M18 10.005a4.004 4.004 0 0 1 4 4a3.96 3.96 0 0 1-.8 2.4a4 4 0 0 1-.94.891a7.54 7.54 0 0 0-6.134-4.24A4 4 0 0 1 18 10.006m1 18H8a3.993 3.993 0 0 1-.673-7.93l.663-.112l.146-.656a5.496 5.496 0 0 1 10.729 0l.146.656l.662.112a3.993 3.993 0 0 1-.673 7.93m7-15.001h4v2h-4zM22.95 7.64l2.828-2.827l1.415 1.414l-2.829 2.828zM17 2.005h2v4h-2zM8.808 6.227l1.414-1.414l2.829 2.828l-1.415 1.414z"/></svg>
React
import type { SVGProps } from "react";
export function CarbonMostlyCloudy(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M21.743 18.692a6 6 0 0 0 1.057-1.086a5.998 5.998 0 1 0-10.733-4.445A7.56 7.56 0 0 0 6.35 18.25A5.993 5.993 0 0 0 8 30.005h11a5.985 5.985 0 0 0 2.743-11.313M18 10.005a4.004 4.004 0 0 1 4 4a3.96 3.96 0 0 1-.8 2.4a4 4 0 0 1-.94.891a7.54 7.54 0 0 0-6.134-4.24A4 4 0 0 1 18 10.006m1 18H8a3.993 3.993 0 0 1-.673-7.93l.663-.112l.146-.656a5.496 5.496 0 0 1 10.729 0l.146.656l.662.112a3.993 3.993 0 0 1-.673 7.93m7-15.001h4v2h-4zM22.95 7.64l2.828-2.827l1.415 1.414l-2.829 2.828zM17 2.005h2v4h-2zM8.808 6.227l1.414-1.414l2.829 2.828l-1.415 1.414z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M21.743 18.692a6 6 0 0 0 1.057-1.086a5.998 5.998 0 1 0-10.733-4.445A7.56 7.56 0 0 0 6.35 18.25A5.993 5.993 0 0 0 8 30.005h11a5.985 5.985 0 0 0 2.743-11.313M18 10.005a4.004 4.004 0 0 1 4 4a3.96 3.96 0 0 1-.8 2.4a4 4 0 0 1-.94.891a7.54 7.54 0 0 0-6.134-4.24A4 4 0 0 1 18 10.006m1 18H8a3.993 3.993 0 0 1-.673-7.93l.663-.112l.146-.656a5.496 5.496 0 0 1 10.729 0l.146.656l.662.112a3.993 3.993 0 0 1-.673 7.93m7-15.001h4v2h-4zM22.95 7.64l2.828-2.827l1.415 1.414l-2.829 2.828zM17 2.005h2v4h-2zM8.808 6.227l1.414-1.414l2.829 2.828l-1.415 1.414z"/></svg> </template>
CSS
.icon-mostly-cloudy {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M21.743%2018.692a6%206%200%200%200%201.057-1.086a5.998%205.998%200%201%200-10.733-4.445A7.56%207.56%200%200%200%206.35%2018.25A5.993%205.993%200%200%200%208%2030.005h11a5.985%205.985%200%200%200%202.743-11.313M18%2010.005a4.004%204.004%200%200%201%204%204a3.96%203.96%200%200%201-.8%202.4a4%204%200%200%201-.94.891a7.54%207.54%200%200%200-6.134-4.24A4%204%200%200%201%2018%2010.006m1%2018H8a3.993%203.993%200%200%201-.673-7.93l.663-.112l.146-.656a5.496%205.496%200%200%201%2010.729%200l.146.656l.662.112a3.993%203.993%200%200%201-.673%207.93m7-15.001h4v2h-4zM22.95%207.64l2.828-2.827l1.415%201.414l-2.829%202.828zM17%202.005h2v4h-2zM8.808%206.227l1.414-1.414l2.829%202.828l-1.415%201.414z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M21.743%2018.692a6%206%200%200%200%201.057-1.086a5.998%205.998%200%201%200-10.733-4.445A7.56%207.56%200%200%200%206.35%2018.25A5.993%205.993%200%200%200%208%2030.005h11a5.985%205.985%200%200%200%202.743-11.313M18%2010.005a4.004%204.004%200%200%201%204%204a3.96%203.96%200%200%201-.8%202.4a4%204%200%200%201-.94.891a7.54%207.54%200%200%200-6.134-4.24A4%204%200%200%201%2018%2010.006m1%2018H8a3.993%203.993%200%200%201-.673-7.93l.663-.112l.146-.656a5.496%205.496%200%200%201%2010.729%200l.146.656l.662.112a3.993%203.993%200%200%201-.673%207.93m7-15.001h4v2h-4zM22.95%207.64l2.828-2.827l1.415%201.414l-2.829%202.828zM17%202.005h2v4h-2zM8.808%206.227l1.414-1.414l2.829%202.828l-1.415%201.414z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/carbon/mostly-cloudy.svg?color=%231a73e8&size=48
