Vela UI Docs
venizia.ai

arrow-down-right-contained

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

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

Installation

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

Usage

// components/icons/arrow-down-right-contained.tsx
import ArrowDownRightContained from "@/components/icons/arrow-down-right-contained"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function ArrowDownRightContained({ size = 24, strokeWidth = 0, className, ref, ...props }: ArrowDownRightContainedProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M15.7792 9.70154C15.8042 9.42653 15.6016 9.18333 15.3265 9.15833C15.0515 9.13333 14.8083 9.336 14.7833 9.61101L15.2813 9.65627L15.7792 9.70154ZM14.8125 14.8126L14.8578 15.3105C15.0982 15.2887 15.2886 15.0982 15.3105 14.8578L14.8125 14.8126ZM9.61097 14.7834C9.33596 14.8084 9.13329 15.0516 9.15829 15.3266C9.18329 15.6016 9.42649 15.8043 9.7015 15.7793L9.65623 15.2813L9.61097 14.7834ZM9.54104 8.83397C9.34577 8.6387 9.02919 8.6387 8.83393 8.83397C8.63867 9.02923 8.63867 9.34581 8.83393 9.54107L9.18748 9.18752L9.54104 8.83397ZM15.2813 9.65627L14.7833 9.61101L14.3146 14.7673L14.8125 14.8126L15.3105 14.8578L15.7792 9.70154L15.2813 9.65627ZM14.8125 14.8126L14.7673 14.3146L9.61097 14.7834L9.65623 15.2813L9.7015 15.7793L14.8578 15.3105L14.8125 14.8126ZM14.8125 14.8126L15.1661 14.459L9.54104 8.83397L9.18748 9.18752L8.83393 9.54107L14.459 15.1661L14.8125 14.8126ZM21 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>
  );
}
ArrowDownRightContained.displayName = "ArrowDownRightContained";

export default ArrowDownRightContained;