Vela UI Docs
venizia.ai

car

Car, 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-car.

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

Installation

pnpm dlx velaui add @velaui/icon-car

Usage

// components/icons/car.tsx
import Car from "@/components/icons/car"

<Car 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 CarProps extends React.SVGProps<SVGSVGElement> {
  size?: number | string;
}

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Car({ size = 24, strokeWidth = 1, className, ref, ...props }: CarProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M4 14.5V12.1707C4 11.0392 4.89543 10.122 6 10.122M4 14.5C4 15.6315 4.89543 16.5488 6 16.5488H18C19.1046 16.5488 20 15.6315 20 14.5M4 14.5V17.6341C4 18.3885 4.59695 19 5.33333 19H6.66667C7.40305 19 8 18.3885 8 17.6341V16.5488M20 14.5V12.1707C20 11.0392 19.1046 10.122 18 10.122H6M20 14.5V17.6341C20 18.3885 19.403 19 18.6667 19H17.3333C16.597 19 16 18.3885 16 17.6341V16.5488M6 10.122L7.06939 6.01392C7.22504 5.41602 7.75364 5 8.3577 5H15.7057C16.2796 5 16.7891 5.3762 16.9706 5.93393L18.3333 10.122M6.33333 13.1951H8.66667M15.3333 13.1951H17.6667" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
Car.displayName = "Car";

export default Car;