The Phosphor umbrella icon depicts a common rain-protection device and is typically used to represent weather-related features, safety, or coverage in user interfaces.
Common uses
- Weather widgets
- Insurance policy details
- Rainfall alerts
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { Umbrella } from '@phosphor-icons/react';
<Umbrella size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<Umbrella size={24} />thin
<Umbrella size={24} weight="thin" />light
<Umbrella size={24} weight="light" />bold
<Umbrella size={24} weight="bold" />fill
<Umbrella size={24} weight="fill" />duotone
<Umbrella size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- objects
- Keywords
- rainingrainyinsuranceobjectsweatherumbrellarainparasolsheltersunshade
FAQ
- What is the umbrella icon used for?
- It's used to visually represent concepts like rain, protection, or insurance coverage in UI elements.
- How do I use the umbrella icon in React?
- Import it from the library like this: `import { Umbrella } from '@phosphor-icons/react'`. Then, use it as a component: `<Umbrella size={32} />`.
- What is the license for Phosphor icons?
- Phosphor icons are distributed under the MIT license, allowing for free usage in both personal and commercial projects.
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 →