moon icon

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

Name
moon
Set
Font Awesome 6 Regular
Style
Regular
Category
Objects
Viewbox
384×512
License
CC BY 4.0

The same icon in other sets

moonAkar Iconsmoon-filledAnt Design IconsmoonBootstrap IconsmoonBoxIcons v2moonBoxIcons v2 SolidmoonCarbonmoonElement Plusmoon-fillEva IconsmoonFramework7 IconsmoonFont Awesome 6 SolidmoonFont Awesome RegularmoonFont Awesome SolidmoonFeather Iconsmoon-outlineFlowbite Iconsmooncss.ggmoonHeroIconsmoonHuge IconsmoonHumbleiconsmoonIconParkmoonIconPark OutlinemoonIconPark SolidmoonIconPark TwoTonemoonIonIconsmoonJam Icons

More objects icons from Font Awesome 6 Regular

futbolgem

Use the moon icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 384 512"><path fill="currentColor" d="M144.7 98.7c-21 34.1-33.1 74.3-33.1 117.3c0 98 62.8 181.4 150.4 211.7c-12.4 2.8-25.3 4.3-38.6 4.3C126.6 432 48 353.3 48 256c0-68.9 39.4-128.4 96.8-157.3zm62.1-66C91.1 41.2 0 137.9 0 256c0 123.7 100 224 223.5 224c47.8 0 92-15 128.4-40.6c1.9-1.3 3.7-2.7 5.5-4c4.8-3.6 9.4-7.4 13.9-11.4c2.7-2.4 5.3-4.8 7.9-7.3c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-3.7.6-7.4 1.2-11.1 1.6c-5 .5-10.1.9-15.3 1h-4c-96.8-.2-175.2-78.9-175.2-176c0-54.8 24.9-103.7 64.1-136c1-.9 2.1-1.7 3.2-2.6c4-3.2 8.2-6.2 12.5-9c3.1-2 6.3-4 9.6-5.8c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-3.6-.3-7.1-.5-10.7-.6c-2.7-.1-5.5-.1-8.2-.1c-3.3 0-6.5.1-9.8.2c-2.3.1-4.6.2-6.9.4z"/></svg>

React

import type { SVGProps } from "react";

export function Fa6RegularMoon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 384 512"><path fill="currentColor" d="M144.7 98.7c-21 34.1-33.1 74.3-33.1 117.3c0 98 62.8 181.4 150.4 211.7c-12.4 2.8-25.3 4.3-38.6 4.3C126.6 432 48 353.3 48 256c0-68.9 39.4-128.4 96.8-157.3zm62.1-66C91.1 41.2 0 137.9 0 256c0 123.7 100 224 223.5 224c47.8 0 92-15 128.4-40.6c1.9-1.3 3.7-2.7 5.5-4c4.8-3.6 9.4-7.4 13.9-11.4c2.7-2.4 5.3-4.8 7.9-7.3c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-3.7.6-7.4 1.2-11.1 1.6c-5 .5-10.1.9-15.3 1h-4c-96.8-.2-175.2-78.9-175.2-176c0-54.8 24.9-103.7 64.1-136c1-.9 2.1-1.7 3.2-2.6c4-3.2 8.2-6.2 12.5-9c3.1-2 6.3-4 9.6-5.8c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-3.6-.3-7.1-.5-10.7-.6c-2.7-.1-5.5-.1-8.2-.1c-3.3 0-6.5.1-9.8.2c-2.3.1-4.6.2-6.9.4z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 384 512"><path fill="currentColor" d="M144.7 98.7c-21 34.1-33.1 74.3-33.1 117.3c0 98 62.8 181.4 150.4 211.7c-12.4 2.8-25.3 4.3-38.6 4.3C126.6 432 48 353.3 48 256c0-68.9 39.4-128.4 96.8-157.3zm62.1-66C91.1 41.2 0 137.9 0 256c0 123.7 100 224 223.5 224c47.8 0 92-15 128.4-40.6c1.9-1.3 3.7-2.7 5.5-4c4.8-3.6 9.4-7.4 13.9-11.4c2.7-2.4 5.3-4.8 7.9-7.3c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-3.7.6-7.4 1.2-11.1 1.6c-5 .5-10.1.9-15.3 1h-4c-96.8-.2-175.2-78.9-175.2-176c0-54.8 24.9-103.7 64.1-136c1-.9 2.1-1.7 3.2-2.6c4-3.2 8.2-6.2 12.5-9c3.1-2 6.3-4 9.6-5.8c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-3.6-.3-7.1-.5-10.7-.6c-2.7-.1-5.5-.1-8.2-.1c-3.3 0-6.5.1-9.8.2c-2.3.1-4.6.2-6.9.4z"/></svg>
</template>

CSS

.icon-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%20384%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M144.7%2098.7c-21%2034.1-33.1%2074.3-33.1%20117.3c0%2098%2062.8%20181.4%20150.4%20211.7c-12.4%202.8-25.3%204.3-38.6%204.3C126.6%20432%2048%20353.3%2048%20256c0-68.9%2039.4-128.4%2096.8-157.3zm62.1-66C91.1%2041.2%200%20137.9%200%20256c0%20123.7%20100%20224%20223.5%20224c47.8%200%2092-15%20128.4-40.6c1.9-1.3%203.7-2.7%205.5-4c4.8-3.6%209.4-7.4%2013.9-11.4c2.7-2.4%205.3-4.8%207.9-7.3c5-4.9%206.3-12.5%203.1-18.7s-10.1-9.7-17-8.5c-3.7.6-7.4%201.2-11.1%201.6c-5%20.5-10.1.9-15.3%201h-4c-96.8-.2-175.2-78.9-175.2-176c0-54.8%2024.9-103.7%2064.1-136c1-.9%202.1-1.7%203.2-2.6c4-3.2%208.2-6.2%2012.5-9c3.1-2%206.3-4%209.6-5.8c6.1-3.5%209.2-10.5%207.7-17.3s-7.3-11.9-14.3-12.5c-3.6-.3-7.1-.5-10.7-.6c-2.7-.1-5.5-.1-8.2-.1c-3.3%200-6.5.1-9.8.2c-2.3.1-4.6.2-6.9.4z%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%20384%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M144.7%2098.7c-21%2034.1-33.1%2074.3-33.1%20117.3c0%2098%2062.8%20181.4%20150.4%20211.7c-12.4%202.8-25.3%204.3-38.6%204.3C126.6%20432%2048%20353.3%2048%20256c0-68.9%2039.4-128.4%2096.8-157.3zm62.1-66C91.1%2041.2%200%20137.9%200%20256c0%20123.7%20100%20224%20223.5%20224c47.8%200%2092-15%20128.4-40.6c1.9-1.3%203.7-2.7%205.5-4c4.8-3.6%209.4-7.4%2013.9-11.4c2.7-2.4%205.3-4.8%207.9-7.3c5-4.9%206.3-12.5%203.1-18.7s-10.1-9.7-17-8.5c-3.7.6-7.4%201.2-11.1%201.6c-5%20.5-10.1.9-15.3%201h-4c-96.8-.2-175.2-78.9-175.2-176c0-54.8%2024.9-103.7%2064.1-136c1-.9%202.1-1.7%203.2-2.6c4-3.2%208.2-6.2%2012.5-9c3.1-2%206.3-4%209.6-5.8c6.1-3.5%209.2-10.5%207.7-17.3s-7.3-11.9-14.3-12.5c-3.6-.3-7.1-.5-10.7-.6c-2.7-.1-5.5-.1-8.2-.1c-3.3%200-6.5.1-9.8.2c-2.3.1-4.6.2-6.9.4z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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