Drink Coffee icon

Use the Drink Coffee 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 { DrinkCoffee24Regular, DrinkCoffee24Filled } from "@fluentui/react-icons";

export function Example() {
  return <DrinkCoffee24Regular aria-label="Drink Coffee" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_drink_coffee_24_regular.svg" width="24" height="24" alt="Drink Coffee">

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="M5.5 2.75C5.5 2.33579 5.16421 2 4.75 2C4.33579 2 4 2.33579 4 2.75C4 4.02066 4.92806 4.6672 5.50571 5.06963L5.5699 5.11442C6.24985 5.59039 6.5 5.81889 6.5 6.25C6.5 6.66421 6.83579 7 7.25 7C7.66421 7 8 6.66421 8 6.25C8 4.97934 7.07194 4.3328 6.49429 3.93037L6.4301 3.88558C5.75015 3.40961 5.5 3.18111 5.5 2.75ZM3 9.82143C3 8.81548 3.81548 8 4.82143 8H17.1786C18.1845 8 19 8.81548 19 9.82143V10.5H19.75C21.5449 10.5 23 11.9551 23 13.75C23 15.5449 21.5449 17 19.75 17H18.4185C17.2317 19.9318 14.3574 22 11 22C6.58172 22 3 18.4183 3 14V9.82143ZM17.5 9.82143C17.5 9.64391 17.3561 9.5 17.1786 9.5H4.82143C4.64391 9.5 4.5 9.64391 4.5 9.82143V14C4.5 17.5899 7.41015 20.5 11 20.5C14.5899 20.5 17.5 17.5899 17.5 14V9.82143ZM19.75 12H19V14C19 14.5127 18.9518 15.0141 18.8596 15.5H19.75C20.7165 15.5 21.5 14.7165 21.5 13.75C21.5 12.7835 20.7165 12 19.75 12ZM8.75 2C9.16421 2 9.5 2.33579 9.5 2.75C9.5 3.18111 9.75015 3.40961 10.4301 3.88558L10.4943 3.93037C11.0719 4.3328 12 4.97934 12 6.25C12 6.66421 11.6642 7 11.25 7C10.8358 7 10.5 6.66421 10.5 6.25C10.5 5.81889 10.2499 5.59039 9.5699 5.11442L9.50571 5.06963C8.92806 4.6672 8 4.02066 8 2.75C8 2.33579 8.33579 2 8.75 2ZM13.5 2.75C13.5 2.33579 13.1642 2 12.75 2C12.3358 2 12 2.33579 12 2.75C12 4.02066 12.9281 4.6672 13.5057 5.06963L13.5699 5.11442C14.2499 5.59039 14.5 5.81889 14.5 6.25C14.5 6.66421 14.8358 7 15.25 7C15.6642 7 16 6.66421 16 6.25C16 4.97934 15.0719 4.3328 14.4943 3.93037L14.4301 3.88558C13.7501 3.40961 13.5 3.18111 13.5 2.75Z" 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/drink_coffee_24_regular.svg";

Details

Keywords

relaxmealcoffee