Vela UI Docs
venizia.ai

arrow-up-left-contained

ArrowUpLeftContained, 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-up-left-contained.

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

Installation

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

Usage

// components/icons/arrow-up-left-contained.tsx
import ArrowUpLeftContained from "@/components/icons/arrow-up-left-contained"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function ArrowUpLeftContained({ size = 24, strokeWidth = 0, className, ref, ...props }: ArrowUpLeftContainedProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M9.7015 8.22074C9.42649 8.19574 9.18329 8.39841 9.15829 8.67342C9.13329 8.94843 9.33596 9.19163 9.61097 9.21663L9.65623 8.71869L9.7015 8.22074ZM14.8125 9.18744L15.3105 9.14217C15.2886 8.9018 15.0982 8.71135 14.8578 8.68949L14.8125 9.18744ZM14.7833 14.389C14.8083 14.664 15.0515 14.8667 15.3265 14.8417C15.6015 14.8167 15.8042 14.5735 15.7792 14.2985L15.2813 14.3437L14.7833 14.389ZM8.83393 14.4589C8.63867 14.6542 8.63867 14.9708 8.83393 15.166C9.02919 15.3613 9.34577 15.3613 9.54103 15.166L9.18748 14.8125L8.83393 14.4589ZM9.65623 8.71869L9.61097 9.21663L14.7673 9.68539L14.8125 9.18744L14.8578 8.68949L9.7015 8.22074L9.65623 8.71869ZM14.8125 9.18744L14.3146 9.23271L14.7833 14.389L15.2813 14.3437L15.7792 14.2985L15.3105 9.14217L14.8125 9.18744ZM14.8125 9.18744L14.459 8.83389L8.83393 14.4589L9.18748 14.8125L9.54103 15.166L15.1661 9.54099L14.8125 9.18744ZM21 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 12H3ZM12 3V3.5C16.6944 3.5 20.5 7.30558 20.5 12H21H21.5C21.5 6.75329 17.2467 2.5 12 2.5V3Z" fill="currentColor"/>
    </svg>
  );
}
ArrowUpLeftContained.displayName = "ArrowUpLeftContained";

export default ArrowUpLeftContained;