moon icon
moon from IconPark by ByteDance · Color · Weather · Apache-2.0 Free for personal and commercial use.
- Name
- moon
- Set
- IconPark
- Style
- Color
- Category
- Weather
- Viewbox
- 48×48
- License
- Apache 2.0
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 IconsmoonHumbleiconsmoonIconPark OutlinemoonIconPark SolidmoonIconPark TwoTonemoonIonIconsmoonJam Icons
More weather icons from IconPark
Use the moon icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><path fill="#2F88FF" stroke="#000" stroke-linejoin="round" stroke-width="4" d="M28.0527 4.41085C22.5828 5.83695 18.5455 10.8106 18.5455 16.7273C18.5455 23.7564 24.2436 29.4545 31.2727 29.4545C37.1894 29.4545 42.1631 25.4172 43.5891 19.9473C43.8585 21.256 44 22.6115 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C25.3885 4 26.744 4.14149 28.0527 4.41085Z"/></svg>
React
import type { SVGProps } from "react";
export function IconParkMoon(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><path fill="#2F88FF" stroke="#000" strokeLinejoin="round" strokeWidth="4" d="M28.0527 4.41085C22.5828 5.83695 18.5455 10.8106 18.5455 16.7273C18.5455 23.7564 24.2436 29.4545 31.2727 29.4545C37.1894 29.4545 42.1631 25.4172 43.5891 19.9473C43.8585 21.256 44 22.6115 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C25.3885 4 26.744 4.14149 28.0527 4.41085Z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><path fill="#2F88FF" stroke="#000" stroke-linejoin="round" stroke-width="4" d="M28.0527 4.41085C22.5828 5.83695 18.5455 10.8106 18.5455 16.7273C18.5455 23.7564 24.2436 29.4545 31.2727 29.4545C37.1894 29.4545 42.1631 25.4172 43.5891 19.9473C43.8585 21.256 44 22.6115 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C25.3885 4 26.744 4.14149 28.0527 4.41085Z"/></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%2048%2048%22%3E%3Cpath%20fill%3D%22%232F88FF%22%20stroke%3D%22%23000%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M28.0527%204.41085C22.5828%205.83695%2018.5455%2010.8106%2018.5455%2016.7273C18.5455%2023.7564%2024.2436%2029.4545%2031.2727%2029.4545C37.1894%2029.4545%2042.1631%2025.4172%2043.5891%2019.9473C43.8585%2021.256%2044%2022.6115%2044%2024C44%2035.0457%2035.0457%2044%2024%2044C12.9543%2044%204%2035.0457%204%2024C4%2012.9543%2012.9543%204%2024%204C25.3885%204%2026.744%204.14149%2028.0527%204.41085Z%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%2048%2048%22%3E%3Cpath%20fill%3D%22%232F88FF%22%20stroke%3D%22%23000%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M28.0527%204.41085C22.5828%205.83695%2018.5455%2010.8106%2018.5455%2016.7273C18.5455%2023.7564%2024.2436%2029.4545%2031.2727%2029.4545C37.1894%2029.4545%2042.1631%2025.4172%2043.5891%2019.9473C43.8585%2021.256%2044%2022.6115%2044%2024C44%2035.0457%2035.0457%2044%2024%2044C12.9543%2044%204%2035.0457%204%2024C4%2012.9543%2012.9543%204%2024%204C25.3885%204%2026.744%204.14149%2028.0527%204.41085Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/icon-park/moon.svg?color=%231a73e8&size=48
