Vela UI Docs
venizia.ai

plane

Plane, 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-plane.

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

Installation

pnpm dlx velaui add @velaui/icon-plane

Usage

// components/icons/plane.tsx
import Plane from "@/components/icons/plane"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Plane({ size = 24, strokeWidth = 1, className, ref, ...props }: PlaneProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M2.87725 15.3975L6.6941 17.3059L8.60252 21.1228L10.5109 19.2144V16.3517L13.8507 13.012L16.7133 21.5999L19.576 18.7373L17.1904 9.67225L21.0073 5.85541C21.7978 5.06491 21.7978 3.78327 21.0073 2.99277C20.2168 2.20228 18.9351 2.20228 18.1446 2.99277L14.3278 6.80962L5.26278 4.42409L2.40015 7.28673L10.9881 10.1494L7.64831 13.4891H4.78568L2.87725 15.3975Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
Plane.displayName = "Plane";

export default Plane;