The Phosphor moon icon depicts a crescent moon, commonly used in UIs to represent night, dark mode, or sleep-related features.
Common uses
- Dark mode toggle
- Sleep timer setting
- Night weather forecast
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { Moon } from '@phosphor-icons/react';
<Moon size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<Moon size={24} />thin
<Moon size={24} weight="thin" />light
<Moon size={24} weight="light" />bold
<Moon size={24} weight="bold" />fill
<Moon size={24} weight="fill" />duotone
<Moon size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- nature
- Keywords
- nighteveningclearsleepsnoozenight modedark modeastronomystargazingnaturesystemweathermooncrescent
FAQ
- What is the moon icon used for?
- It's typically used to signify night, dark mode, sleep functions, or astronomical themes in user interfaces.
- How do I use the moon icon in React?
- Import it from the Phosphor library: `import { Moon } from '@phosphor-icons/react'` and use it as a component: `<Moon />`.
- What is the license for the Phosphor moon icon?
- The Phosphor icon library, including the moon icon, is available under the MIT license.
Related icons
The same idea in other libraries, and near matches in Phosphor.
Looking for something else? Search Phosphor 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 →