Vela UI Docs
venizia.ai

arrow-right-contained-01

ArrowRightContained01, 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-01.

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

Installation

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

Usage

// components/icons/arrow-right-contained-01.tsx
import ArrowRightContained01 from "@/components/icons/arrow-right-contained-01"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function ArrowRightContained01({ size = 24, strokeWidth = 0, className, ref, ...props }: ArrowRightContained01Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M11.2585 7.50291C11.0818 7.29077 10.7665 7.26211 10.5543 7.43889C10.3422 7.61567 10.3135 7.93095 10.4903 8.14309L10.8744 7.823L11.2585 7.50291ZM14.189 11.8005L14.5731 12.1206C14.7277 11.9352 14.7277 11.6658 14.5731 11.4804L14.189 11.8005ZM10.4903 15.4579C10.3135 15.6701 10.3422 15.9853 10.5543 16.1621C10.7665 16.3389 11.0818 16.3102 11.2585 16.0981L10.8744 15.778L10.4903 15.4579ZM10.8744 7.823L10.4903 8.14309L13.8049 12.1206L14.189 11.8005L14.5731 11.4804L11.2585 7.50291L10.8744 7.823ZM14.189 11.8005L13.8049 11.4804L10.4903 15.4579L10.8744 15.778L11.2585 16.0981L14.5731 12.1206L14.189 11.8005ZM12 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>
  );
}
ArrowRightContained01.displayName = "ArrowRightContained01";

export default ArrowRightContained01;