E-commerce icon

Cart JSX Icon

Q: Is the Cart JSX icon free?

Yes. You can copy the Cart JSX component and use it in React and Next.js projects.

Q: Can I customize the Cart icon?

Yes. Edit SVG attributes or pass className, width, height and color props depending on the component.

Copy the Cart icon as an optimized JSX SVG component for React, Next.js, dashboards, landing pages and Tailwind interfaces.

Browse all icons

ComponentCartColorIcon

FilecartColorIcon.jsx

CategoryE-commerce

Copy-ready code

Cart React JSX component

export const CartColorIcon = ({ width = "40px", height = "40px", color = "#000", ...props }) => (
  <svg {...props} width={width} height={height} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M2.23737 2.28845C1.84442 2.15746 1.41968 2.36983 1.28869 2.76279C1.15771 3.15575 1.37008 3.58049 1.76303 3.71147L2.02794 3.79978C2.70435 4.02524 3.15155 4.17551 3.481 4.32877C3.79296 4.47389 3.92784 4.59069 4.01426 4.71059C4.10068 4.83049 4.16883 4.99538 4.20785 5.33722C4.24907 5.69823 4.2502 6.17 4.2502 6.883L4.2502 9.55484C4.25018 10.9224 4.25017 12.0247 4.36673 12.8917C4.48774 13.7918 4.74664 14.5497 5.34855 15.1516C5.95047 15.7535 6.70834 16.0124 7.60845 16.1334C8.47542 16.25 9.57773 16.25 10.9453 16.25H18.0002C18.4144 16.25 18.7502 15.9142 18.7502 15.5C18.7502 15.0857 18.4144 14.75 18.0002 14.75H11.0002C9.56479 14.75 8.56367 14.7484 7.80832 14.6468C7.07455 14.5482 6.68598 14.3677 6.40921 14.091C6.17403 13.8558 6.00839 13.5398 5.9034 13H16.0222C16.9817 13 17.4614 13 17.8371 12.7522C18.2128 12.5045 18.4017 12.0636 18.7797 11.1817L19.2082 10.1817C20.0177 8.2929 20.4225 7.34849 19.9779 6.67422C19.5333 5.99996 18.5058 5.99996 16.4508 5.99996H5.74526C5.73936 5.69227 5.72644 5.41467 5.69817 5.16708C5.64282 4.68226 5.52222 4.2374 5.23112 3.83352C4.94002 3.42965 4.55613 3.17456 4.1137 2.96873C3.69746 2.7751 3.16814 2.59868 2.54176 2.38991L2.23737 2.28845Z"
      fill={color}
    />
    <path d="M7.5 18C8.32843 18 9 18.6716 9 19.5C9 20.3284 8.32843 21 7.5 21C6.67157 21 6 20.3284 6 19.5C6 18.6716 6.67157 18 7.5 18Z" fill={color} />
    <path d="M16.5 18.0001C17.3284 18.0001 18 18.6716 18 19.5001C18 20.3285 17.3284 21.0001 16.5 21.0001C15.6716 21.0001 15 20.3285 15 19.5001C15 18.6716 15.6716 18.0001 16.5 18.0001Z" fill={color} />
  </svg>
);

How to use the Cart icon

import { CartColorIcon } from "@/assets/icons/cartColorIcon"

export default function Example() {
  return <CartColorIcon width="32px" height="32px" />
}

Built for the web

Use it in your stack

This copy-ready component works in React and Next.js projects, and the SVG can be adapted for any interface.

ReactNext.jsJSXSVGE-commerce icons

Looking for a similar mark? Browse the related icons below or explore the full e-commerce collection.

Related JSX icons

Alibaba.com

Allegro

Braintree

Buy Me A Coffee

CafePress

Carrefour

Cart

Deliveroo

FAQ

Is the Cart JSX icon free?

Yes. You can copy the JSX component and use it in React and Next.js projects.

Can I customize it?

Yes. Edit the SVG attributes or pass className, width, height and color props depending on the component.