The Phosphor eyedropper icon visually represents a tool used to select or sample colors from an image or interface element.
Common uses
- Color selection tool in a design application
- Color picker widget in a web form
- Sampling color from a webpage
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { Eyedropper } from '@phosphor-icons/react';
<Eyedropper size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<Eyedropper size={24} />thin
<Eyedropper size={24} weight="thin" />light
<Eyedropper size={24} weight="light" />bold
<Eyedropper size={24} weight="bold" />fill
<Eyedropper size={24} weight="fill" />duotone
<Eyedropper size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- design
- Keywords
- colorscolor pickersampleartsdesigneditorobjectseyedroppercolor samplerpaint droppercolor tool
FAQ
- What is the eyedropper icon used for?
- It signifies a tool for picking or sampling colors from a screen or image. This is common in design software and color selection interfaces.
- How do I use the eyedropper icon in React?
- You can import and use it directly from the Phosphor React library: `import { Eyedropper } from '@phosphor-icons/react'`. Then render it as a component: `<Eyedropper />`.
- What is the license for this icon?
- The Phosphor icon set, including the eyedropper, 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 →