coffee icon
coffee from IonIcons by Ben Sperry · Regular · MIT Free for personal and commercial use.
- Name
- coffee
- Set
- IonIcons
- Style
- Regular
- Viewbox
- 512×512
- License
- MIT
The same icon in other sets
coffeeAkar Iconscoffee-outlinedAnt Design IconscoffeeBoxIcons v2coffeeBoxIcons v2 SolidcoffeeCodiconscoffeeElement PluscoffeeFont Awesome SolidcoffeeFeather Iconscoffeecss.ggcoffeeHumbleiconscoffeeJam IconscoffeeLine AwesomecoffeeMaterial Line IconscoffeeLucidecoffeeMaterial Icon ThemecoffeeMaterial SymbolscoffeeMaterial Symbols LightcoffeeMaterial Design IconscoffeeMyna UI IconscoffeePhosphorcoffeePixelarticonscoffeeTabler IconscoffeeUnicons
Use the coffee icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M383.1 257.4c.6-5.4.9-10 .9-13.8 0-19.6-3.3-19.7-16-19.7h-75.5c7.3-12 11.5-24.4 11.5-37 0-37.9-57.3-56.4-57.3-88 0-11.7 5.1-21.3 9.3-34.9-26.5 7-47.4 33.5-47.4 61.6 0 48.3 56.3 48.7 56.3 84.8 0 4.5-1.4 8.5-2.1 13.5h-55.9c.8-3 1.3-6.2 1.3-9.3 0-22.8-39.1-33.9-39.1-52.8 0-7 1-12.8 3.2-21-12.9 5.1-28.3 20-28.3 36.8 0 26.7 31.9 29.3 36.8 46.3H80c-12.7 0-16 .1-16 19.7 0 19.6 7.7 61.3 28.3 111s44.4 71.6 61.2 86.2l.1-.2c5.1 4.6 11.8 7.3 19.2 7.3h102.4c7.4 0 14.1-2.7 19.2-7.3l.1.2c9-7.8 20-17.8 31.4-32.9 4.7 2 9.8 3.7 15.4 5 8.4 2 16.8 3 24.8 3 24 0 45.6-9.2 60.8-25.8 13.4-14.6 21.1-34.4 21.1-54.2 0-38.9-28-71.4-64.9-78.5zm-17 126.8c-8.6 0-15.6-1.2-22.1-4.2 4-8 7.9-15.9 11.7-25.1 10.1-24.4 17.1-47 21.6-65.8 22 4.3 38.7 23.8 38.7 47.1 0 22.7-17.2 48-49.9 48z" fill="currentColor"/></svg>
React
import type { SVGProps } from "react";
export function IonCoffee(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M383.1 257.4c.6-5.4.9-10 .9-13.8 0-19.6-3.3-19.7-16-19.7h-75.5c7.3-12 11.5-24.4 11.5-37 0-37.9-57.3-56.4-57.3-88 0-11.7 5.1-21.3 9.3-34.9-26.5 7-47.4 33.5-47.4 61.6 0 48.3 56.3 48.7 56.3 84.8 0 4.5-1.4 8.5-2.1 13.5h-55.9c.8-3 1.3-6.2 1.3-9.3 0-22.8-39.1-33.9-39.1-52.8 0-7 1-12.8 3.2-21-12.9 5.1-28.3 20-28.3 36.8 0 26.7 31.9 29.3 36.8 46.3H80c-12.7 0-16 .1-16 19.7 0 19.6 7.7 61.3 28.3 111s44.4 71.6 61.2 86.2l.1-.2c5.1 4.6 11.8 7.3 19.2 7.3h102.4c7.4 0 14.1-2.7 19.2-7.3l.1.2c9-7.8 20-17.8 31.4-32.9 4.7 2 9.8 3.7 15.4 5 8.4 2 16.8 3 24.8 3 24 0 45.6-9.2 60.8-25.8 13.4-14.6 21.1-34.4 21.1-54.2 0-38.9-28-71.4-64.9-78.5zm-17 126.8c-8.6 0-15.6-1.2-22.1-4.2 4-8 7.9-15.9 11.7-25.1 10.1-24.4 17.1-47 21.6-65.8 22 4.3 38.7 23.8 38.7 47.1 0 22.7-17.2 48-49.9 48z" fill="currentColor"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M383.1 257.4c.6-5.4.9-10 .9-13.8 0-19.6-3.3-19.7-16-19.7h-75.5c7.3-12 11.5-24.4 11.5-37 0-37.9-57.3-56.4-57.3-88 0-11.7 5.1-21.3 9.3-34.9-26.5 7-47.4 33.5-47.4 61.6 0 48.3 56.3 48.7 56.3 84.8 0 4.5-1.4 8.5-2.1 13.5h-55.9c.8-3 1.3-6.2 1.3-9.3 0-22.8-39.1-33.9-39.1-52.8 0-7 1-12.8 3.2-21-12.9 5.1-28.3 20-28.3 36.8 0 26.7 31.9 29.3 36.8 46.3H80c-12.7 0-16 .1-16 19.7 0 19.6 7.7 61.3 28.3 111s44.4 71.6 61.2 86.2l.1-.2c5.1 4.6 11.8 7.3 19.2 7.3h102.4c7.4 0 14.1-2.7 19.2-7.3l.1.2c9-7.8 20-17.8 31.4-32.9 4.7 2 9.8 3.7 15.4 5 8.4 2 16.8 3 24.8 3 24 0 45.6-9.2 60.8-25.8 13.4-14.6 21.1-34.4 21.1-54.2 0-38.9-28-71.4-64.9-78.5zm-17 126.8c-8.6 0-15.6-1.2-22.1-4.2 4-8 7.9-15.9 11.7-25.1 10.1-24.4 17.1-47 21.6-65.8 22 4.3 38.7 23.8 38.7 47.1 0 22.7-17.2 48-49.9 48z" fill="currentColor"/></svg> </template>
CSS
.icon-coffee {
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%20512%20512%22%3E%3Cpath%20d%3D%22M383.1%20257.4c.6-5.4.9-10%20.9-13.8%200-19.6-3.3-19.7-16-19.7h-75.5c7.3-12%2011.5-24.4%2011.5-37%200-37.9-57.3-56.4-57.3-88%200-11.7%205.1-21.3%209.3-34.9-26.5%207-47.4%2033.5-47.4%2061.6%200%2048.3%2056.3%2048.7%2056.3%2084.8%200%204.5-1.4%208.5-2.1%2013.5h-55.9c.8-3%201.3-6.2%201.3-9.3%200-22.8-39.1-33.9-39.1-52.8%200-7%201-12.8%203.2-21-12.9%205.1-28.3%2020-28.3%2036.8%200%2026.7%2031.9%2029.3%2036.8%2046.3H80c-12.7%200-16%20.1-16%2019.7%200%2019.6%207.7%2061.3%2028.3%20111s44.4%2071.6%2061.2%2086.2l.1-.2c5.1%204.6%2011.8%207.3%2019.2%207.3h102.4c7.4%200%2014.1-2.7%2019.2-7.3l.1.2c9-7.8%2020-17.8%2031.4-32.9%204.7%202%209.8%203.7%2015.4%205%208.4%202%2016.8%203%2024.8%203%2024%200%2045.6-9.2%2060.8-25.8%2013.4-14.6%2021.1-34.4%2021.1-54.2%200-38.9-28-71.4-64.9-78.5zm-17%20126.8c-8.6%200-15.6-1.2-22.1-4.2%204-8%207.9-15.9%2011.7-25.1%2010.1-24.4%2017.1-47%2021.6-65.8%2022%204.3%2038.7%2023.8%2038.7%2047.1%200%2022.7-17.2%2048-49.9%2048z%22%20fill%3D%22currentColor%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%20512%20512%22%3E%3Cpath%20d%3D%22M383.1%20257.4c.6-5.4.9-10%20.9-13.8%200-19.6-3.3-19.7-16-19.7h-75.5c7.3-12%2011.5-24.4%2011.5-37%200-37.9-57.3-56.4-57.3-88%200-11.7%205.1-21.3%209.3-34.9-26.5%207-47.4%2033.5-47.4%2061.6%200%2048.3%2056.3%2048.7%2056.3%2084.8%200%204.5-1.4%208.5-2.1%2013.5h-55.9c.8-3%201.3-6.2%201.3-9.3%200-22.8-39.1-33.9-39.1-52.8%200-7%201-12.8%203.2-21-12.9%205.1-28.3%2020-28.3%2036.8%200%2026.7%2031.9%2029.3%2036.8%2046.3H80c-12.7%200-16%20.1-16%2019.7%200%2019.6%207.7%2061.3%2028.3%20111s44.4%2071.6%2061.2%2086.2l.1-.2c5.1%204.6%2011.8%207.3%2019.2%207.3h102.4c7.4%200%2014.1-2.7%2019.2-7.3l.1.2c9-7.8%2020-17.8%2031.4-32.9%204.7%202%209.8%203.7%2015.4%205%208.4%202%2016.8%203%2024.8%203%2024%200%2045.6-9.2%2060.8-25.8%2013.4-14.6%2021.1-34.4%2021.1-54.2%200-38.9-28-71.4-64.9-78.5zm-17%20126.8c-8.6%200-15.6-1.2-22.1-4.2%204-8%207.9-15.9%2011.7-25.1%2010.1-24.4%2017.1-47%2021.6-65.8%2022%204.3%2038.7%2023.8%2038.7%2047.1%200%2022.7-17.2%2048-49.9%2048z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ion/coffee.svg?color=%231a73e8&size=48
