moon icon
moon from Radix Icons by WorkOS · Outline · MIT Free for personal and commercial use.
- Name
- moon
- Set
- Radix Icons
- Style
- Outline
- Viewbox
- 15×15
- License
- MIT
The same icon in other sets
moonAkar Iconsmoon-filledAnt Design IconsmoonBootstrap IconsmoonBoxIcons v2moonBoxIcons v2 SolidmoonCarbonmoonElement Plusmoon-fillEva IconsmoonFramework7 IconsmoonFont Awesome 6 RegularmoonFont Awesome 6 SolidmoonFont Awesome RegularmoonFont Awesome SolidmoonFeather Iconsmoon-outlineFlowbite Iconsmooncss.ggmoonHeroIconsmoonHuge IconsmoonHumbleiconsmoonIconParkmoonIconPark OutlinemoonIconPark SolidmoonIconPark TwoTonemoonIonIcons
Use the moon icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 15 15"><path fill="currentColor" d="m8.544.982l.292.053l.265.06l.324.09l.253.082l.276.104l.24.101l.113.052l.327.165l.322.185l.292.19l.245.178l.32.26l.223.2l.16.158l.12.124l.163.18l.2.24l.152.2q.307.419.545.883l.075.148l.077.166l.113.268a6.5 6.5 0 0 1 .385 1.415l.036.277q.04.365.04.74a6.6 6.6 0 0 1-6.982 6.588l-.268-.02l-.316-.04a6.6 6.6 0 0 1-1.104-.26l-.243-.086l-.304-.122l-.26-.12l-.263-.135a7 7 0 0 1-.371-.217l-.176-.115l-.187-.13l-.12-.09l-.19-.15l-.259-.225l-.072-.066a7 7 0 0 1-.21-.206c-.15-.154-.03-.405.183-.416q.376-.021.739-.081a6.603 6.603 0 0 0 4.33-10.268c-.122-.176.004-.424.217-.4zm1.288 1.424A7.6 7.6 0 0 1 10.35 6.2l.128.006a1.25 1.25 0 1 1-.786 2.305q-.085.181-.179.358a.75.75 0 1 1-.77 1.17a7.6 7.6 0 0 1-3.66 2.513A5.6 5.6 0 1 0 9.832 2.405M1.5 6.1a.4.4 0 0 1 .4.4v.6h.6l.081.009a.4.4 0 0 1 0 .783l-.08.009h-.6v.6a.401.401 0 0 1-.801 0v-.6H.5a.401.401 0 0 1 0-.801h.6v-.6c0-.22.18-.4.4-.4m4-3a.4.4 0 0 1 .4.4v.6h.6l.081.009a.4.4 0 0 1 0 .783l-.08.009h-.6v.6a.401.401 0 0 1-.801 0v-.6h-.6a.401.401 0 0 1 0-.801h.6v-.6c0-.22.18-.4.4-.4m-3-3a.4.4 0 0 1 .4.4v.6h.6l.081.009a.4.4 0 0 1 0 .783l-.08.009h-.6v.6a.401.401 0 0 1-.801 0v-.6h-.6a.401.401 0 0 1 0-.801h.6V.5c0-.22.18-.4.4-.4"/></svg>
React
import type { SVGProps } from "react";
export function RadixIconsMoon(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 15 15"><path fill="currentColor" d="m8.544.982l.292.053l.265.06l.324.09l.253.082l.276.104l.24.101l.113.052l.327.165l.322.185l.292.19l.245.178l.32.26l.223.2l.16.158l.12.124l.163.18l.2.24l.152.2q.307.419.545.883l.075.148l.077.166l.113.268a6.5 6.5 0 0 1 .385 1.415l.036.277q.04.365.04.74a6.6 6.6 0 0 1-6.982 6.588l-.268-.02l-.316-.04a6.6 6.6 0 0 1-1.104-.26l-.243-.086l-.304-.122l-.26-.12l-.263-.135a7 7 0 0 1-.371-.217l-.176-.115l-.187-.13l-.12-.09l-.19-.15l-.259-.225l-.072-.066a7 7 0 0 1-.21-.206c-.15-.154-.03-.405.183-.416q.376-.021.739-.081a6.603 6.603 0 0 0 4.33-10.268c-.122-.176.004-.424.217-.4zm1.288 1.424A7.6 7.6 0 0 1 10.35 6.2l.128.006a1.25 1.25 0 1 1-.786 2.305q-.085.181-.179.358a.75.75 0 1 1-.77 1.17a7.6 7.6 0 0 1-3.66 2.513A5.6 5.6 0 1 0 9.832 2.405M1.5 6.1a.4.4 0 0 1 .4.4v.6h.6l.081.009a.4.4 0 0 1 0 .783l-.08.009h-.6v.6a.401.401 0 0 1-.801 0v-.6H.5a.401.401 0 0 1 0-.801h.6v-.6c0-.22.18-.4.4-.4m4-3a.4.4 0 0 1 .4.4v.6h.6l.081.009a.4.4 0 0 1 0 .783l-.08.009h-.6v.6a.401.401 0 0 1-.801 0v-.6h-.6a.401.401 0 0 1 0-.801h.6v-.6c0-.22.18-.4.4-.4m-3-3a.4.4 0 0 1 .4.4v.6h.6l.081.009a.4.4 0 0 1 0 .783l-.08.009h-.6v.6a.401.401 0 0 1-.801 0v-.6h-.6a.401.401 0 0 1 0-.801h.6V.5c0-.22.18-.4.4-.4"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 15 15"><path fill="currentColor" d="m8.544.982l.292.053l.265.06l.324.09l.253.082l.276.104l.24.101l.113.052l.327.165l.322.185l.292.19l.245.178l.32.26l.223.2l.16.158l.12.124l.163.18l.2.24l.152.2q.307.419.545.883l.075.148l.077.166l.113.268a6.5 6.5 0 0 1 .385 1.415l.036.277q.04.365.04.74a6.6 6.6 0 0 1-6.982 6.588l-.268-.02l-.316-.04a6.6 6.6 0 0 1-1.104-.26l-.243-.086l-.304-.122l-.26-.12l-.263-.135a7 7 0 0 1-.371-.217l-.176-.115l-.187-.13l-.12-.09l-.19-.15l-.259-.225l-.072-.066a7 7 0 0 1-.21-.206c-.15-.154-.03-.405.183-.416q.376-.021.739-.081a6.603 6.603 0 0 0 4.33-10.268c-.122-.176.004-.424.217-.4zm1.288 1.424A7.6 7.6 0 0 1 10.35 6.2l.128.006a1.25 1.25 0 1 1-.786 2.305q-.085.181-.179.358a.75.75 0 1 1-.77 1.17a7.6 7.6 0 0 1-3.66 2.513A5.6 5.6 0 1 0 9.832 2.405M1.5 6.1a.4.4 0 0 1 .4.4v.6h.6l.081.009a.4.4 0 0 1 0 .783l-.08.009h-.6v.6a.401.401 0 0 1-.801 0v-.6H.5a.401.401 0 0 1 0-.801h.6v-.6c0-.22.18-.4.4-.4m4-3a.4.4 0 0 1 .4.4v.6h.6l.081.009a.4.4 0 0 1 0 .783l-.08.009h-.6v.6a.401.401 0 0 1-.801 0v-.6h-.6a.401.401 0 0 1 0-.801h.6v-.6c0-.22.18-.4.4-.4m-3-3a.4.4 0 0 1 .4.4v.6h.6l.081.009a.4.4 0 0 1 0 .783l-.08.009h-.6v.6a.401.401 0 0 1-.801 0v-.6h-.6a.401.401 0 0 1 0-.801h.6V.5c0-.22.18-.4.4-.4"/></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%2015%2015%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m8.544.982l.292.053l.265.06l.324.09l.253.082l.276.104l.24.101l.113.052l.327.165l.322.185l.292.19l.245.178l.32.26l.223.2l.16.158l.12.124l.163.18l.2.24l.152.2q.307.419.545.883l.075.148l.077.166l.113.268a6.5%206.5%200%200%201%20.385%201.415l.036.277q.04.365.04.74a6.6%206.6%200%200%201-6.982%206.588l-.268-.02l-.316-.04a6.6%206.6%200%200%201-1.104-.26l-.243-.086l-.304-.122l-.26-.12l-.263-.135a7%207%200%200%201-.371-.217l-.176-.115l-.187-.13l-.12-.09l-.19-.15l-.259-.225l-.072-.066a7%207%200%200%201-.21-.206c-.15-.154-.03-.405.183-.416q.376-.021.739-.081a6.603%206.603%200%200%200%204.33-10.268c-.122-.176.004-.424.217-.4zm1.288%201.424A7.6%207.6%200%200%201%2010.35%206.2l.128.006a1.25%201.25%200%201%201-.786%202.305q-.085.181-.179.358a.75.75%200%201%201-.77%201.17a7.6%207.6%200%200%201-3.66%202.513A5.6%205.6%200%201%200%209.832%202.405M1.5%206.1a.4.4%200%200%201%20.4.4v.6h.6l.081.009a.4.4%200%200%201%200%20.783l-.08.009h-.6v.6a.401.401%200%200%201-.801%200v-.6H.5a.401.401%200%200%201%200-.801h.6v-.6c0-.22.18-.4.4-.4m4-3a.4.4%200%200%201%20.4.4v.6h.6l.081.009a.4.4%200%200%201%200%20.783l-.08.009h-.6v.6a.401.401%200%200%201-.801%200v-.6h-.6a.401.401%200%200%201%200-.801h.6v-.6c0-.22.18-.4.4-.4m-3-3a.4.4%200%200%201%20.4.4v.6h.6l.081.009a.4.4%200%200%201%200%20.783l-.08.009h-.6v.6a.401.401%200%200%201-.801%200v-.6h-.6a.401.401%200%200%201%200-.801h.6V.5c0-.22.18-.4.4-.4%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%2015%2015%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m8.544.982l.292.053l.265.06l.324.09l.253.082l.276.104l.24.101l.113.052l.327.165l.322.185l.292.19l.245.178l.32.26l.223.2l.16.158l.12.124l.163.18l.2.24l.152.2q.307.419.545.883l.075.148l.077.166l.113.268a6.5%206.5%200%200%201%20.385%201.415l.036.277q.04.365.04.74a6.6%206.6%200%200%201-6.982%206.588l-.268-.02l-.316-.04a6.6%206.6%200%200%201-1.104-.26l-.243-.086l-.304-.122l-.26-.12l-.263-.135a7%207%200%200%201-.371-.217l-.176-.115l-.187-.13l-.12-.09l-.19-.15l-.259-.225l-.072-.066a7%207%200%200%201-.21-.206c-.15-.154-.03-.405.183-.416q.376-.021.739-.081a6.603%206.603%200%200%200%204.33-10.268c-.122-.176.004-.424.217-.4zm1.288%201.424A7.6%207.6%200%200%201%2010.35%206.2l.128.006a1.25%201.25%200%201%201-.786%202.305q-.085.181-.179.358a.75.75%200%201%201-.77%201.17a7.6%207.6%200%200%201-3.66%202.513A5.6%205.6%200%201%200%209.832%202.405M1.5%206.1a.4.4%200%200%201%20.4.4v.6h.6l.081.009a.4.4%200%200%201%200%20.783l-.08.009h-.6v.6a.401.401%200%200%201-.801%200v-.6H.5a.401.401%200%200%201%200-.801h.6v-.6c0-.22.18-.4.4-.4m4-3a.4.4%200%200%201%20.4.4v.6h.6l.081.009a.4.4%200%200%201%200%20.783l-.08.009h-.6v.6a.401.401%200%200%201-.801%200v-.6h-.6a.401.401%200%200%201%200-.801h.6v-.6c0-.22.18-.4.4-.4m-3-3a.4.4%200%200%201%20.4.4v.6h.6l.081.009a.4.4%200%200%201%200%20.783l-.08.009h-.6v.6a.401.401%200%200%201-.801%200v-.6h-.6a.401.401%200%200%201%200-.801h.6V.5c0-.22.18-.4.4-.4%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/radix-icons/moon.svg?color=%231a73e8&size=48
