The Phosphor cloud moon icon depicts a cloud partially obscuring a moon, commonly used to represent partly cloudy or overcast conditions during nighttime or evening hours in weather-related user interfaces.
Common uses
- Displaying current weather conditions (e.g., partly cloudy night).
- Indicating a forecast for evening or nighttime cloud cover.
- Representing a 'night mode' or 'dark theme' toggle.
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { CloudMoon } from '@phosphor-icons/react';
<CloudMoon size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<CloudMoon size={24} />thin
<CloudMoon size={24} weight="thin" />light
<CloudMoon size={24} weight="light" />bold
<CloudMoon size={24} weight="bold" />fill
<CloudMoon size={24} weight="fill" />duotone
<CloudMoon size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- weather
- Keywords
- meteorologycloudypartly cloudynighteveningweathercloudmoonnight cloudcloudy moonevening weatherpartly cloudy night
FAQ
- What does the cloud moon icon represent?
- It represents a cloudy or overcast sky during the night or evening, specifically when a moon is present but partially hidden by clouds.
- How do I use the cloud moon icon in React?
- You can import and use it in your React application with: import { CloudMoon } from '@phosphor-icons/react'.
- What is the license for the Phosphor cloud moon icon?
- The Phosphor icon library, including the cloud moon icon, is distributed 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 →