cloud sun icon

cloud-sun-thin from Phosphor by Phosphor Icons · Thin · MIT Free for personal and commercial use.

Name: cloud-sun-thin
Set: Phosphor
Style: Thin
Viewbox: 256×256
License: MIT

5 other variants in Phosphor

cloud-sun cloud-sun-bold cloud-sun-duotone cloud-sun-fill cloud-sun-light

The same icon in other sets

cloud-sunBootstrap Icons cloud-sunFramework7 Icons cloud-sunFont Awesome 6 Solid cloud-sunFont Awesome Solid cloud-sunHumbleicons cloud-sunLine Awesome cloud-sunLucide cloud-sunMyna UI Icons cloud-sunPixelarticons cloud-sun-boldSolar cloud-sunUnicons

Related icons in Phosphor

cloud-arrow-down cloud-arrow-up cloud-check cloud-fog cloud-lightning cloud-moon cloud-rain cloud-slash cloud-snow cloud-warning cloud-x

Use the cloud sun icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M164 76a71.9 71.9 0 0 0-22.14 3.48A51.8 51.8 0 0 0 129 63.83l11.56-16.51a4 4 0 0 0-6.56-4.59l-11.55 16.51A52 52 0 0 0 96 52c-1.71 0-3.4.09-5.06.25l-3.5-19.85a4 4 0 0 0-7.88 1.39l3.5 19.84A52.2 52.2 0 0 0 55.85 71L39.32 59.42A4 4 0 0 0 34.73 66l16.53 11.54A51.63 51.63 0 0 0 44 104c0 1.69.09 3.37.25 5l-19.85 3.5a4 4 0 0 0 .69 7.94a4 4 0 0 0 .7-.06l19.85-3.5A52.1 52.1 0 0 0 54 134.6A48 48 0 0 0 84 220h80a72 72 0 0 0 0-144M52 104a44 44 0 0 1 82.33-21.61a72.23 72.23 0 0 0-38.82 43A48.3 48.3 0 0 0 84 124a47.76 47.76 0 0 0-23.4 6.11A44 44 0 0 1 52 104m112 108H84a40 40 0 1 1 9.43-78.88A71.6 71.6 0 0 0 92 143.77a4 4 0 0 0 8 .46a64.3 64.3 0 0 1 2-12.67c0-.12.07-.24.09-.36A64.06 64.06 0 1 1 164 212"/></svg>

React

import type { SVGProps } from "react";

export function PhCloudSunThin(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M164 76a71.9 71.9 0 0 0-22.14 3.48A51.8 51.8 0 0 0 129 63.83l11.56-16.51a4 4 0 0 0-6.56-4.59l-11.55 16.51A52 52 0 0 0 96 52c-1.71 0-3.4.09-5.06.25l-3.5-19.85a4 4 0 0 0-7.88 1.39l3.5 19.84A52.2 52.2 0 0 0 55.85 71L39.32 59.42A4 4 0 0 0 34.73 66l16.53 11.54A51.63 51.63 0 0 0 44 104c0 1.69.09 3.37.25 5l-19.85 3.5a4 4 0 0 0 .69 7.94a4 4 0 0 0 .7-.06l19.85-3.5A52.1 52.1 0 0 0 54 134.6A48 48 0 0 0 84 220h80a72 72 0 0 0 0-144M52 104a44 44 0 0 1 82.33-21.61a72.23 72.23 0 0 0-38.82 43A48.3 48.3 0 0 0 84 124a47.76 47.76 0 0 0-23.4 6.11A44 44 0 0 1 52 104m112 108H84a40 40 0 1 1 9.43-78.88A71.6 71.6 0 0 0 92 143.77a4 4 0 0 0 8 .46a64.3 64.3 0 0 1 2-12.67c0-.12.07-.24.09-.36A64.06 64.06 0 1 1 164 212"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M164 76a71.9 71.9 0 0 0-22.14 3.48A51.8 51.8 0 0 0 129 63.83l11.56-16.51a4 4 0 0 0-6.56-4.59l-11.55 16.51A52 52 0 0 0 96 52c-1.71 0-3.4.09-5.06.25l-3.5-19.85a4 4 0 0 0-7.88 1.39l3.5 19.84A52.2 52.2 0 0 0 55.85 71L39.32 59.42A4 4 0 0 0 34.73 66l16.53 11.54A51.63 51.63 0 0 0 44 104c0 1.69.09 3.37.25 5l-19.85 3.5a4 4 0 0 0 .69 7.94a4 4 0 0 0 .7-.06l19.85-3.5A52.1 52.1 0 0 0 54 134.6A48 48 0 0 0 84 220h80a72 72 0 0 0 0-144M52 104a44 44 0 0 1 82.33-21.61a72.23 72.23 0 0 0-38.82 43A48.3 48.3 0 0 0 84 124a47.76 47.76 0 0 0-23.4 6.11A44 44 0 0 1 52 104m112 108H84a40 40 0 1 1 9.43-78.88A71.6 71.6 0 0 0 92 143.77a4 4 0 0 0 8 .46a64.3 64.3 0 0 1 2-12.67c0-.12.07-.24.09-.36A64.06 64.06 0 1 1 164 212"/></svg>
</template>

CSS

.icon-cloud-sun-thin {
  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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M164%2076a71.9%2071.9%200%200%200-22.14%203.48A51.8%2051.8%200%200%200%20129%2063.83l11.56-16.51a4%204%200%200%200-6.56-4.59l-11.55%2016.51A52%2052%200%200%200%2096%2052c-1.71%200-3.4.09-5.06.25l-3.5-19.85a4%204%200%200%200-7.88%201.39l3.5%2019.84A52.2%2052.2%200%200%200%2055.85%2071L39.32%2059.42A4%204%200%200%200%2034.73%2066l16.53%2011.54A51.63%2051.63%200%200%200%2044%20104c0%201.69.09%203.37.25%205l-19.85%203.5a4%204%200%200%200%20.69%207.94a4%204%200%200%200%20.7-.06l19.85-3.5A52.1%2052.1%200%200%200%2054%20134.6A48%2048%200%200%200%2084%20220h80a72%2072%200%200%200%200-144M52%20104a44%2044%200%200%201%2082.33-21.61a72.23%2072.23%200%200%200-38.82%2043A48.3%2048.3%200%200%200%2084%20124a47.76%2047.76%200%200%200-23.4%206.11A44%2044%200%200%201%2052%20104m112%20108H84a40%2040%200%201%201%209.43-78.88A71.6%2071.6%200%200%200%2092%20143.77a4%204%200%200%200%208%20.46a64.3%2064.3%200%200%201%202-12.67c0-.12.07-.24.09-.36A64.06%2064.06%200%201%201%20164%20212%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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M164%2076a71.9%2071.9%200%200%200-22.14%203.48A51.8%2051.8%200%200%200%20129%2063.83l11.56-16.51a4%204%200%200%200-6.56-4.59l-11.55%2016.51A52%2052%200%200%200%2096%2052c-1.71%200-3.4.09-5.06.25l-3.5-19.85a4%204%200%200%200-7.88%201.39l3.5%2019.84A52.2%2052.2%200%200%200%2055.85%2071L39.32%2059.42A4%204%200%200%200%2034.73%2066l16.53%2011.54A51.63%2051.63%200%200%200%2044%20104c0%201.69.09%203.37.25%205l-19.85%203.5a4%204%200%200%200%20.69%207.94a4%204%200%200%200%20.7-.06l19.85-3.5A52.1%2052.1%200%200%200%2054%20134.6A48%2048%200%200%200%2084%20220h80a72%2072%200%200%200%200-144M52%20104a44%2044%200%200%201%2082.33-21.61a72.23%2072.23%200%200%200-38.82%2043A48.3%2048.3%200%200%200%2084%20124a47.76%2047.76%200%200%200-23.4%206.11A44%2044%200%200%201%2052%20104m112%20108H84a40%2040%200%201%201%209.43-78.88A71.6%2071.6%200%200%200%2092%20143.77a4%204%200%200%200%208%20.46a64.3%2064.3%200%200%201%202-12.67c0-.12.07-.24.09-.36A64.06%2064.06%200%201%201%20164%20212%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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