Vela UI Docs
venizia.ai

card-down

CardDown, one of the 856 Vela UI icons, in the General 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-card-down.

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

Installation

pnpm dlx velaui add @velaui/icon-card-down

Usage

// components/icons/card-down.tsx
import CardDown from "@/components/icons/card-down"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function CardDown({ size = 24, strokeWidth = 1, className, ref, ...props }: CardDownProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M14.1002 18.5786H4.50057C3.17511 18.5786 2.10061 17.5041 2.10057 16.1787L2.10031 7.17888C2.10027 5.85337 3.1748 4.77881 4.50031 4.77881H18.8998C20.2253 4.77881 21.2998 5.8527 21.2998 7.17822L21.2999 11.3788M2.69985 8.97866H20.6998M17.0997 16.889L19.4454 19.2212L21.8997 16.7786M19.4454 19.2212L19.4454 13.7786" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
CardDown.displayName = "CardDown";

export default CardDown;