The Phosphor drop icon visually represents a single drop of liquid, commonly used to signify water, moisture, or a small amount of something.
Common uses
- Indicating water or liquid content.
- Representing a single unit or measurement.
- Stylistic element for weather-related features.
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { Drop } from '@phosphor-icons/react';
<Drop size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<Drop size={24} />thin
<Drop size={24} weight="thin" />light
<Drop size={24} weight="light" />bold
<Drop size={24} weight="bold" />fill
<Drop size={24} weight="fill" />duotone
<Drop size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- nature
- Keywords
- dropletteardropraindroprainingmeteorologywaterblurnatureweatherdropwater drop
FAQ
- What is the Phosphor drop icon used for?
- It's used to represent water, liquid, or a small quantity in UI elements. It can also be used in weather-related contexts.
- How do I use the drop icon in React?
- You can import and use it like this: import { Drop } from '@phosphor-icons/react'. Then render it as <Drop size={32} />.
- What is the license for the Phosphor drop icon?
- The Phosphor icon library, including the drop 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 →