Vela UI Docs
venizia.ai

arrow-right-contained-02

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

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

Installation

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

Usage

// components/icons/arrow-right-contained-02.tsx
import ArrowRightContained02 from "@/components/icons/arrow-right-contained-02"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function ArrowRightContained02({ size = 24, strokeWidth = 0, className, ref, ...props }: ArrowRightContained02Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M13.0471 7.70243C12.8703 7.49029 12.555 7.46163 12.3429 7.63841C12.1307 7.8152 12.1021 8.13048 12.2788 8.34262L12.6629 8.02252L13.0471 7.70243ZM15.9775 12L16.3616 12.3201C16.5162 12.1347 16.5162 11.8654 16.3616 11.6799L15.9775 12ZM12.2788 15.6574C12.1021 15.8696 12.1307 16.1849 12.3429 16.3616C12.555 16.5384 12.8703 16.5098 13.0471 16.2976L12.6629 15.9775L12.2788 15.6574ZM8.02253 11.5C7.74638 11.5 7.52253 11.7239 7.52253 12C7.52253 12.2762 7.74638 12.5 8.02253 12.5V12L8.02253 11.5ZM12.6629 8.02252L12.2788 8.34262L15.5934 12.3201L15.9775 12L16.3616 11.6799L13.0471 7.70243L12.6629 8.02252ZM15.9775 12L15.5934 11.6799L12.2788 15.6574L12.6629 15.9775L13.0471 16.2976L16.3616 12.3201L15.9775 12ZM15.9775 12V11.5L8.02253 11.5L8.02253 12V12.5L15.9775 12.5V12ZM18.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>
  );
}
ArrowRightContained02.displayName = "ArrowRightContained02";

export default ArrowRightContained02;