Add icons to this collection by clicking the heart icon.
Cloudy Day icon - also known as cloud, weather, day, sun, sky, cloudy, cloudy day, and climate. Created in a clean flat gradient style, perfect for web, apps, and UI projects. Available in SVG and PNG, with multiple style variants.
<svg
xmlns="http://www.w3.org/2000/svg"
width="512"
height="512"
viewBox="0 0 48 48"
>
<linearGradient
id="b"
x1="35"
x2="35"
y1="13.188"
y2="25.894"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#9aa6e2" />
<stop offset="1" stop-color="#7283d6" />
</linearGradient>
<linearGradient
id="c"
x1="35"
x2="35"
y1="21.072"
y2="27.083"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#7283d6" stop-opacity="0" />
<stop offset="1" stop-color="#4d62cb" />
</linearGradient>
<linearGradient
id="d"
x1="26"
x2="26"
y1="22.625"
y2="45.836"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#eaecf7" />
<stop offset="1" stop-color="#cdd3f1" />
</linearGradient>
<linearGradient
id="a"
x1="9.808"
x2="16.058"
y1="9.473"
y2="16.379"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ffca4f" />
<stop offset="1" stop-color="#f7ae30" />
</linearGradient>
<linearGradient id="e" x1="13" x2="13" y1="1.938" y2="5.719" href="#a" />
<linearGradient id="f" x1="13" x2="13" y1="23.938" y2="20.029" href="#a" />
<linearGradient id="g" x1="2" x2="6" y1="13" y2="13" href="#a" />
<linearGradient
id="h"
x1="20"
x2="24"
y1="13"
y2="13"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#f7ae30" />
<stop offset="1" stop-color="#ffca4f" />
</linearGradient>
<linearGradient
id="i"
x1="5.194"
x2="7.976"
y1="20.757"
y2="18.07"
href="#a"
/>
<linearGradient
id="j"
x1="20.742"
x2="17.992"
y1="5.242"
y2="8.023"
href="#a"
/>
<linearGradient
id="k"
x1="20.601"
x2="18.007"
y1="20.586"
y2="18.024"
href="#a"
/>
<linearGradient
id="l"
x1="5.265"
x2="8.108"
y1="5.174"
y2="8.205"
href="#a"
/>
<linearGradient
id="m"
x1="13.163"
x2="16.303"
y1="13.171"
y2="16.499"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ffca4f" stop-opacity="0" />
<stop offset="1" stop-color="#f4901f" />
</linearGradient>
<linearGradient
id="n"
x1="26.006"
x2="26.006"
y1="37.234"
y2="47.336"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#e2e5f4" stop-opacity="0" />
<stop offset="1" stop-color="#9aa6e2" />
</linearGradient>
<g>
<path
fill="url(#b)"
d="M42 18c-.06 0-.119.006-.179.009A6.49 6.49 0 0 0 29.97 16.1 5 5 0 1 0 29 26h13a4 4 0 0 0 0-8z"
/>
<path
fill="url(#c)"
d="M24 21a5 5 0 0 0 5 5h13a3.952 3.952 0 0 0 3.859-5z"
/>
<path
fill="url(#d)"
d="M38.727 31.231c-.11 0-.216.012-.325.017a11.739 11.739 0 0 0-21.547-3.532 8.993 8.993 0 0 0-1.764-.177 9.232 9.232 0 0 0 0 18.462h23.636a7.385 7.385 0 0 0 0-14.769z"
/>
<circle cx="13" cy="13" r="4" fill="url(#a)" />
<path
fill="url(#e)"
d="M13 6a1 1 0 0 1-1-1V3a1 1 0 0 1 2 0v2a1 1 0 0 1-1 1z"
/>
<path
fill="url(#f)"
d="M13 24a1 1 0 0 1-1-1v-2a1 1 0 0 1 2 0v2a1 1 0 0 1-1 1z"
/>
<path fill="url(#g)" d="M5 14H3a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2z" />
<path fill="url(#h)" d="M23 14h-2a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2z" />
<path
fill="url(#i)"
d="M5.929 21.071a1 1 0 0 1-.707-1.707l1.414-1.414a1 1 0 0 1 1.414 1.414l-1.414 1.414a1 1 0 0 1-.707.293z"
/>
<path
fill="url(#j)"
d="M18.657 8.343a1 1 0 0 1-.707-1.707l1.415-1.414a1 1 0 0 1 1.414 1.414L19.364 8.05a1 1 0 0 1-.707.293z"
/>
<path
fill="url(#k)"
d="M20.071 21.071a1 1 0 0 1-.707-.293l-1.414-1.414a1 1 0 0 1 1.414-1.414l1.415 1.414a1 1 0 0 1-.707 1.707z"
/>
<path
fill="url(#l)"
d="M7.343 8.343a1 1 0 0 1-.707-.293L5.222 6.636a1 1 0 0 1 1.414-1.414L8.05 6.636a1 1 0 0 1-.707 1.707z"
/>
<path
fill="url(#m)"
d="m15.828 10.172-5.657 5.657a4 4 0 1 0 5.657-5.657z"
/>
<path
fill="url(#n)"
d="M6.011 37a9.152 9.152 0 0 0 9.079 9h23.637A7.329 7.329 0 0 0 46 38.615 7.5 7.5 0 0 0 45.82 37z"
/>
</g>
</svg>
More icons in the same style and category