Vela UI Docs
venizia.ai

arrow-left-contained-01

ArrowLeftContained01, one of the 856 Vela UI icons, in the Arrows 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-arrow-left-contained-01.

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

Installation

pnpm dlx velaui add @velaui/icon-arrow-left-contained-01

Usage

// components/icons/arrow-left-contained-01.tsx
import ArrowLeftContained01 from "@/components/icons/arrow-left-contained-01"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function ArrowLeftContained01({ size = 24, strokeWidth = 0, className, ref, ...props }: ArrowLeftContained01Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M12.6799 16.0972C12.8567 16.3093 13.172 16.338 13.3841 16.1612C13.5963 15.9844 13.6249 15.6691 13.4481 15.457L13.064 15.7771L12.6799 16.0972ZM9.74945 11.7996L9.36534 11.4795C9.21082 11.6649 9.21082 11.9343 9.36534 12.1197L9.74945 11.7996ZM13.4481 8.14218C13.6249 7.93005 13.5963 7.61476 13.3841 7.43798C13.172 7.2612 12.8567 7.28986 12.6799 7.502L13.064 7.82209L13.4481 8.14218ZM13.064 15.7771L13.4481 15.457L10.1336 11.4795L9.74945 11.7996L9.36534 12.1197L12.6799 16.0972L13.064 15.7771ZM9.74945 11.7996L10.1336 12.1197L13.4481 8.14218L13.064 7.82209L12.6799 7.502L9.36534 11.4795L9.74945 11.7996ZM12 3V3.5C16.6944 3.5 20.5 7.30558 20.5 12H21H21.5C21.5 6.75329 17.2467 2.5 12 2.5V3ZM21 12H20.5C20.5 16.6944 16.6944 20.5 12 20.5V21V21.5C17.2467 21.5 21.5 17.2467 21.5 12H21ZM12 21V20.5C7.30558 20.5 3.5 16.6944 3.5 12H3H2.5C2.5 17.2467 6.75329 21.5 12 21.5V21ZM3 12H3.5C3.5 7.30558 7.30558 3.5 12 3.5V3V2.5C6.75329 2.5 2.5 6.75329 2.5 12H3Z" fill="currentColor"/>
    </svg>
  );
}
ArrowLeftContained01.displayName = "ArrowLeftContained01";

export default ArrowLeftContained01;