Vela UI Docs
venizia.ai

arrow-down-contained-02

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

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

Installation

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

Usage

// components/icons/arrow-down-contained-02.tsx
import ArrowDownContained02 from "@/components/icons/arrow-down-contained-02"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function ArrowDownContained02({ size = 24, strokeWidth = 0, className, ref, ...props }: ArrowDownContained02Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M16.2976 13.0471C16.5097 12.8703 16.5384 12.555 16.3616 12.3429C16.1848 12.1307 15.8695 12.1021 15.6574 12.2788L15.9775 12.6629L16.2976 13.0471ZM12 15.9775L11.6799 16.3616C11.8653 16.5162 12.1346 16.5162 12.3201 16.3616L12 15.9775ZM8.34256 12.2788C8.13042 12.1021 7.81514 12.1307 7.63836 12.3429C7.46158 12.555 7.49024 12.8703 7.70238 13.0471L8.02247 12.6629L8.34256 12.2788ZM12.5 8.02253C12.5 7.74638 12.2761 7.52253 12 7.52253C11.7238 7.52253 11.5 7.74638 11.5 8.02253H12H12.5ZM15.9775 12.6629L15.6574 12.2788L11.6799 15.5934L12 15.9775L12.3201 16.3616L16.2976 13.0471L15.9775 12.6629ZM12 15.9775L12.3201 15.5934L8.34256 12.2788L8.02247 12.6629L7.70238 13.0471L11.6799 16.3616L12 15.9775ZM12 15.9775H12.5V8.02253H12H11.5V15.9775H12ZM18.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.63604ZM18.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.63604Z" fill="currentColor"/>
    </svg>
  );
}
ArrowDownContained02.displayName = "ArrowDownContained02";

export default ArrowDownContained02;