cloudy rain icon

cloudy-rain-filled from TDesign Icons by TDesign · Filled · MIT Free for personal and commercial use.

Name
cloudy-rain-filled
Set
TDesign Icons
Style
Filled
Viewbox
24×24
License
MIT

1 other variant in TDesign Icons

Related icons in TDesign Icons

Use the cloudy rain icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M16.003 1v2.004H14V1zm-5.95 1.635l1.417 1.417l-1.417 1.417l-1.417-1.417zm9.898 0l1.416 1.416l-1.415 1.417l-1.418-1.416zm-8.992 3.42A7 7 0 0 0 10.1 6c-3.499 0-6.4 2.74-6.4 6.2q0 .132.006.263C2.125 13.158 1 14.703 1 16.533c0 1.776 1.063 3.288 2.568 4.009l.902.431l.864-1.804l-.902-.431C3.566 18.323 3 17.48 3 16.534c0-1.143.832-2.143 2.007-2.403l.95-.21l-.184-.955A4 4 0 0 1 5.7 12.2C5.7 9.916 7.634 8 10.1 8q.576.002 1.106.134c1.683.416 2.952 1.75 3.234 3.372l.147.841l.854-.013h.059a3.6 3.6 0 0 1 1.759.45C18.314 13.37 19 14.451 19 15.667c0 1.344-.84 2.526-2.088 3.051l-.922.388l.775 1.843l.922-.387C19.618 19.749 21 17.877 21 15.667c0-1.575-.702-2.979-1.803-3.949a5 5 0 0 0-8.238-5.663M21 8h2.004v2.004H21zm-9.002 5.998h2.004v2.004h-2.004zm-5 2h2.004v2.004H6.998zm5 3h2.004v2.004h-2.004zm-5 2h2.004v2.004H6.998z"/></svg>

React

import type { SVGProps } from "react";

export function TdesignCloudyRainFilled(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="M16.003 1v2.004H14V1zm-5.95 1.635l1.417 1.417l-1.417 1.417l-1.417-1.417zm9.898 0l1.416 1.416l-1.415 1.417l-1.418-1.416zm-8.992 3.42A7 7 0 0 0 10.1 6c-3.499 0-6.4 2.74-6.4 6.2q0 .132.006.263C2.125 13.158 1 14.703 1 16.533c0 1.776 1.063 3.288 2.568 4.009l.902.431l.864-1.804l-.902-.431C3.566 18.323 3 17.48 3 16.534c0-1.143.832-2.143 2.007-2.403l.95-.21l-.184-.955A4 4 0 0 1 5.7 12.2C5.7 9.916 7.634 8 10.1 8q.576.002 1.106.134c1.683.416 2.952 1.75 3.234 3.372l.147.841l.854-.013h.059a3.6 3.6 0 0 1 1.759.45C18.314 13.37 19 14.451 19 15.667c0 1.344-.84 2.526-2.088 3.051l-.922.388l.775 1.843l.922-.387C19.618 19.749 21 17.877 21 15.667c0-1.575-.702-2.979-1.803-3.949a5 5 0 0 0-8.238-5.663M21 8h2.004v2.004H21zm-9.002 5.998h2.004v2.004h-2.004zm-5 2h2.004v2.004H6.998zm5 3h2.004v2.004h-2.004zm-5 2h2.004v2.004H6.998z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M16.003 1v2.004H14V1zm-5.95 1.635l1.417 1.417l-1.417 1.417l-1.417-1.417zm9.898 0l1.416 1.416l-1.415 1.417l-1.418-1.416zm-8.992 3.42A7 7 0 0 0 10.1 6c-3.499 0-6.4 2.74-6.4 6.2q0 .132.006.263C2.125 13.158 1 14.703 1 16.533c0 1.776 1.063 3.288 2.568 4.009l.902.431l.864-1.804l-.902-.431C3.566 18.323 3 17.48 3 16.534c0-1.143.832-2.143 2.007-2.403l.95-.21l-.184-.955A4 4 0 0 1 5.7 12.2C5.7 9.916 7.634 8 10.1 8q.576.002 1.106.134c1.683.416 2.952 1.75 3.234 3.372l.147.841l.854-.013h.059a3.6 3.6 0 0 1 1.759.45C18.314 13.37 19 14.451 19 15.667c0 1.344-.84 2.526-2.088 3.051l-.922.388l.775 1.843l.922-.387C19.618 19.749 21 17.877 21 15.667c0-1.575-.702-2.979-1.803-3.949a5 5 0 0 0-8.238-5.663M21 8h2.004v2.004H21zm-9.002 5.998h2.004v2.004h-2.004zm-5 2h2.004v2.004H6.998zm5 3h2.004v2.004h-2.004zm-5 2h2.004v2.004H6.998z"/></svg>
</template>

CSS

.icon-cloudy-rain-filled {
  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%22M16.003%201v2.004H14V1zm-5.95%201.635l1.417%201.417l-1.417%201.417l-1.417-1.417zm9.898%200l1.416%201.416l-1.415%201.417l-1.418-1.416zm-8.992%203.42A7%207%200%200%200%2010.1%206c-3.499%200-6.4%202.74-6.4%206.2q0%20.132.006.263C2.125%2013.158%201%2014.703%201%2016.533c0%201.776%201.063%203.288%202.568%204.009l.902.431l.864-1.804l-.902-.431C3.566%2018.323%203%2017.48%203%2016.534c0-1.143.832-2.143%202.007-2.403l.95-.21l-.184-.955A4%204%200%200%201%205.7%2012.2C5.7%209.916%207.634%208%2010.1%208q.576.002%201.106.134c1.683.416%202.952%201.75%203.234%203.372l.147.841l.854-.013h.059a3.6%203.6%200%200%201%201.759.45C18.314%2013.37%2019%2014.451%2019%2015.667c0%201.344-.84%202.526-2.088%203.051l-.922.388l.775%201.843l.922-.387C19.618%2019.749%2021%2017.877%2021%2015.667c0-1.575-.702-2.979-1.803-3.949a5%205%200%200%200-8.238-5.663M21%208h2.004v2.004H21zm-9.002%205.998h2.004v2.004h-2.004zm-5%202h2.004v2.004H6.998zm5%203h2.004v2.004h-2.004zm-5%202h2.004v2.004H6.998z%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%22M16.003%201v2.004H14V1zm-5.95%201.635l1.417%201.417l-1.417%201.417l-1.417-1.417zm9.898%200l1.416%201.416l-1.415%201.417l-1.418-1.416zm-8.992%203.42A7%207%200%200%200%2010.1%206c-3.499%200-6.4%202.74-6.4%206.2q0%20.132.006.263C2.125%2013.158%201%2014.703%201%2016.533c0%201.776%201.063%203.288%202.568%204.009l.902.431l.864-1.804l-.902-.431C3.566%2018.323%203%2017.48%203%2016.534c0-1.143.832-2.143%202.007-2.403l.95-.21l-.184-.955A4%204%200%200%201%205.7%2012.2C5.7%209.916%207.634%208%2010.1%208q.576.002%201.106.134c1.683.416%202.952%201.75%203.234%203.372l.147.841l.854-.013h.059a3.6%203.6%200%200%201%201.759.45C18.314%2013.37%2019%2014.451%2019%2015.667c0%201.344-.84%202.526-2.088%203.051l-.922.388l.775%201.843l.922-.387C19.618%2019.749%2021%2017.877%2021%2015.667c0-1.575-.702-2.979-1.803-3.949a5%205%200%200%200-8.238-5.663M21%208h2.004v2.004H21zm-9.002%205.998h2.004v2.004h-2.004zm-5%202h2.004v2.004H6.998zm5%203h2.004v2.004h-2.004zm-5%202h2.004v2.004H6.998z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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