moon icon

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

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

The same icon in other sets

moonAkar IconsmoonBootstrap IconsmoonBoxIcons v2moonBoxIcons v2 SolidmoonCarbonmoon-fillEva IconsmoonFramework7 IconsmoonFont Awesome 6 RegularmoonFeather Iconsmooncss.ggmoonHeroIconsmoonHuge IconsmoonHumbleiconsmoonIonIconsmoonJam IconsmoonLine AwesomemoonMaterial Line IconsmoonSVG LogosmoonLucidemoonMage IconsmoonMajesticonsmoon-fillMingCute Iconmoon-16OcticonsmoonPhosphor

More objects icons from Font Awesome 6 Solid

cubecubesfutbolgemlocklock-openringscrolltoiletunlock

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="M223.5 32C100 32 0 132.3 0 256s100 224 223.5 224c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"/></svg>

React

import type { SVGProps } from "react";

export function Fa6SolidMoon(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="M223.5 32C100 32 0 132.3 0 256s100 224 223.5 224c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 384 512"><path fill="currentColor" d="M223.5 32C100 32 0 132.3 0 256s100 224 223.5 224c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"/></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%22M223.5%2032C100%2032%200%20132.3%200%20256s100%20224%20223.5%20224c60.6%200%20115.5-24.2%20155.8-63.4c5-4.9%206.3-12.5%203.1-18.7s-10.1-9.7-17-8.5c-9.8%201.7-19.8%202.6-30.1%202.6c-96.9%200-175.5-78.8-175.5-176c0-65.8%2036-123.1%2089.3-153.3c6.1-3.5%209.2-10.5%207.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z%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%22M223.5%2032C100%2032%200%20132.3%200%20256s100%20224%20223.5%20224c60.6%200%20115.5-24.2%20155.8-63.4c5-4.9%206.3-12.5%203.1-18.7s-10.1-9.7-17-8.5c-9.8%201.7-19.8%202.6-30.1%202.6c-96.9%200-175.5-78.8-175.5-176c0-65.8%2036-123.1%2089.3-153.3c6.1-3.5%209.2-10.5%207.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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