cloud moon icon

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

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

5 other variants in Phosphor

cloud-moon cloud-moon-bold cloud-moon-duotone cloud-moon-fill cloud-moon-light

The same icon in other sets

cloud-moonBootstrap Icons cloud-moonFramework7 Icons cloud-moonFont Awesome 6 Solid cloud-moonFont Awesome Solid cloud-moonLine Awesome cloud-moonLucide cloud-moonMyna UI Icons cloud-moonPixelarticons cloud-moonUnicons

Related icons in Phosphor

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

Use the cloud moon icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M172 76a72 72 0 0 0-16 1.81a68 68 0 0 0-52.68-64.09a4 4 0 0 0-4.79 4.8a60.05 60.05 0 0 1-72 72a4 4 0 0 0-4.8 4.8a68.2 68.2 0 0 0 34.44 44.78A48 48 0 0 0 92 220h80a72 72 0 0 0 0-144M31.22 99.44A70 70 0 0 0 40 100a68.07 68.07 0 0 0 68-68a70 70 0 0 0-.56-8.79A59.66 59.66 0 0 1 148 80v.11a72.27 72.27 0 0 0-44.49 45.28A48.3 48.3 0 0 0 92 124a47.75 47.75 0 0 0-29.61 10.26a60.2 60.2 0 0 1-31.17-34.82M172 212H92a40 40 0 1 1 9.43-78.88a71.6 71.6 0 0 0-1.43 10.65a4 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 172 212"/></svg>

React

import type { SVGProps } from "react";

export function PhCloudMoonThin(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="M172 76a72 72 0 0 0-16 1.81a68 68 0 0 0-52.68-64.09a4 4 0 0 0-4.79 4.8a60.05 60.05 0 0 1-72 72a4 4 0 0 0-4.8 4.8a68.2 68.2 0 0 0 34.44 44.78A48 48 0 0 0 92 220h80a72 72 0 0 0 0-144M31.22 99.44A70 70 0 0 0 40 100a68.07 68.07 0 0 0 68-68a70 70 0 0 0-.56-8.79A59.66 59.66 0 0 1 148 80v.11a72.27 72.27 0 0 0-44.49 45.28A48.3 48.3 0 0 0 92 124a47.75 47.75 0 0 0-29.61 10.26a60.2 60.2 0 0 1-31.17-34.82M172 212H92a40 40 0 1 1 9.43-78.88a71.6 71.6 0 0 0-1.43 10.65a4 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 172 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="M172 76a72 72 0 0 0-16 1.81a68 68 0 0 0-52.68-64.09a4 4 0 0 0-4.79 4.8a60.05 60.05 0 0 1-72 72a4 4 0 0 0-4.8 4.8a68.2 68.2 0 0 0 34.44 44.78A48 48 0 0 0 92 220h80a72 72 0 0 0 0-144M31.22 99.44A70 70 0 0 0 40 100a68.07 68.07 0 0 0 68-68a70 70 0 0 0-.56-8.79A59.66 59.66 0 0 1 148 80v.11a72.27 72.27 0 0 0-44.49 45.28A48.3 48.3 0 0 0 92 124a47.75 47.75 0 0 0-29.61 10.26a60.2 60.2 0 0 1-31.17-34.82M172 212H92a40 40 0 1 1 9.43-78.88a71.6 71.6 0 0 0-1.43 10.65a4 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 172 212"/></svg>
</template>

CSS

.icon-cloud-moon-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%22M172%2076a72%2072%200%200%200-16%201.81a68%2068%200%200%200-52.68-64.09a4%204%200%200%200-4.79%204.8a60.05%2060.05%200%200%201-72%2072a4%204%200%200%200-4.8%204.8a68.2%2068.2%200%200%200%2034.44%2044.78A48%2048%200%200%200%2092%20220h80a72%2072%200%200%200%200-144M31.22%2099.44A70%2070%200%200%200%2040%20100a68.07%2068.07%200%200%200%2068-68a70%2070%200%200%200-.56-8.79A59.66%2059.66%200%200%201%20148%2080v.11a72.27%2072.27%200%200%200-44.49%2045.28A48.3%2048.3%200%200%200%2092%20124a47.75%2047.75%200%200%200-29.61%2010.26a60.2%2060.2%200%200%201-31.17-34.82M172%20212H92a40%2040%200%201%201%209.43-78.88a71.6%2071.6%200%200%200-1.43%2010.65a4%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%20172%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%22M172%2076a72%2072%200%200%200-16%201.81a68%2068%200%200%200-52.68-64.09a4%204%200%200%200-4.79%204.8a60.05%2060.05%200%200%201-72%2072a4%204%200%200%200-4.8%204.8a68.2%2068.2%200%200%200%2034.44%2044.78A48%2048%200%200%200%2092%20220h80a72%2072%200%200%200%200-144M31.22%2099.44A70%2070%200%200%200%2040%20100a68.07%2068.07%200%200%200%2068-68a70%2070%200%200%200-.56-8.79A59.66%2059.66%200%200%201%20148%2080v.11a72.27%2072.27%200%200%200-44.49%2045.28A48.3%2048.3%200%200%200%2092%20124a47.75%2047.75%200%200%200-29.61%2010.26a60.2%2060.2%200%200%201-31.17-34.82M172%20212H92a40%2040%200%201%201%209.43-78.88a71.6%2071.6%200%200%200-1.43%2010.65a4%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%20172%20212%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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