Shopping Cart Icon Generator

What the shopping cart icon means

Items selected but not yet purchased. Distinct from a bag, which in some markets implies a completed purchase.

Commerce icons carry a specific transactional promise, and getting the wrong one creates real confusion: a cart means "not yet purchased", a bag often means "purchased", a receipt means "already paid". Users act on that distinction. As app icons this class tends to be detail-heavy — wheels, handles, stripes and zigzag edges — which means aggressive simplification is usually required before the mark works at small sizes. Solid-filling the shape rather than outlining it is the most reliable fix.

Where you will actually see it

• e-commerce headers with an item-count badge
• add-to-cart buttons
• app icons for shopping and grocery apps

Drawing the shopping cart at 16 pixels

The two wheels are small circles that fill in and turn the cart into a solid trapezoid. Keep them open and generous.

Stroke weight is the control that matters most here. Lucide icons are drawn on a 24 × 24 grid with a 2px stroke, which means that when the icon is scaled down to 16px the stroke is effectively 1.33px — below one device pixel on a standard-density display. Raising the stroke to 2.5 or 3 before exporting keeps the shape solid; lowering it to 1.5 suits large app icons where a heavy stroke looks clumsy. The editor exposes this as a slider, so you can find the value that survives your smallest target size rather than guessing.

Using it in code

If you want the icon in a Vue project rather than as a downloaded asset, it is a named export of the lucide package:

import { ShoppingCart } from 'lucide-vue-next'

<ShoppingCart :size="24" :stroke-width="2" />

The download button above gives you something different: the icon composed onto a background with a corner radius, exported as a flat SVG path set. The exporter converts the icon out of its <foreignObject> wrapper first, because a foreign object taints an HTML canvas and would otherwise break PNG and ICO rasterisation.

Related icons

Other icons in the commerce group.