Vela UI Docs
venizia.ai

truck

Truck, 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-truck.

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

Installation

pnpm dlx velaui add @velaui/icon-truck

Usage

// components/icons/truck.tsx
import Truck from "@/components/icons/truck"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Truck({ size = 24, strokeWidth = 1, className, ref, ...props }: TruckProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M5.14288 17.0288H4.2286C3.2187 17.0288 2.40002 16.2101 2.40002 15.2002V6.97164C2.40002 5.96175 3.2187 5.14307 4.2286 5.14307H12.4572C13.4671 5.14307 14.2857 5.96175 14.2857 6.97164V15.2002C14.2857 16.2101 13.4671 17.0288 12.4572 17.0288H11.5429M15.6572 17.0288H15.2C14.6951 17.0288 14.2857 16.6194 14.2857 16.1145V8.34307C14.2857 7.83812 14.6951 7.42878 15.2 7.42878H17.5034C17.7812 7.42878 18.0439 7.55503 18.2174 7.77192L21.3997 11.7498C21.5294 11.9119 21.6 12.1133 21.6 12.3209V16.1145C21.6 16.6194 21.1907 17.0288 20.6857 17.0288M10.6286 16.5716C10.6286 17.834 9.60525 18.8574 8.34288 18.8574C7.08052 18.8574 6.05717 17.834 6.05717 16.5716C6.05717 15.3093 7.08052 14.2859 8.34288 14.2859C9.60525 14.2859 10.6286 15.3093 10.6286 16.5716ZM20.2286 16.5716C20.2286 17.834 19.2052 18.8574 17.9429 18.8574C16.6805 18.8574 15.6572 17.834 15.6572 16.5716C15.6572 15.3093 16.6805 14.2859 17.9429 14.2859C19.2052 14.2859 20.2286 15.3093 20.2286 16.5716Z" stroke="currentColor" strokeLinecap="round"/>
    </svg>
  );
}
Truck.displayName = "Truck";

export default Truck;