cloudy sunny icon

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

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

1 other variant in TDesign Icons

Related icons in TDesign Icons

cloudy-day cloudy-night cloudy-night-rain cloudy-rain

Use the cloudy sunny 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.42a5 5 0 0 1 8.238 5.663c1.101.97 1.803 2.374 1.803 3.949C21 18.647 18.502 21 15.5 21H5.6C3.095 21 1 19.036 1 16.534c0-1.83 1.125-3.376 2.706-4.071A6 6 0 0 1 3.7 12.2C3.7 8.74 6.601 6 10.1 6q.436 0 .859.056M10.1 8c-2.466 0-4.4 1.916-4.4 4.2q0 .394.073.766l.184.955l-.95.21C3.832 14.391 3 15.391 3 16.534C3 17.86 4.128 19 5.6 19h9.9c1.969 0 3.5-1.527 3.5-3.333c0-1.216-.686-2.297-1.741-2.883a3.6 3.6 0 0 0-1.818-.45l-.854.013l-.147-.841c-.282-1.622-1.55-2.956-3.234-3.372A4.6 4.6 0 0 0 10.1 8M21 8h2.004v2.004H21z"/></svg>

React

import type { SVGProps } from "react";

export function TdesignCloudySunnyFilled(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.42a5 5 0 0 1 8.238 5.663c1.101.97 1.803 2.374 1.803 3.949C21 18.647 18.502 21 15.5 21H5.6C3.095 21 1 19.036 1 16.534c0-1.83 1.125-3.376 2.706-4.071A6 6 0 0 1 3.7 12.2C3.7 8.74 6.601 6 10.1 6q.436 0 .859.056M10.1 8c-2.466 0-4.4 1.916-4.4 4.2q0 .394.073.766l.184.955l-.95.21C3.832 14.391 3 15.391 3 16.534C3 17.86 4.128 19 5.6 19h9.9c1.969 0 3.5-1.527 3.5-3.333c0-1.216-.686-2.297-1.741-2.883a3.6 3.6 0 0 0-1.818-.45l-.854.013l-.147-.841c-.282-1.622-1.55-2.956-3.234-3.372A4.6 4.6 0 0 0 10.1 8M21 8h2.004v2.004H21z"/></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.42a5 5 0 0 1 8.238 5.663c1.101.97 1.803 2.374 1.803 3.949C21 18.647 18.502 21 15.5 21H5.6C3.095 21 1 19.036 1 16.534c0-1.83 1.125-3.376 2.706-4.071A6 6 0 0 1 3.7 12.2C3.7 8.74 6.601 6 10.1 6q.436 0 .859.056M10.1 8c-2.466 0-4.4 1.916-4.4 4.2q0 .394.073.766l.184.955l-.95.21C3.832 14.391 3 15.391 3 16.534C3 17.86 4.128 19 5.6 19h9.9c1.969 0 3.5-1.527 3.5-3.333c0-1.216-.686-2.297-1.741-2.883a3.6 3.6 0 0 0-1.818-.45l-.854.013l-.147-.841c-.282-1.622-1.55-2.956-3.234-3.372A4.6 4.6 0 0 0 10.1 8M21 8h2.004v2.004H21z"/></svg>
</template>

CSS

.icon-cloudy-sunny-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.42a5%205%200%200%201%208.238%205.663c1.101.97%201.803%202.374%201.803%203.949C21%2018.647%2018.502%2021%2015.5%2021H5.6C3.095%2021%201%2019.036%201%2016.534c0-1.83%201.125-3.376%202.706-4.071A6%206%200%200%201%203.7%2012.2C3.7%208.74%206.601%206%2010.1%206q.436%200%20.859.056M10.1%208c-2.466%200-4.4%201.916-4.4%204.2q0%20.394.073.766l.184.955l-.95.21C3.832%2014.391%203%2015.391%203%2016.534C3%2017.86%204.128%2019%205.6%2019h9.9c1.969%200%203.5-1.527%203.5-3.333c0-1.216-.686-2.297-1.741-2.883a3.6%203.6%200%200%200-1.818-.45l-.854.013l-.147-.841c-.282-1.622-1.55-2.956-3.234-3.372A4.6%204.6%200%200%200%2010.1%208M21%208h2.004v2.004H21z%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.42a5%205%200%200%201%208.238%205.663c1.101.97%201.803%202.374%201.803%203.949C21%2018.647%2018.502%2021%2015.5%2021H5.6C3.095%2021%201%2019.036%201%2016.534c0-1.83%201.125-3.376%202.706-4.071A6%206%200%200%201%203.7%2012.2C3.7%208.74%206.601%206%2010.1%206q.436%200%20.859.056M10.1%208c-2.466%200-4.4%201.916-4.4%204.2q0%20.394.073.766l.184.955l-.95.21C3.832%2014.391%203%2015.391%203%2016.534C3%2017.86%204.128%2019%205.6%2019h9.9c1.969%200%203.5-1.527%203.5-3.333c0-1.216-.686-2.297-1.741-2.883a3.6%203.6%200%200%200-1.818-.45l-.854.013l-.147-.841c-.282-1.622-1.55-2.956-3.234-3.372A4.6%204.6%200%200%200%2010.1%208M21%208h2.004v2.004H21z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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