cloud rain icon

cloud-rain from Line Awesome by Icons8 · Line · Weather · Apache-2.0 Free for personal and commercial use.

Name: cloud-rain
Set: Line Awesome
Style: Line
Category: Weather
Viewbox: 32×32
License: Apache 2.0
Aliases: cloud-rain-solid

The same icon in other sets

cloud-rainBootstrap Icons cloud-rainBoxIcons v2 cloud-rainBoxIcons v2 Solid cloud-rainFramework7 Icons cloud-rainFont Awesome 6 Solid cloud-rainFeather Icons cloud-rainHuge Icons cloud-rainJam Icons cloud-rainLucide cloud-rainPhosphor cloud-rain-boldSolar cloud-rainTabler Icons cloud-rainUnicons

More weather icons from Line Awesome

Use the cloud rain icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 4c-3.227 0-6.027 2.258-6.781 5.344a5.1 5.1 0 0 0-2.813 2.687C2.91 11.773 0 14.555 0 18c0 3.309 2.691 6 6 6h2l1-2H6c-2.207 0-4-1.793-4-4a4.003 4.003 0 0 1 4.875-3.906l1 .219l.188-.97c.246-1.105 1.144-1.984 2.25-2.25l.656-.155l.094-.657C11.421 7.848 13.543 6 16 6a4.99 4.99 0 0 1 4.469 2.75l.375.781l.843-.281c.47-.164.895-.25 1.313-.25c2.207 0 4 1.793 4 4c0 .04.004.09 0 .125c-.008.066-.023.117-.031.188l-.063.718l.657.281A4.003 4.003 0 0 1 26 22h-2l1 2h1c3.309 0 6-2.691 6-6a5.98 5.98 0 0 0-3-5.188C28.895 9.595 26.242 7 23 7c-.39 0-.793.04-1.188.125A6.94 6.94 0 0 0 16 4m2 10s-2 2.895-2 4s.895 2 2 2s2-.895 2-2s-2-4-2-4m-5 5s-2 2.895-2 4s.895 2 2 2s2-.895 2-2s-2-4-2-4m8 3s-2 2.895-2 4s.895 2 2 2s2-.895 2-2s-2-4-2-4"/></svg>

React

import type { SVGProps } from "react";

export function LaCloudRain(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="M16 4c-3.227 0-6.027 2.258-6.781 5.344a5.1 5.1 0 0 0-2.813 2.687C2.91 11.773 0 14.555 0 18c0 3.309 2.691 6 6 6h2l1-2H6c-2.207 0-4-1.793-4-4a4.003 4.003 0 0 1 4.875-3.906l1 .219l.188-.97c.246-1.105 1.144-1.984 2.25-2.25l.656-.155l.094-.657C11.421 7.848 13.543 6 16 6a4.99 4.99 0 0 1 4.469 2.75l.375.781l.843-.281c.47-.164.895-.25 1.313-.25c2.207 0 4 1.793 4 4c0 .04.004.09 0 .125c-.008.066-.023.117-.031.188l-.063.718l.657.281A4.003 4.003 0 0 1 26 22h-2l1 2h1c3.309 0 6-2.691 6-6a5.98 5.98 0 0 0-3-5.188C28.895 9.595 26.242 7 23 7c-.39 0-.793.04-1.188.125A6.94 6.94 0 0 0 16 4m2 10s-2 2.895-2 4s.895 2 2 2s2-.895 2-2s-2-4-2-4m-5 5s-2 2.895-2 4s.895 2 2 2s2-.895 2-2s-2-4-2-4m8 3s-2 2.895-2 4s.895 2 2 2s2-.895 2-2s-2-4-2-4"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 4c-3.227 0-6.027 2.258-6.781 5.344a5.1 5.1 0 0 0-2.813 2.687C2.91 11.773 0 14.555 0 18c0 3.309 2.691 6 6 6h2l1-2H6c-2.207 0-4-1.793-4-4a4.003 4.003 0 0 1 4.875-3.906l1 .219l.188-.97c.246-1.105 1.144-1.984 2.25-2.25l.656-.155l.094-.657C11.421 7.848 13.543 6 16 6a4.99 4.99 0 0 1 4.469 2.75l.375.781l.843-.281c.47-.164.895-.25 1.313-.25c2.207 0 4 1.793 4 4c0 .04.004.09 0 .125c-.008.066-.023.117-.031.188l-.063.718l.657.281A4.003 4.003 0 0 1 26 22h-2l1 2h1c3.309 0 6-2.691 6-6a5.98 5.98 0 0 0-3-5.188C28.895 9.595 26.242 7 23 7c-.39 0-.793.04-1.188.125A6.94 6.94 0 0 0 16 4m2 10s-2 2.895-2 4s.895 2 2 2s2-.895 2-2s-2-4-2-4m-5 5s-2 2.895-2 4s.895 2 2 2s2-.895 2-2s-2-4-2-4m8 3s-2 2.895-2 4s.895 2 2 2s2-.895 2-2s-2-4-2-4"/></svg>
</template>

CSS

.icon-cloud-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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M16%204c-3.227%200-6.027%202.258-6.781%205.344a5.1%205.1%200%200%200-2.813%202.687C2.91%2011.773%200%2014.555%200%2018c0%203.309%202.691%206%206%206h2l1-2H6c-2.207%200-4-1.793-4-4a4.003%204.003%200%200%201%204.875-3.906l1%20.219l.188-.97c.246-1.105%201.144-1.984%202.25-2.25l.656-.155l.094-.657C11.421%207.848%2013.543%206%2016%206a4.99%204.99%200%200%201%204.469%202.75l.375.781l.843-.281c.47-.164.895-.25%201.313-.25c2.207%200%204%201.793%204%204c0%20.04.004.09%200%20.125c-.008.066-.023.117-.031.188l-.063.718l.657.281A4.003%204.003%200%200%201%2026%2022h-2l1%202h1c3.309%200%206-2.691%206-6a5.98%205.98%200%200%200-3-5.188C28.895%209.595%2026.242%207%2023%207c-.39%200-.793.04-1.188.125A6.94%206.94%200%200%200%2016%204m2%2010s-2%202.895-2%204s.895%202%202%202s2-.895%202-2s-2-4-2-4m-5%205s-2%202.895-2%204s.895%202%202%202s2-.895%202-2s-2-4-2-4m8%203s-2%202.895-2%204s.895%202%202%202s2-.895%202-2s-2-4-2-4%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%22M16%204c-3.227%200-6.027%202.258-6.781%205.344a5.1%205.1%200%200%200-2.813%202.687C2.91%2011.773%200%2014.555%200%2018c0%203.309%202.691%206%206%206h2l1-2H6c-2.207%200-4-1.793-4-4a4.003%204.003%200%200%201%204.875-3.906l1%20.219l.188-.97c.246-1.105%201.144-1.984%202.25-2.25l.656-.155l.094-.657C11.421%207.848%2013.543%206%2016%206a4.99%204.99%200%200%201%204.469%202.75l.375.781l.843-.281c.47-.164.895-.25%201.313-.25c2.207%200%204%201.793%204%204c0%20.04.004.09%200%20.125c-.008.066-.023.117-.031.188l-.063.718l.657.281A4.003%204.003%200%200%201%2026%2022h-2l1%202h1c3.309%200%206-2.691%206-6a5.98%205.98%200%200%200-3-5.188C28.895%209.595%2026.242%207%2023%207c-.39%200-.793.04-1.188.125A6.94%206.94%200%200%200%2016%204m2%2010s-2%202.895-2%204s.895%202%202%202s2-.895%202-2s-2-4-2-4m-5%205s-2%202.895-2%204s.895%202%202%202s2-.895%202-2s-2-4-2-4m8%203s-2%202.895-2%204s.895%202%202%202s2-.895%202-2s-2-4-2-4%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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