Vela UI Docs
venizia.ai

arrow-down-contained-01

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

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

Installation

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

Usage

// components/icons/arrow-down-contained-01.tsx
import ArrowDownContained01 from "@/components/icons/arrow-down-contained-01"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function ArrowDownContained01({ size = 24, strokeWidth = 0, className, ref, ...props }: ArrowDownContained01Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M16.4971 11.2585C16.7092 11.0818 16.7379 10.7665 16.5611 10.5543C16.3843 10.3422 16.069 10.3135 15.8569 10.4903L16.177 10.8744L16.4971 11.2585ZM12.1995 14.189L11.8794 14.5731C12.0648 14.7277 12.3342 14.7277 12.5196 14.5731L12.1995 14.189ZM8.54209 10.4903C8.32995 10.3135 8.01467 10.3422 7.83788 10.5543C7.6611 10.7665 7.68976 11.0818 7.9019 11.2585L8.22199 10.8744L8.54209 10.4903ZM16.177 10.8744L15.8569 10.4903L11.8794 13.8049L12.1995 14.189L12.5196 14.5731L16.4971 11.2585L16.177 10.8744ZM12.1995 14.189L12.5196 13.8049L8.54209 10.4903L8.22199 10.8744L7.9019 11.2585L11.8794 14.5731L12.1995 14.189ZM21 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>
  );
}
ArrowDownContained01.displayName = "ArrowDownContained01";

export default ArrowDownContained01;