Vela UI Docs
venizia.ai

arrow-up-right-contained

ArrowUpRightContained, 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-right-contained.

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

Installation

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

Usage

// components/icons/arrow-up-right-contained.tsx
import ArrowUpRightContained from "@/components/icons/arrow-up-right-contained"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function ArrowUpRightContained({ size = 24, strokeWidth = 0, className, ref, ...props }: ArrowUpRightContainedProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M8.22074 14.2985C8.19574 14.5735 8.39841 14.8167 8.67342 14.8417C8.94843 14.8667 9.19163 14.664 9.21663 14.389L8.71869 14.3438L8.22074 14.2985ZM9.18744 9.18748L9.14217 8.68953C8.9018 8.71139 8.71135 8.90184 8.68949 9.14221L9.18744 9.18748ZM14.389 9.21667C14.664 9.19167 14.8667 8.94847 14.8417 8.67346C14.8167 8.39845 14.5735 8.19578 14.2985 8.22078L14.3437 8.71873L14.389 9.21667ZM14.4589 15.1661C14.6542 15.3613 14.9708 15.3613 15.166 15.1661C15.3613 14.9708 15.3613 14.6542 15.166 14.459L14.8125 14.8125L14.4589 15.1661ZM8.71869 14.3438L9.21663 14.389L9.68539 9.23275L9.18744 9.18748L8.68949 9.14221L8.22074 14.2985L8.71869 14.3438ZM9.18744 9.18748L9.23271 9.68543L14.389 9.21667L14.3437 8.71873L14.2985 8.22078L9.14217 8.68953L9.18744 9.18748ZM9.18744 9.18748L8.83389 9.54103L14.4589 15.1661L14.8125 14.8125L15.166 14.459L9.54099 8.83393L9.18744 9.18748ZM12 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>
  );
}
ArrowUpRightContained.displayName = "ArrowUpRightContained";

export default ArrowUpRightContained;