eyedropper icon

eyedropper-24-filled from Fluent UI System Icons by Microsoft Corporation · 24 Filled · MIT Free for personal and commercial use.

Name: eyedropper-24-filled
Set: Fluent UI System Icons
Style: 24 Filled
Viewbox: 24×24
License: MIT

5 other variants in Fluent UI System Icons

eyedropper-16-filled eyedropper-16-regular eyedropper-20-filled eyedropper-20-regular eyedropper-24-regular

The same icon in other sets

eyedropperBootstrap Icons eyedropperBoxIcons v2 Solid eyedropperCarbon eyedropperFramework7 Icons eyedropperFont Awesome Solid eyedropperJam Icons eyedropperMaterial Design Icons eyedropperPhosphor

Related icons in Fluent UI System Icons

eyedropper-off-20-filled

Use the eyedropper icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21.03 2.97a3.58 3.58 0 0 0-5.06 0L14 4.94l-.013-.013a1.75 1.75 0 0 0-2.475 0l-.585.586a1.75 1.75 0 0 0 0 2.475l.012.012l-6.78 6.78a2.25 2.25 0 0 0-.659 1.592v.687l-1.28 2.347c-.836 1.533.841 3.21 2.374 2.375l2.347-1.28h.688a2.25 2.25 0 0 0 1.59-.66L16 13.061l.012.012a1.75 1.75 0 0 0 2.475 0l.586-.585a1.75 1.75 0 0 0 0-2.475L19.061 10l1.97-1.97a3.58 3.58 0 0 0 0-5.06M12 9.061l2.94 2.94l-6.78 6.78a.75.75 0 0 1-.531.22H6.75a.75.75 0 0 0-.359.09l-2.515 1.373a.23.23 0 0 1-.159.032a.26.26 0 0 1-.138-.075a.26.26 0 0 1-.075-.138a.23.23 0 0 1 .033-.158l1.372-2.515A.75.75 0 0 0 5 17.25v-.878a.75.75 0 0 1 .22-.53z"/></svg>

React

import type { SVGProps } from "react";

export function FluentEyedropper24Filled(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21.03 2.97a3.58 3.58 0 0 0-5.06 0L14 4.94l-.013-.013a1.75 1.75 0 0 0-2.475 0l-.585.586a1.75 1.75 0 0 0 0 2.475l.012.012l-6.78 6.78a2.25 2.25 0 0 0-.659 1.592v.687l-1.28 2.347c-.836 1.533.841 3.21 2.374 2.375l2.347-1.28h.688a2.25 2.25 0 0 0 1.59-.66L16 13.061l.012.012a1.75 1.75 0 0 0 2.475 0l.586-.585a1.75 1.75 0 0 0 0-2.475L19.061 10l1.97-1.97a3.58 3.58 0 0 0 0-5.06M12 9.061l2.94 2.94l-6.78 6.78a.75.75 0 0 1-.531.22H6.75a.75.75 0 0 0-.359.09l-2.515 1.373a.23.23 0 0 1-.159.032a.26.26 0 0 1-.138-.075a.26.26 0 0 1-.075-.138a.23.23 0 0 1 .033-.158l1.372-2.515A.75.75 0 0 0 5 17.25v-.878a.75.75 0 0 1 .22-.53z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21.03 2.97a3.58 3.58 0 0 0-5.06 0L14 4.94l-.013-.013a1.75 1.75 0 0 0-2.475 0l-.585.586a1.75 1.75 0 0 0 0 2.475l.012.012l-6.78 6.78a2.25 2.25 0 0 0-.659 1.592v.687l-1.28 2.347c-.836 1.533.841 3.21 2.374 2.375l2.347-1.28h.688a2.25 2.25 0 0 0 1.59-.66L16 13.061l.012.012a1.75 1.75 0 0 0 2.475 0l.586-.585a1.75 1.75 0 0 0 0-2.475L19.061 10l1.97-1.97a3.58 3.58 0 0 0 0-5.06M12 9.061l2.94 2.94l-6.78 6.78a.75.75 0 0 1-.531.22H6.75a.75.75 0 0 0-.359.09l-2.515 1.373a.23.23 0 0 1-.159.032a.26.26 0 0 1-.138-.075a.26.26 0 0 1-.075-.138a.23.23 0 0 1 .033-.158l1.372-2.515A.75.75 0 0 0 5 17.25v-.878a.75.75 0 0 1 .22-.53z"/></svg>
</template>

CSS

.icon-eyedropper-24-filled {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M21.03%202.97a3.58%203.58%200%200%200-5.06%200L14%204.94l-.013-.013a1.75%201.75%200%200%200-2.475%200l-.585.586a1.75%201.75%200%200%200%200%202.475l.012.012l-6.78%206.78a2.25%202.25%200%200%200-.659%201.592v.687l-1.28%202.347c-.836%201.533.841%203.21%202.374%202.375l2.347-1.28h.688a2.25%202.25%200%200%200%201.59-.66L16%2013.061l.012.012a1.75%201.75%200%200%200%202.475%200l.586-.585a1.75%201.75%200%200%200%200-2.475L19.061%2010l1.97-1.97a3.58%203.58%200%200%200%200-5.06M12%209.061l2.94%202.94l-6.78%206.78a.75.75%200%200%201-.531.22H6.75a.75.75%200%200%200-.359.09l-2.515%201.373a.23.23%200%200%201-.159.032a.26.26%200%200%201-.138-.075a.26.26%200%200%201-.075-.138a.23.23%200%200%201%20.033-.158l1.372-2.515A.75.75%200%200%200%205%2017.25v-.878a.75.75%200%200%201%20.22-.53z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M21.03%202.97a3.58%203.58%200%200%200-5.06%200L14%204.94l-.013-.013a1.75%201.75%200%200%200-2.475%200l-.585.586a1.75%201.75%200%200%200%200%202.475l.012.012l-6.78%206.78a2.25%202.25%200%200%200-.659%201.592v.687l-1.28%202.347c-.836%201.533.841%203.21%202.374%202.375l2.347-1.28h.688a2.25%202.25%200%200%200%201.59-.66L16%2013.061l.012.012a1.75%201.75%200%200%200%202.475%200l.586-.585a1.75%201.75%200%200%200%200-2.475L19.061%2010l1.97-1.97a3.58%203.58%200%200%200%200-5.06M12%209.061l2.94%202.94l-6.78%206.78a.75.75%200%200%201-.531.22H6.75a.75.75%200%200%200-.359.09l-2.515%201.373a.23.23%200%200%201-.159.032a.26.26%200%200%201-.138-.075a.26.26%200%200%201-.075-.138a.23.23%200%200%201%20.033-.158l1.372-2.515A.75.75%200%200%200%205%2017.25v-.878a.75.75%200%200%201%20.22-.53z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/eyedropper-24-filled.svg?color=%231a73e8&size=48