The Phosphor coffee icon visually represents a hot beverage, commonly used to signify coffee shops, ordering coffee, or related commerce and food services within a user interface.
Common uses
- Button to order coffee
- Label for a cafe location
- Menu item for a coffee drink
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { Coffee } from '@phosphor-icons/react';
<Coffee size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<Coffee size={24} />thin
<Coffee size={24} weight="thin" />light
<Coffee size={24} weight="light" />bold
<Coffee size={24} weight="bold" />fill
<Coffee size={24} weight="fill" />duotone
<Coffee size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- commerce
- Keywords
- teajavabeveragesdrinkscafecupmugespressocappuccinolatteplaceslocationsbarsrestaurantsfooddining
FAQ
- What does the coffee icon represent?
- It depicts a steaming cup of coffee, suitable for representing coffee, cafes, or related commerce.
- How do I use the coffee icon in React?
- You can import and use it like this: `import { Coffee } from '@phosphor-icons/react'`. Then render it as `<Coffee />`.
- What is the license for the Phosphor coffee icon?
- The Phosphor icon library, including the coffee icon, is available 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 →