Vela UI Docs
venizia.ai

arrow-left-contained-02

ArrowLeftContained02, 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-02.

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

Installation

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

Usage

// components/icons/arrow-left-contained-02.tsx
import ArrowLeftContained02 from "@/components/icons/arrow-left-contained-02"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function ArrowLeftContained02({ size = 24, strokeWidth = 0, className, ref, ...props }: ArrowLeftContained02Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M10.9529 16.2976C11.1297 16.5098 11.445 16.5384 11.6571 16.3616C11.8693 16.1849 11.8979 15.8696 11.7212 15.6574L11.3371 15.9775L10.9529 16.2976ZM8.02247 12L7.63836 11.6799C7.48384 11.8654 7.48384 12.1347 7.63836 12.3201L8.02247 12ZM11.7212 8.34262C11.8979 8.13048 11.8693 7.8152 11.6571 7.63841C11.445 7.46163 11.1297 7.49029 10.9529 7.70243L11.3371 8.02252L11.7212 8.34262ZM15.9775 12.5C16.2536 12.5 16.4775 12.2762 16.4775 12C16.4775 11.7239 16.2536 11.5 15.9775 11.5V12V12.5ZM11.3371 15.9775L11.7212 15.6574L8.40658 11.6799L8.02247 12L7.63836 12.3201L10.9529 16.2976L11.3371 15.9775ZM8.02247 12L8.40658 12.3201L11.7212 8.34262L11.3371 8.02252L10.9529 7.70243L7.63836 11.6799L8.02247 12ZM8.02247 12V12.5H15.9775V12V11.5H8.02247V12ZM5.63604 5.63604L5.98959 5.98959C9.30905 2.67014 14.691 2.67014 18.0104 5.98959L18.364 5.63604L18.7175 5.28249C15.0075 1.5725 8.99247 1.5725 5.28249 5.28249L5.63604 5.63604ZM18.364 5.63604L18.0104 5.98959C21.3299 9.30905 21.3299 14.691 18.0104 18.0104L18.364 18.364L18.7175 18.7175C22.4275 15.0075 22.4275 8.99247 18.7175 5.28249L18.364 5.63604ZM18.364 18.364L18.0104 18.0104C14.691 21.3299 9.30905 21.3299 5.98959 18.0104L5.63604 18.364L5.28249 18.7175C8.99247 22.4275 15.0075 22.4275 18.7175 18.7175L18.364 18.364ZM5.63604 18.364L5.98959 18.0104C2.67014 14.691 2.67014 9.30905 5.98959 5.98959L5.63604 5.63604L5.28249 5.28249C1.5725 8.99247 1.5725 15.0075 5.28249 18.7175L5.63604 18.364Z" fill="currentColor"/>
    </svg>
  );
}
ArrowLeftContained02.displayName = "ArrowLeftContained02";

export default ArrowLeftContained02;