cloud sun rain icon

cloud-sun-rain from Unicons by Iconscout · Line · Weather · Apache-2.0 Free for personal and commercial use.

Name
cloud-sun-rain
Set
Unicons
Style
Line
Category
Weather
Viewbox
24×24
License
Apache 2.0

The same icon in other sets

cloud-sun-rainFramework7 Iconscloud-sun-rainFont Awesome 6 Solidcloud-sun-rainFont Awesome Solidcloud-sun-rainHuge Iconscloud-sun-rainLine Awesomecloud-sun-rainLucidecloud-sun-rainMyna UI Icons

More weather icons from Unicons

celsiuscloudcloud-drizzlecloud-hailcloud-meatballcloud-mooncloud-moon-hailcloud-moon-meatballcloud-moon-raincloud-moon-showerscloud-moon-tearcloud-raincloud-rain-suncloud-showerscloud-showers-altcloud-showers-heavycloud-suncloud-sun-hailcloud-sun-meatballcloud-sun-rain-altcloud-sun-tearcloud-windcloudsdesert

Use the cloud sun rain icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M7.5 15a1 1 0 0 0-1 1v1a1 1 0 0 0 2 0v-1a1 1 0 0 0-1-1M22 7h-1.1a5.2 5.2 0 0 0-.73-1.76l.83-.77a1 1 0 1 0-1.42-1.42l-.77.78A5 5 0 0 0 17 3.1V2a1 1 0 0 0-2 0v1.1a5.2 5.2 0 0 0-1.76.73l-.77-.78a1 1 0 0 0-1.42 1.42l.78.77a5.1 5.1 0 0 0-.77 2A5.8 5.8 0 0 0 9.5 7a6 6 0 0 0-5.94 5.13a3.5 3.5 0 0 0-.46 6.58a1.1 1.1 0 0 0 .4.08a1 1 0 0 0 .4-1.92A1.48 1.48 0 0 1 3 15.5A1.5 1.5 0 0 1 4.5 14a1 1 0 0 0 1-1a4 4 0 0 1 7.78-1.29a1 1 0 0 0 .78.67a2.32 2.32 0 0 1 .94 4.23a1 1 0 0 0 1.1 1.68a4.34 4.34 0 0 0 1.9-3.62a4.4 4.4 0 0 0-.45-1.92a5.2 5.2 0 0 0 1.21-.58l.77.78A1 1 0 0 0 21 13a1 1 0 0 0 0-1.42l-.78-.77A5 5 0 0 0 20.9 9H22a1 1 0 0 0 0-2m-3.87 3.12A3 3 0 0 1 16 11h-.06a4 4 0 0 0-1-.46a5.93 5.93 0 0 0-2-2.38V8a3 3 0 0 1 .87-2.12a3.1 3.1 0 0 1 4.25 0a3 3 0 0 1 0 4.25ZM7.5 20a1 1 0 0 0-1 1v1a1 1 0 0 0 2 0v-1a1 1 0 0 0-1-1m4-1a1 1 0 0 0-1 1v1a1 1 0 0 0 2 0v-1a1 1 0 0 0-1-1m0-5a1 1 0 0 0-1 1v1a1 1 0 0 0 2 0v-1a1 1 0 0 0-1-1"/></svg>

React

import type { SVGProps } from "react";

export function UilCloudSunRain(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M7.5 15a1 1 0 0 0-1 1v1a1 1 0 0 0 2 0v-1a1 1 0 0 0-1-1M22 7h-1.1a5.2 5.2 0 0 0-.73-1.76l.83-.77a1 1 0 1 0-1.42-1.42l-.77.78A5 5 0 0 0 17 3.1V2a1 1 0 0 0-2 0v1.1a5.2 5.2 0 0 0-1.76.73l-.77-.78a1 1 0 0 0-1.42 1.42l.78.77a5.1 5.1 0 0 0-.77 2A5.8 5.8 0 0 0 9.5 7a6 6 0 0 0-5.94 5.13a3.5 3.5 0 0 0-.46 6.58a1.1 1.1 0 0 0 .4.08a1 1 0 0 0 .4-1.92A1.48 1.48 0 0 1 3 15.5A1.5 1.5 0 0 1 4.5 14a1 1 0 0 0 1-1a4 4 0 0 1 7.78-1.29a1 1 0 0 0 .78.67a2.32 2.32 0 0 1 .94 4.23a1 1 0 0 0 1.1 1.68a4.34 4.34 0 0 0 1.9-3.62a4.4 4.4 0 0 0-.45-1.92a5.2 5.2 0 0 0 1.21-.58l.77.78A1 1 0 0 0 21 13a1 1 0 0 0 0-1.42l-.78-.77A5 5 0 0 0 20.9 9H22a1 1 0 0 0 0-2m-3.87 3.12A3 3 0 0 1 16 11h-.06a4 4 0 0 0-1-.46a5.93 5.93 0 0 0-2-2.38V8a3 3 0 0 1 .87-2.12a3.1 3.1 0 0 1 4.25 0a3 3 0 0 1 0 4.25ZM7.5 20a1 1 0 0 0-1 1v1a1 1 0 0 0 2 0v-1a1 1 0 0 0-1-1m4-1a1 1 0 0 0-1 1v1a1 1 0 0 0 2 0v-1a1 1 0 0 0-1-1m0-5a1 1 0 0 0-1 1v1a1 1 0 0 0 2 0v-1a1 1 0 0 0-1-1"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M7.5 15a1 1 0 0 0-1 1v1a1 1 0 0 0 2 0v-1a1 1 0 0 0-1-1M22 7h-1.1a5.2 5.2 0 0 0-.73-1.76l.83-.77a1 1 0 1 0-1.42-1.42l-.77.78A5 5 0 0 0 17 3.1V2a1 1 0 0 0-2 0v1.1a5.2 5.2 0 0 0-1.76.73l-.77-.78a1 1 0 0 0-1.42 1.42l.78.77a5.1 5.1 0 0 0-.77 2A5.8 5.8 0 0 0 9.5 7a6 6 0 0 0-5.94 5.13a3.5 3.5 0 0 0-.46 6.58a1.1 1.1 0 0 0 .4.08a1 1 0 0 0 .4-1.92A1.48 1.48 0 0 1 3 15.5A1.5 1.5 0 0 1 4.5 14a1 1 0 0 0 1-1a4 4 0 0 1 7.78-1.29a1 1 0 0 0 .78.67a2.32 2.32 0 0 1 .94 4.23a1 1 0 0 0 1.1 1.68a4.34 4.34 0 0 0 1.9-3.62a4.4 4.4 0 0 0-.45-1.92a5.2 5.2 0 0 0 1.21-.58l.77.78A1 1 0 0 0 21 13a1 1 0 0 0 0-1.42l-.78-.77A5 5 0 0 0 20.9 9H22a1 1 0 0 0 0-2m-3.87 3.12A3 3 0 0 1 16 11h-.06a4 4 0 0 0-1-.46a5.93 5.93 0 0 0-2-2.38V8a3 3 0 0 1 .87-2.12a3.1 3.1 0 0 1 4.25 0a3 3 0 0 1 0 4.25ZM7.5 20a1 1 0 0 0-1 1v1a1 1 0 0 0 2 0v-1a1 1 0 0 0-1-1m4-1a1 1 0 0 0-1 1v1a1 1 0 0 0 2 0v-1a1 1 0 0 0-1-1m0-5a1 1 0 0 0-1 1v1a1 1 0 0 0 2 0v-1a1 1 0 0 0-1-1"/></svg>
</template>

CSS

.icon-cloud-sun-rain {
  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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M7.5%2015a1%201%200%200%200-1%201v1a1%201%200%200%200%202%200v-1a1%201%200%200%200-1-1M22%207h-1.1a5.2%205.2%200%200%200-.73-1.76l.83-.77a1%201%200%201%200-1.42-1.42l-.77.78A5%205%200%200%200%2017%203.1V2a1%201%200%200%200-2%200v1.1a5.2%205.2%200%200%200-1.76.73l-.77-.78a1%201%200%200%200-1.42%201.42l.78.77a5.1%205.1%200%200%200-.77%202A5.8%205.8%200%200%200%209.5%207a6%206%200%200%200-5.94%205.13a3.5%203.5%200%200%200-.46%206.58a1.1%201.1%200%200%200%20.4.08a1%201%200%200%200%20.4-1.92A1.48%201.48%200%200%201%203%2015.5A1.5%201.5%200%200%201%204.5%2014a1%201%200%200%200%201-1a4%204%200%200%201%207.78-1.29a1%201%200%200%200%20.78.67a2.32%202.32%200%200%201%20.94%204.23a1%201%200%200%200%201.1%201.68a4.34%204.34%200%200%200%201.9-3.62a4.4%204.4%200%200%200-.45-1.92a5.2%205.2%200%200%200%201.21-.58l.77.78A1%201%200%200%200%2021%2013a1%201%200%200%200%200-1.42l-.78-.77A5%205%200%200%200%2020.9%209H22a1%201%200%200%200%200-2m-3.87%203.12A3%203%200%200%201%2016%2011h-.06a4%204%200%200%200-1-.46a5.93%205.93%200%200%200-2-2.38V8a3%203%200%200%201%20.87-2.12a3.1%203.1%200%200%201%204.25%200a3%203%200%200%201%200%204.25ZM7.5%2020a1%201%200%200%200-1%201v1a1%201%200%200%200%202%200v-1a1%201%200%200%200-1-1m4-1a1%201%200%200%200-1%201v1a1%201%200%200%200%202%200v-1a1%201%200%200%200-1-1m0-5a1%201%200%200%200-1%201v1a1%201%200%200%200%202%200v-1a1%201%200%200%200-1-1%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M7.5%2015a1%201%200%200%200-1%201v1a1%201%200%200%200%202%200v-1a1%201%200%200%200-1-1M22%207h-1.1a5.2%205.2%200%200%200-.73-1.76l.83-.77a1%201%200%201%200-1.42-1.42l-.77.78A5%205%200%200%200%2017%203.1V2a1%201%200%200%200-2%200v1.1a5.2%205.2%200%200%200-1.76.73l-.77-.78a1%201%200%200%200-1.42%201.42l.78.77a5.1%205.1%200%200%200-.77%202A5.8%205.8%200%200%200%209.5%207a6%206%200%200%200-5.94%205.13a3.5%203.5%200%200%200-.46%206.58a1.1%201.1%200%200%200%20.4.08a1%201%200%200%200%20.4-1.92A1.48%201.48%200%200%201%203%2015.5A1.5%201.5%200%200%201%204.5%2014a1%201%200%200%200%201-1a4%204%200%200%201%207.78-1.29a1%201%200%200%200%20.78.67a2.32%202.32%200%200%201%20.94%204.23a1%201%200%200%200%201.1%201.68a4.34%204.34%200%200%200%201.9-3.62a4.4%204.4%200%200%200-.45-1.92a5.2%205.2%200%200%200%201.21-.58l.77.78A1%201%200%200%200%2021%2013a1%201%200%200%200%200-1.42l-.78-.77A5%205%200%200%200%2020.9%209H22a1%201%200%200%200%200-2m-3.87%203.12A3%203%200%200%201%2016%2011h-.06a4%204%200%200%200-1-.46a5.93%205.93%200%200%200-2-2.38V8a3%203%200%200%201%20.87-2.12a3.1%203.1%200%200%201%204.25%200a3%203%200%200%201%200%204.25ZM7.5%2020a1%201%200%200%200-1%201v1a1%201%200%200%200%202%200v-1a1%201%200%200%200-1-1m4-1a1%201%200%200%200-1%201v1a1%201%200%200%200%202%200v-1a1%201%200%200%200-1-1m0-5a1%201%200%200%200-1%201v1a1%201%200%200%200%202%200v-1a1%201%200%200%200-1-1%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/uil/cloud-sun-rain.svg?color=%231a73e8&size=48