cloud moon icon

cloud-moon from Font Awesome 6 Solid by Dave Gandy · Regular · Halloween · CC-BY-4.0 Attribution required.

Name: cloud-moon
Set: Font Awesome 6 Solid
Style: Regular
Category: Halloween
Viewbox: 640×512
License: CC BY 4.0

The same icon in other sets

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

More halloween icons from Font Awesome 6 Solid

broom mask cloud-meatball cloud-moon-rain cloud-rain cloud-showers-heavy cloud-sun cloud-sun-rain cloud-arrow-down cloud-arrow-up cloud-bolt cloud-showers-water

Use the cloud moon icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 512"><path fill="currentColor" d="M495.8 0c5.5 0 10.9.2 16.3.7c7 .6 12.8 5.7 14.3 12.5s-1.6 13.9-7.7 17.3c-44.4 25.2-74.4 73-74.4 127.8c0 81 65.5 146.6 146.2 146.6c8.6 0 17-.7 25.1-2.1c6.9-1.2 13.8 2.2 17 8.5s1.9 13.8-3.1 18.7c-34.5 33.6-81.7 54.4-133.6 54.4c-9.3 0-18.4-.7-27.4-1.9c-11.2-22.6-29.8-40.9-52.6-51.7c-2.7-58.5-50.3-105.3-109.2-106.7c-1.7-10.4-2.6-21-2.6-31.8C304 86.1 389.8 0 495.8 0m-47.9 431.9c0 44.2-35.8 80-80 80H96c-53 0-96-43-96-96c0-47.6 34.6-87 80-94.6V320c0-53 43-96 96-96c34.9 0 65.4 18.6 82.2 46.4c13-9.1 28.8-14.4 45.8-14.4c44.2 0 80 35.8 80 80c0 5.9-.6 11.7-1.9 17.2c37.4 6.7 65.8 39.4 65.8 78.7"/></svg>

React

import type { SVGProps } from "react";

export function Fa6SolidCloudMoon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 512"><path fill="currentColor" d="M495.8 0c5.5 0 10.9.2 16.3.7c7 .6 12.8 5.7 14.3 12.5s-1.6 13.9-7.7 17.3c-44.4 25.2-74.4 73-74.4 127.8c0 81 65.5 146.6 146.2 146.6c8.6 0 17-.7 25.1-2.1c6.9-1.2 13.8 2.2 17 8.5s1.9 13.8-3.1 18.7c-34.5 33.6-81.7 54.4-133.6 54.4c-9.3 0-18.4-.7-27.4-1.9c-11.2-22.6-29.8-40.9-52.6-51.7c-2.7-58.5-50.3-105.3-109.2-106.7c-1.7-10.4-2.6-21-2.6-31.8C304 86.1 389.8 0 495.8 0m-47.9 431.9c0 44.2-35.8 80-80 80H96c-53 0-96-43-96-96c0-47.6 34.6-87 80-94.6V320c0-53 43-96 96-96c34.9 0 65.4 18.6 82.2 46.4c13-9.1 28.8-14.4 45.8-14.4c44.2 0 80 35.8 80 80c0 5.9-.6 11.7-1.9 17.2c37.4 6.7 65.8 39.4 65.8 78.7"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 512"><path fill="currentColor" d="M495.8 0c5.5 0 10.9.2 16.3.7c7 .6 12.8 5.7 14.3 12.5s-1.6 13.9-7.7 17.3c-44.4 25.2-74.4 73-74.4 127.8c0 81 65.5 146.6 146.2 146.6c8.6 0 17-.7 25.1-2.1c6.9-1.2 13.8 2.2 17 8.5s1.9 13.8-3.1 18.7c-34.5 33.6-81.7 54.4-133.6 54.4c-9.3 0-18.4-.7-27.4-1.9c-11.2-22.6-29.8-40.9-52.6-51.7c-2.7-58.5-50.3-105.3-109.2-106.7c-1.7-10.4-2.6-21-2.6-31.8C304 86.1 389.8 0 495.8 0m-47.9 431.9c0 44.2-35.8 80-80 80H96c-53 0-96-43-96-96c0-47.6 34.6-87 80-94.6V320c0-53 43-96 96-96c34.9 0 65.4 18.6 82.2 46.4c13-9.1 28.8-14.4 45.8-14.4c44.2 0 80 35.8 80 80c0 5.9-.6 11.7-1.9 17.2c37.4 6.7 65.8 39.4 65.8 78.7"/></svg>
</template>

CSS

.icon-cloud-moon {
  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%20640%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M495.8%200c5.5%200%2010.9.2%2016.3.7c7%20.6%2012.8%205.7%2014.3%2012.5s-1.6%2013.9-7.7%2017.3c-44.4%2025.2-74.4%2073-74.4%20127.8c0%2081%2065.5%20146.6%20146.2%20146.6c8.6%200%2017-.7%2025.1-2.1c6.9-1.2%2013.8%202.2%2017%208.5s1.9%2013.8-3.1%2018.7c-34.5%2033.6-81.7%2054.4-133.6%2054.4c-9.3%200-18.4-.7-27.4-1.9c-11.2-22.6-29.8-40.9-52.6-51.7c-2.7-58.5-50.3-105.3-109.2-106.7c-1.7-10.4-2.6-21-2.6-31.8C304%2086.1%20389.8%200%20495.8%200m-47.9%20431.9c0%2044.2-35.8%2080-80%2080H96c-53%200-96-43-96-96c0-47.6%2034.6-87%2080-94.6V320c0-53%2043-96%2096-96c34.9%200%2065.4%2018.6%2082.2%2046.4c13-9.1%2028.8-14.4%2045.8-14.4c44.2%200%2080%2035.8%2080%2080c0%205.9-.6%2011.7-1.9%2017.2c37.4%206.7%2065.8%2039.4%2065.8%2078.7%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%20640%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M495.8%200c5.5%200%2010.9.2%2016.3.7c7%20.6%2012.8%205.7%2014.3%2012.5s-1.6%2013.9-7.7%2017.3c-44.4%2025.2-74.4%2073-74.4%20127.8c0%2081%2065.5%20146.6%20146.2%20146.6c8.6%200%2017-.7%2025.1-2.1c6.9-1.2%2013.8%202.2%2017%208.5s1.9%2013.8-3.1%2018.7c-34.5%2033.6-81.7%2054.4-133.6%2054.4c-9.3%200-18.4-.7-27.4-1.9c-11.2-22.6-29.8-40.9-52.6-51.7c-2.7-58.5-50.3-105.3-109.2-106.7c-1.7-10.4-2.6-21-2.6-31.8C304%2086.1%20389.8%200%20495.8%200m-47.9%20431.9c0%2044.2-35.8%2080-80%2080H96c-53%200-96-43-96-96c0-47.6%2034.6-87%2080-94.6V320c0-53%2043-96%2096-96c34.9%200%2065.4%2018.6%2082.2%2046.4c13-9.1%2028.8-14.4%2045.8-14.4c44.2%200%2080%2035.8%2080%2080c0%205.9-.6%2011.7-1.9%2017.2c37.4%206.7%2065.8%2039.4%2065.8%2078.7%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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