Pixelarticons

Moon Pixel Art Icon

A moon icon for dark-mode toggles, nighttime and sleep settings, do-not-disturb controls and evening weather forecasts.

weather Free 2 variants

Tags

nightdarksleep

Style variants

base

Outline · rounded corners

solid

Filled · rounded corners

Get Pro

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" />

Related icons