The Heroicons shopping cart icon visually represents an online store's cart, commonly used to indicate where users can view or manage items they intend to purchase.
Common uses
- Add to cart button
- View cart link/icon
- Checkout process indicator
Use it in React
Install
npm i @heroicons/reactImport & render
import { ShoppingCartIcon } from '@heroicons/react/24/outline';
<ShoppingCartIcon className="size-6" />Styles
Heroicons ships this icon in 4 styles — each its own import:
24/outline
<ShoppingCartIcon className="size-6" />24/solid
<ShoppingCartIcon className="size-6" />20/solid
<ShoppingCartIcon className="size-6" />16/solid
<ShoppingCartIcon className="size-6" />Details
- Library
- Heroicons (324 icons)
- License
- MIT
- viewBox
0 0 24 24- Keywords
- shoppingcartbagbasketecommercepurchase
FAQ
- What is the shopping cart icon used for?
- It's used to represent e-commerce functionality, such as adding items to a cart or navigating to the shopping cart page.
- How do I use the shopping cart icon in React?
- Import it using `import { ShoppingCartIcon } from '@heroicons/react/24/outline'` and then use it as a React component: `<ShoppingCartIcon className="h-6 w-6" />`.
- What is the license for the Heroicons shopping cart icon?
- The Heroicons library, including the shopping cart icon, is available under the MIT license.
Related icons
The same idea in other libraries, and near matches in Heroicons.
Looking for something else? Search Heroicons 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 →