The Phosphor coffee bean icon visually represents coffee beans and is commonly used to signify coffee-related products, services, or locations within a user interface.
Common uses
- Label for a coffee product listing
- Icon for a 'buy coffee' button
- Marker for a cafe on a map
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { CoffeeBean } from '@phosphor-icons/react';
<CoffeeBean size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<CoffeeBean size={24} />thin
<CoffeeBean size={24} weight="thin" />light
<CoffeeBean size={24} weight="light" />bold
<CoffeeBean size={24} weight="bold" />fill
<CoffeeBean size={24} weight="fill" />duotone
<CoffeeBean size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- commerce
- Keywords
- *new*teajavabeveragesdrinkscafecupmugespressocappuccinolatteplaceslocationsbarsrestaurantsfood
FAQ
- What is the coffee bean icon used for?
- It's used to represent coffee, coffee shops, or coffee-related items in UI designs. It falls under the 'commerce' category.
- How do I use the coffee bean icon in React?
- You can import and use it like this: import { CoffeeBean } from '@phosphor-icons/react'. Then render it as <CoffeeBean />.
- What is the license for this icon?
- The Phosphor icon library, including the coffee bean icon, is distributed under the MIT license.
Related icons
The same idea in other libraries, and near matches in Phosphor.
Looking for something else? Search Phosphor and 4 more libraries by description →
The search behind these pages runs as a Claude Code skill. What skills are and how I ship them →