Vela UI Docs
venizia.ai

train

Train, 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-train.

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

Installation

pnpm dlx velaui add @velaui/icon-train

Usage

// components/icons/train.tsx
import Train from "@/components/icons/train"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Train({ size = 24, strokeWidth = 1, className, ref, ...props }: TrainProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M5.99998 20.4002L4.19998 22.8002M20.3185 22.7799L18.4661 20.42M8.40044 16.8724V16.8002M15.6004 16.8724V16.8002M4.79998 13.8002H19.8M12 4.8002V13.2002M8.99998 1.2002H15M6.56468 20.4002H17.4353C19.0726 20.4002 20.4 19.0729 20.4 17.4355V7.7649C20.4 6.12754 19.0726 4.8002 17.4353 4.8002H6.56468C4.92732 4.8002 3.59998 6.12754 3.59998 7.7649V17.4355C3.59998 19.0729 4.92732 20.4002 6.56468 20.4002Z" stroke="currentColor" strokeLinecap="round"/>
    </svg>
  );
}
Train.displayName = "Train";

export default Train;