coffee icon

coffee-thin from Phosphor by Phosphor Icons · Thin · MIT Free for personal and commercial use.

Name: coffee-thin
Set: Phosphor
Style: Thin
Viewbox: 256×256
License: MIT

5 other variants in Phosphor

coffee coffee-bold coffee-duotone coffee-fill coffee-light

The same icon in other sets

coffeeAkar Icons coffeeBoxIcons v2 coffeeBoxIcons v2 Solid coffeeFeather Icons coffeecss.gg coffeeHumbleicons coffeeIonIcons coffeeJam Icons coffeeLine Awesome coffeeMaterial Line Icons coffeeLucide coffeeMaterial Symbols coffeeMaterial Design Icons coffeePixelarticons coffeeTabler Icons coffeeUnicons

Related icons in Phosphor

coffee-bean

Use the coffee icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M84 56V24a4 4 0 0 1 8 0v32a4 4 0 0 1-8 0m36 4a4 4 0 0 0 4-4V24a4 4 0 0 0-8 0v32a4 4 0 0 0 4 4m32 0a4 4 0 0 0 4-4V24a4 4 0 0 0-8 0v32a4 4 0 0 0 4 4m92 60v8a36 36 0 0 1-36 36h-.41a92.53 92.53 0 0 1-35.76 48H208a4 4 0 0 1 0 8H32a4 4 0 0 1 0-8h36.17A92.34 92.34 0 0 1 28 136V88a4 4 0 0 1 4-4h176a36 36 0 0 1 36 36m-40 16V92H36v44a84.28 84.28 0 0 0 48.21 76h71.58A84.28 84.28 0 0 0 204 136m32-16a28 28 0 0 0-24-27.71V136a91.8 91.8 0 0 1-2.2 19.94A28 28 0 0 0 236 128Z"/></svg>

React

import type { SVGProps } from "react";

export function PhCoffeeThin(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M84 56V24a4 4 0 0 1 8 0v32a4 4 0 0 1-8 0m36 4a4 4 0 0 0 4-4V24a4 4 0 0 0-8 0v32a4 4 0 0 0 4 4m32 0a4 4 0 0 0 4-4V24a4 4 0 0 0-8 0v32a4 4 0 0 0 4 4m92 60v8a36 36 0 0 1-36 36h-.41a92.53 92.53 0 0 1-35.76 48H208a4 4 0 0 1 0 8H32a4 4 0 0 1 0-8h36.17A92.34 92.34 0 0 1 28 136V88a4 4 0 0 1 4-4h176a36 36 0 0 1 36 36m-40 16V92H36v44a84.28 84.28 0 0 0 48.21 76h71.58A84.28 84.28 0 0 0 204 136m32-16a28 28 0 0 0-24-27.71V136a91.8 91.8 0 0 1-2.2 19.94A28 28 0 0 0 236 128Z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M84 56V24a4 4 0 0 1 8 0v32a4 4 0 0 1-8 0m36 4a4 4 0 0 0 4-4V24a4 4 0 0 0-8 0v32a4 4 0 0 0 4 4m32 0a4 4 0 0 0 4-4V24a4 4 0 0 0-8 0v32a4 4 0 0 0 4 4m92 60v8a36 36 0 0 1-36 36h-.41a92.53 92.53 0 0 1-35.76 48H208a4 4 0 0 1 0 8H32a4 4 0 0 1 0-8h36.17A92.34 92.34 0 0 1 28 136V88a4 4 0 0 1 4-4h176a36 36 0 0 1 36 36m-40 16V92H36v44a84.28 84.28 0 0 0 48.21 76h71.58A84.28 84.28 0 0 0 204 136m32-16a28 28 0 0 0-24-27.71V136a91.8 91.8 0 0 1-2.2 19.94A28 28 0 0 0 236 128Z"/></svg>
</template>

CSS

.icon-coffee-thin {
  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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M84%2056V24a4%204%200%200%201%208%200v32a4%204%200%200%201-8%200m36%204a4%204%200%200%200%204-4V24a4%204%200%200%200-8%200v32a4%204%200%200%200%204%204m32%200a4%204%200%200%200%204-4V24a4%204%200%200%200-8%200v32a4%204%200%200%200%204%204m92%2060v8a36%2036%200%200%201-36%2036h-.41a92.53%2092.53%200%200%201-35.76%2048H208a4%204%200%200%201%200%208H32a4%204%200%200%201%200-8h36.17A92.34%2092.34%200%200%201%2028%20136V88a4%204%200%200%201%204-4h176a36%2036%200%200%201%2036%2036m-40%2016V92H36v44a84.28%2084.28%200%200%200%2048.21%2076h71.58A84.28%2084.28%200%200%200%20204%20136m32-16a28%2028%200%200%200-24-27.71V136a91.8%2091.8%200%200%201-2.2%2019.94A28%2028%200%200%200%20236%20128Z%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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M84%2056V24a4%204%200%200%201%208%200v32a4%204%200%200%201-8%200m36%204a4%204%200%200%200%204-4V24a4%204%200%200%200-8%200v32a4%204%200%200%200%204%204m32%200a4%204%200%200%200%204-4V24a4%204%200%200%200-8%200v32a4%204%200%200%200%204%204m92%2060v8a36%2036%200%200%201-36%2036h-.41a92.53%2092.53%200%200%201-35.76%2048H208a4%204%200%200%201%200%208H32a4%204%200%200%201%200-8h36.17A92.34%2092.34%200%200%201%2028%20136V88a4%204%200%200%201%204-4h176a36%2036%200%200%201%2036%2036m-40%2016V92H36v44a84.28%2084.28%200%200%200%2048.21%2076h71.58A84.28%2084.28%200%200%200%20204%20136m32-16a28%2028%200%200%200-24-27.71V136a91.8%2091.8%200%200%201-2.2%2019.94A28%2028%200%200%200%20236%20128Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/coffee-thin.svg?color=%231a73e8&size=48