Vela UI Docs
venizia.ai

arrow-up-contained-02

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

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

Installation

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

Usage

// components/icons/arrow-up-contained-02.tsx
import ArrowUpContained02 from "@/components/icons/arrow-up-contained-02"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function ArrowUpContained02({ size = 24, strokeWidth = 0, className, ref, ...props }: ArrowUpContained02Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M7.70238 10.9529C7.49024 11.1297 7.46158 11.445 7.63836 11.6571C7.81514 11.8693 8.13042 11.8979 8.34256 11.7212L8.02247 11.3371L7.70238 10.9529ZM12 8.02247L12.3201 7.63836C12.1346 7.48384 11.8653 7.48384 11.6799 7.63836L12 8.02247ZM15.6574 11.7212C15.8695 11.8979 16.1848 11.8693 16.3616 11.6571C16.5384 11.445 16.5097 11.1297 16.2976 10.9529L15.9775 11.3371L15.6574 11.7212ZM11.5 15.9775C11.5 16.2536 11.7238 16.4775 12 16.4775C12.2761 16.4775 12.5 16.2536 12.5 15.9775H12H11.5ZM8.02247 11.3371L8.34256 11.7212L12.3201 8.40658L12 8.02247L11.6799 7.63836L7.70238 10.9529L8.02247 11.3371ZM12 8.02247L11.6799 8.40658L15.6574 11.7212L15.9775 11.3371L16.2976 10.9529L12.3201 7.63836L12 8.02247ZM12 8.02247H11.5V15.9775H12H12.5V8.02247H12ZM18.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.364ZM5.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.63604Z" fill="currentColor"/>
    </svg>
  );
}
ArrowUpContained02.displayName = "ArrowUpContained02";

export default ArrowUpContained02;