The Phosphor moon stars icon depicts a crescent moon accompanied by stars, commonly used to represent night, sleep, or dark mode features in user interfaces.
Common uses
- Night mode toggle
- Sleep tracking feature
- Astronomy app section
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { MoonStars } from '@phosphor-icons/react';
<MoonStars size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<MoonStars size={24} />thin
<MoonStars size={24} weight="thin" />light
<MoonStars size={24} weight="light" />bold
<MoonStars size={24} weight="bold" />fill
<MoonStars size={24} weight="fill" />duotone
<MoonStars size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- nature
- Keywords
- nighteveningclearsleepsnoozenight modedark modeastronomystargazingconstellationnatureweathermoonstarsnight sky
FAQ
- What is the moon stars icon used for?
- It's typically used to signify night, sleep, or dark mode. It can also represent themes related to astronomy or clear night skies.
- How do I use the moon stars icon in React?
- You can import it from the Phosphor React library like this: import { MoonStars } from '@phosphor-icons/react'.
- What is the license for this icon?
- The Phosphor icon library, including the moon stars 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 →