coffee bean icon

coffee-bean-light from Phosphor by Phosphor Icons · Light · MIT Free for personal and commercial use.

Name: coffee-bean-light
Set: Phosphor
Style: Light
Viewbox: 256×256
License: MIT

5 other variants in Phosphor

coffee-bean coffee-bean-bold coffee-bean-duotone coffee-bean-fill coffee-bean-thin

The same icon in other sets

coffee-beanBoxIcons v2 Solid coffee-beanLucide Lab

Use the coffee bean icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M210.34 45.66C194 29.35 170 22.87 142.79 27.42C116.28 31.83 89.71 46.24 68 68s-36.14 48.3-40.56 74.81C22.87 170 29.35 194 45.66 210.34C58.57 223.25 76.29 230 96.64 230a101.6 101.6 0 0 0 16.57-1.41c26.51-4.42 53.08-18.83 74.82-40.56s36.14-48.31 40.56-74.82C233.13 86 226.65 62 210.34 45.66M76.46 76.46C101.52 51.4 132.46 38 159.18 38c12.58 0 24.22 3 33.87 9.12a108 108 0 0 0-34.71 18c-18.82 14.86-31 35.62-36.22 61.71C112 177.35 75.18 194 52 199.5c-25.7-29.08-15.17-83.41 24.46-123.04m103.08 103.08C142.68 216.4 93.1 228.1 63 208.91a108 108 0 0 0 34.71-18c18.82-14.86 31-35.62 36.22-61.71C144 78.65 180.82 62 204.05 56.5c25.65 29.09 15.12 83.41-24.51 123.04"/></svg>

React

import type { SVGProps } from "react";

export function PhCoffeeBeanLight(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="M210.34 45.66C194 29.35 170 22.87 142.79 27.42C116.28 31.83 89.71 46.24 68 68s-36.14 48.3-40.56 74.81C22.87 170 29.35 194 45.66 210.34C58.57 223.25 76.29 230 96.64 230a101.6 101.6 0 0 0 16.57-1.41c26.51-4.42 53.08-18.83 74.82-40.56s36.14-48.31 40.56-74.82C233.13 86 226.65 62 210.34 45.66M76.46 76.46C101.52 51.4 132.46 38 159.18 38c12.58 0 24.22 3 33.87 9.12a108 108 0 0 0-34.71 18c-18.82 14.86-31 35.62-36.22 61.71C112 177.35 75.18 194 52 199.5c-25.7-29.08-15.17-83.41 24.46-123.04m103.08 103.08C142.68 216.4 93.1 228.1 63 208.91a108 108 0 0 0 34.71-18c18.82-14.86 31-35.62 36.22-61.71C144 78.65 180.82 62 204.05 56.5c25.65 29.09 15.12 83.41-24.51 123.04"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M210.34 45.66C194 29.35 170 22.87 142.79 27.42C116.28 31.83 89.71 46.24 68 68s-36.14 48.3-40.56 74.81C22.87 170 29.35 194 45.66 210.34C58.57 223.25 76.29 230 96.64 230a101.6 101.6 0 0 0 16.57-1.41c26.51-4.42 53.08-18.83 74.82-40.56s36.14-48.31 40.56-74.82C233.13 86 226.65 62 210.34 45.66M76.46 76.46C101.52 51.4 132.46 38 159.18 38c12.58 0 24.22 3 33.87 9.12a108 108 0 0 0-34.71 18c-18.82 14.86-31 35.62-36.22 61.71C112 177.35 75.18 194 52 199.5c-25.7-29.08-15.17-83.41 24.46-123.04m103.08 103.08C142.68 216.4 93.1 228.1 63 208.91a108 108 0 0 0 34.71-18c18.82-14.86 31-35.62 36.22-61.71C144 78.65 180.82 62 204.05 56.5c25.65 29.09 15.12 83.41-24.51 123.04"/></svg>
</template>

CSS

.icon-coffee-bean-light {
  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%22M210.34%2045.66C194%2029.35%20170%2022.87%20142.79%2027.42C116.28%2031.83%2089.71%2046.24%2068%2068s-36.14%2048.3-40.56%2074.81C22.87%20170%2029.35%20194%2045.66%20210.34C58.57%20223.25%2076.29%20230%2096.64%20230a101.6%20101.6%200%200%200%2016.57-1.41c26.51-4.42%2053.08-18.83%2074.82-40.56s36.14-48.31%2040.56-74.82C233.13%2086%20226.65%2062%20210.34%2045.66M76.46%2076.46C101.52%2051.4%20132.46%2038%20159.18%2038c12.58%200%2024.22%203%2033.87%209.12a108%20108%200%200%200-34.71%2018c-18.82%2014.86-31%2035.62-36.22%2061.71C112%20177.35%2075.18%20194%2052%20199.5c-25.7-29.08-15.17-83.41%2024.46-123.04m103.08%20103.08C142.68%20216.4%2093.1%20228.1%2063%20208.91a108%20108%200%200%200%2034.71-18c18.82-14.86%2031-35.62%2036.22-61.71C144%2078.65%20180.82%2062%20204.05%2056.5c25.65%2029.09%2015.12%2083.41-24.51%20123.04%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%22M210.34%2045.66C194%2029.35%20170%2022.87%20142.79%2027.42C116.28%2031.83%2089.71%2046.24%2068%2068s-36.14%2048.3-40.56%2074.81C22.87%20170%2029.35%20194%2045.66%20210.34C58.57%20223.25%2076.29%20230%2096.64%20230a101.6%20101.6%200%200%200%2016.57-1.41c26.51-4.42%2053.08-18.83%2074.82-40.56s36.14-48.31%2040.56-74.82C233.13%2086%20226.65%2062%20210.34%2045.66M76.46%2076.46C101.52%2051.4%20132.46%2038%20159.18%2038c12.58%200%2024.22%203%2033.87%209.12a108%20108%200%200%200-34.71%2018c-18.82%2014.86-31%2035.62-36.22%2061.71C112%20177.35%2075.18%20194%2052%20199.5c-25.7-29.08-15.17-83.41%2024.46-123.04m103.08%20103.08C142.68%20216.4%2093.1%20228.1%2063%20208.91a108%20108%200%200%200%2034.71-18c18.82-14.86%2031-35.62%2036.22-61.71C144%2078.65%20180.82%2062%20204.05%2056.5c25.65%2029.09%2015.12%2083.41-24.51%20123.04%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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