The Phosphor drop half icon visually represents a partially filled container, often used to signify concepts like water level, contrast adjustment, or a partial state in design tools.
Common uses
- Contrast slider in image editors
- Water level indicator
- Partial fill status in forms
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { DropHalf } from '@phosphor-icons/react';
<DropHalf size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<DropHalf size={24} />thin
<DropHalf size={24} weight="thin" />light
<DropHalf size={24} weight="light" />bold
<DropHalf size={24} weight="bold" />fill
<DropHalf size={24} weight="fill" />duotone
<DropHalf size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- design
- Keywords
- dropletteardropraindrophumiditywatercontrastbrightnessdesigneditornatureweatherdrophalfrainhalf drop
FAQ
- What is the drop half icon used for?
- It's commonly used to represent partial states, levels, or adjustments like contrast or water levels in user interfaces.
- How do I use the drop half icon in React?
- You can import and use it like this: import { DropHalf } from '@phosphor-icons/react'.
- What is the license for Phosphor icons?
- Phosphor icons are distributed under the MIT license, allowing for free usage.
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 →