Vela UI Docs
venizia.ai

cart

Cart, one of the 856 Vela UI icons, in the General group: a 24px grid drawn in currentColor, so it takes the colour of the text around it. It installs on its own as @velaui/icon-cart.

  • 16px
  • 20px
  • 24px
  • 32px

Installation

pnpm dlx velaui add @velaui/icon-cart

Usage

// components/icons/cart.tsx
import Cart from "@/components/icons/cart"

<Cart className="size-5 text-muted" />

In use

  • In a button

  • In a sentence

    Due Friday, or whenever the venue confirms.

  • In an input

  • As a badge

    Scheduled

  • In an empty state

    No events on this day yet.

    Browse blocks

Source

import * as React from "react";

export interface CartProps extends React.SVGProps<SVGSVGElement> {
  size?: number | string;
}

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Cart({ size = 24, strokeWidth = 0, className, ref, ...props }: CartProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M2.39999 2.49268C2.12385 2.49268 1.89999 2.71653 1.89999 2.99268C1.89999 3.26882 2.12385 3.49268 2.39999 3.49268V2.99268V2.49268ZM4.69253 2.99268L5.17514 2.86197C5.11612 2.64402 4.91833 2.49268 4.69253 2.49268V2.99268ZM8.4179 16.7479L7.93529 16.8786C8.00042 17.1191 8.23268 17.2749 8.47992 17.244L8.4179 16.7479ZM19.8806 15.3151L19.9426 15.8112C20.1549 15.7847 20.3269 15.6259 20.3702 15.4164L19.8806 15.3151ZM21.6 7.00462L22.0896 7.10592C22.1201 6.95866 22.0827 6.80551 21.9877 6.6889C21.8928 6.5723 21.7504 6.50462 21.6 6.50462V7.00462ZM5.7791 7.00462L5.29648 7.13532V7.13532L5.7791 7.00462ZM2.39999 2.99268V3.49268H4.69253V2.99268V2.49268H2.39999V2.99268ZM8.4179 16.7479L8.47992 17.244L19.9426 15.8112L19.8806 15.3151L19.8186 14.8189L8.35589 16.2518L8.4179 16.7479ZM19.8806 15.3151L20.3702 15.4164L22.0896 7.10592L21.6 7.00462L21.1104 6.90331L19.391 15.2138L19.8806 15.3151ZM4.69253 2.99268L4.20992 3.12338L5.29648 7.13532L5.7791 7.00462L6.26171 6.87391L5.17514 2.86197L4.69253 2.99268ZM5.7791 7.00462L5.29648 7.13532L7.93529 16.8786L8.4179 16.7479L8.90052 16.6172L6.26171 6.87391L5.7791 7.00462ZM21.6 7.00462V6.50462H5.7791V7.00462V7.50462H21.6V7.00462ZM12 20.4999H11.5C11.5 21.0522 11.0523 21.4999 10.5 21.4999V21.9999V22.4999C11.6046 22.4999 12.5 21.6045 12.5 20.4999H12ZM10.5 21.9999V21.4999C9.94771 21.4999 9.49999 21.0522 9.49999 20.4999H8.99999H8.49999C8.49999 21.6045 9.39542 22.4999 10.5 22.4999V21.9999ZM8.99999 20.4999H9.49999C9.49999 19.9477 9.94771 19.4999 10.5 19.4999V18.9999V18.4999C9.39542 18.4999 8.49999 19.3954 8.49999 20.4999H8.99999ZM10.5 18.9999V19.4999C11.0523 19.4999 11.5 19.9477 11.5 20.4999H12H12.5C12.5 19.3954 11.6046 18.4999 10.5 18.4999V18.9999ZM20 20.4999H19.5C19.5 21.0522 19.0523 21.4999 18.5 21.4999V21.9999V22.4999C19.6046 22.4999 20.5 21.6045 20.5 20.4999H20ZM18.5 21.9999V21.4999C17.9477 21.4999 17.5 21.0522 17.5 20.4999H17H16.5C16.5 21.6045 17.3954 22.4999 18.5 22.4999V21.9999ZM17 20.4999H17.5C17.5 19.9477 17.9477 19.4999 18.5 19.4999V18.9999V18.4999C17.3954 18.4999 16.5 19.3954 16.5 20.4999H17ZM18.5 18.9999V19.4999C19.0523 19.4999 19.5 19.9477 19.5 20.4999H20H20.5C20.5 19.3954 19.6046 18.4999 18.5 18.4999V18.9999Z" fill="currentColor"/>
    </svg>
  );
}
Cart.displayName = "Cart";

export default Cart;