The Phosphor sun icon depicts a stylized sun, commonly used to represent daytime, clear weather, or light mode in user interfaces.
Common uses
- Weather widgets (sunny day)
- Theme toggles (light mode)
- Status indicators (daytime active)
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { Sun } from '@phosphor-icons/react';
<Sun size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<Sun size={24} />thin
<Sun size={24} weight="thin" />light
<Sun size={24} weight="light" />bold
<Sun size={24} weight="bold" />fill
<Sun size={24} weight="fill" />duotone
<Sun size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- nature
- Keywords
- daydaytimedaylightclearsunnysunshinelight modebrightnesslightenbrightennaturesystemweathersun
FAQ
- What is the sun icon used for?
- It's typically used to signify daytime, clear weather conditions, or a light theme in applications.
- How do I use the sun icon in React?
- You can import and use it with: `import { Sun } from '@phosphor-icons/react'`. Then render it as `<Sun />`.
- What is the license for the Phosphor sun icon?
- The Phosphor icon library, including the sun 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 →