The Heroicons moon icon depicts a crescent moon, commonly used to represent nighttime, dark mode, or sleep-related features in user interfaces.
Common uses
- Dark mode toggle
- Nighttime status indicator
- Sleep timer setting
Use it in React
Install
npm i @heroicons/reactImport & render
import { MoonIcon } from '@heroicons/react/24/outline';
<MoonIcon className="size-6" />Styles
Heroicons ships this icon in 4 styles — each its own import:
24/outline
<MoonIcon className="size-6" />24/solid
<MoonIcon className="size-6" />20/solid
<MoonIcon className="size-6" />16/solid
<MoonIcon className="size-6" />Details
- Library
- Heroicons (324 icons)
- License
- MIT
- viewBox
0 0 24 24- Keywords
- moonnightdark modecrescentsleep
FAQ
- What does the moon icon represent?
- It represents a crescent moon, often used for dark mode, nighttime, or sleep-related functions.
- How do I use the moon icon in React?
- Import it using: import { MoonIcon } from '@heroicons/react/24/outline'
- What is the license for Heroicons?
- Heroicons are provided under the MIT license, allowing for free use.
Related icons
The same idea in other libraries, and near matches in Heroicons.
Looking for something else? Search Heroicons and 4 more libraries by description →
The search behind these pages runs as a Claude Code skill. What skills are and how I ship them →