Vela UI Docs
venizia.ai

arrow-up-contained-01

ArrowUpContained01, 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-contained-01.

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

Installation

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

Usage

// components/icons/arrow-up-contained-01.tsx
import ArrowUpContained01 from "@/components/icons/arrow-up-contained-01"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function ArrowUpContained01({ size = 24, strokeWidth = 0, className, ref, ...props }: ArrowUpContained01Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M7.90281 12.6799C7.69067 12.8567 7.66201 13.172 7.83879 13.3841C8.01557 13.5963 8.33085 13.6249 8.54299 13.4481L8.2229 13.064L7.90281 12.6799ZM12.2004 9.74945L12.5205 9.36534C12.3351 9.21082 12.0657 9.21082 11.8803 9.36534L12.2004 9.74945ZM15.8578 13.4481C16.07 13.6249 16.3852 13.5963 16.562 13.3841C16.7388 13.172 16.7101 12.8567 16.498 12.6799L16.1779 13.064L15.8578 13.4481ZM8.2229 13.064L8.54299 13.4481L12.5205 10.1336L12.2004 9.74945L11.8803 9.36534L7.90281 12.6799L8.2229 13.064ZM12.2004 9.74945L11.8803 10.1336L15.8578 13.4481L16.1779 13.064L16.498 12.6799L12.5205 9.36534L12.2004 9.74945ZM21 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>
  );
}
ArrowUpContained01.displayName = "ArrowUpContained01";

export default ArrowUpContained01;