Moon Pixel Art Icon
A moon icon for dark-mode toggles, nighttime and sleep settings, do-not-disturb controls and evening weather forecasts.
Tags
nightdarksleep
Style variants
base
Outline · rounded corners
Base, sharp, solid or glyph: see how the four styles differ and which to use.
About the Moon icon
A crescent moon, the most familiar symbol for nighttime and dark themes. Beyond weather forecasts, it is the near-universal icon for a dark-mode toggle, a sleep timer, or a 'do not disturb' setting. Paired with a sun it forms the light and dark theme switcher pair most users recognize instantly. Moon-star adds a star for a celestial feel; moon-stars shows multiple stars for a clearer night sky. Use the plain moon for clean, minimal night imagery without additional detail.
Usage
<!-- HTML -->
<img src="pixelarticons/svg/moon.svg" width="24" height="24" alt="Moon" />
<!-- React -->
import { Moon } from 'pixelarticons/react'
<!-- Sizes: 24px, 48px, 72px, 96px (multiples of 24) -->
<img src="moon.svg" width="48" height="48" style="image-rendering: pixelated" />