Eyedropper icon

Use the Eyedropper icon in React

Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.

npm install @fluentui/react-icons

import { Eyedropper24Regular, Eyedropper24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Eyedropper24Regular aria-label="Eyedropper" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_eyedropper_24_regular.svg" width="24" height="24" alt="Eyedropper">

Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.0303 2.96997C19.6329 1.57251 17.3671 1.57251 15.9697 2.96997L14 4.93966L13.9874 4.9271C13.304 4.24368 12.196 4.24368 11.5125 4.92709L10.9268 5.51288C10.2433 6.1963 10.2433 7.30434 10.9268 7.98776L10.9394 8.00039L4.15914 14.7806C3.73719 15.2026 3.50013 15.7749 3.50013 16.3716V17.0591L2.21981 19.4063C1.38379 20.939 3.06141 22.6167 4.59412 21.7806L6.94138 20.5003H7.62881C8.22555 20.5003 8.79785 20.2633 9.2198 19.8413L16.0001 13.0611L16.0125 13.0735C16.696 13.757 17.804 13.757 18.4874 13.0735L19.0732 12.4878C19.7566 11.8043 19.7566 10.6963 19.0732 10.0129L19.0606 10.0003L21.0303 8.03063C22.4278 6.63317 22.4278 4.36744 21.0303 2.96997ZM17.0303 4.03063C17.842 3.21896 19.158 3.21896 19.9697 4.03063C20.7813 4.84231 20.7813 6.1583 19.9697 6.96997L17.4697 9.46999C17.1768 9.76288 17.1768 10.2378 17.4697 10.5306L18.0125 11.0735C18.1102 11.1712 18.1102 11.3295 18.0125 11.4271L17.4268 12.0129C17.3291 12.1105 17.1708 12.1105 17.0732 12.0129L11.9874 6.9271C11.8898 6.82947 11.8898 6.67117 11.9874 6.57354L12.5732 5.98775C12.6708 5.89012 12.8291 5.89012 12.9268 5.98776L13.4697 6.53065C13.7625 6.82354 14.2374 6.82354 14.5303 6.53065L17.0303 4.03063ZM14.9394 12.0004L8.15914 18.7806C8.01849 18.9213 7.82773 19.0003 7.62881 19.0003H6.75013C6.62465 19.0003 6.50116 19.0318 6.391 19.0919L3.87584 20.4638C3.80671 20.5015 3.75536 20.5032 3.717 20.4964C3.67227 20.4885 3.62232 20.4641 3.57935 20.4211C3.53638 20.3781 3.51196 20.3282 3.50405 20.2834C3.49726 20.2451 3.49895 20.1937 3.53665 20.1246L4.90856 17.6095C4.96865 17.4993 5.00014 17.3758 5.00014 17.2503V16.3716C5.00014 16.1727 5.07915 15.982 5.21981 15.8413L12.0001 9.06105L14.9394 12.0004Z" fill="currentColor"/></svg>

Use it from the SVG package

Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/eyedropper_24_regular.svg";

Details

Keywords

dropselectioncolor