Drop icon

Use the Drop 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 { Drop24Regular, Drop24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M11.4697 2.21967C11.7626 1.92678 12.2374 1.92678 12.5303 2.21967C12.9334 2.62274 14.5286 4.34735 16.0289 6.58192C17.5084 8.78544 19 11.6349 19 14.25C19 16.7736 18.2536 18.7287 16.9556 20.0557C15.6588 21.3814 13.8894 22 12 22C10.1106 22 8.34122 21.3814 7.04444 20.0557C5.7464 18.7287 5 16.7736 5 14.25C5 11.6349 6.49158 8.78544 7.97108 6.58192C9.47144 4.34735 11.0666 2.62274 11.4697 2.21967ZM9.21642 7.41807C7.75842 9.58956 6.5 12.1151 6.5 14.25C6.5 16.4764 7.15271 18.0213 8.11673 19.0068C9.082 19.9936 10.4377 20.5 12 20.5C13.5623 20.5 14.918 19.9936 15.8833 19.0068C16.8473 18.0213 17.5 16.4764 17.5 14.25C17.5 12.1151 16.2416 9.58956 14.7836 7.41808C13.7429 5.86806 12.6535 4.57503 12 3.84788C11.3465 4.57503 10.2571 5.86806 9.21642 7.41807Z" 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/drop_24_regular.svg";

Details

Keywords

waterliquidblood