Shopping Cart SVG icon, rounded

Shopping Cart SVG icon, rounded

A wheeled cart represents selected goods ready for purchase. Add it to an online store header or a mobile shopping app navigation bar to open the current basket.

Similar SVGs

More from Rounded Interface Icons

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/cCfseFiim5p_/amnt.svg" alt="Shopping Cart" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><g id="layer-1" data-name="Group 1"><path d="M17 20L53 20L49.6 35.8C49.2 37.7 47.6 39 45.7 39L23 39L17 20Z" fill="#a8dadc" stroke="#264653" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 12L13 12C14.4 12 15.6 12.9 16 14.3L23 39L21.6 42.3C21.1 43.6 22 45 23.4 45L48 45" fill="none" stroke="#264653" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M30 51C30 53.21 28.21 55 26 55C23.79 55 22 53.21 22 51C22 48.79 23.79 47 26 47C28.21 47 30 48.79 30 51Z" fill="#a8dadc" stroke="#264653" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M48 51C48 53.21 46.21 55 44 55C41.79 55 40 53.21 40 51C40 48.79 41.79 47 44 47C46.21 47 48 48.79 48 51Z" fill="#a8dadc" stroke="#264653" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
CSS background-image
.shopping-cart {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/cCfseFiim5p_/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.shopping-cart {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/cCfseFiim5p_/amnt.svg") center / contain no-repeat;
}
React
import ShoppingCartSvg from "./shopping-cart.jsx"; // from the React tab above

<ShoppingCartSvg width={48} height={48} />

Tags

Made with AMNT

AMNT SVG Pro 1.1 drew this from the words Shopping cart. Flat, rounded icons in a consistent set. Use two colours and clean 2 px lines with rounded ends and corners. Keep the shapes simple, balanced, and easy to recognise at small sizes. Use the same proportions, line weight, and colour placement for every icon. as part of the pack Rounded Interface Icons. Want one like it? Make your own in the SVG studio.

Licence: free. A Free account may use it for personal work; Pro and Max download it with a commercial licence, fixed at download, forever. No credit needed. Read the licence

Settings