The Phosphor bag icon depicts a simple, open bag, commonly used to represent shopping carts, wishlists, or general e-commerce functionality in user interfaces.
Common uses
- Shopping cart indicator
- Wishlist item
- E-commerce category link
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { Bag } from '@phosphor-icons/react';
<Bag size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<Bag size={24} />thin
<Bag size={24} weight="thin" />light
<Bag size={24} weight="light" />bold
<Bag size={24} weight="bold" />fill
<Bag size={24} weight="fill" />duotone
<Bag size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- commerce
- Keywords
- suitcasevalisebaggagefoldersportfoliocommerceobjectsbag
FAQ
- What does the bag icon represent?
- It visually signifies items related to commerce, such as a shopping cart or a wishlist.
- How do I use the bag icon in React?
- Import it from the library like this: import { Bag } from '@phosphor-icons/react'.
- What is the license for this icon?
- The Phosphor icons, including the bag icon, are 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 →