Vela UI Docs
venizia.ai

download

Download, 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-download.

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

Installation

pnpm dlx velaui add @velaui/icon-download

Usage

// components/icons/download.tsx
import Download from "@/components/icons/download"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Download({ size = 24, strokeWidth = 1, className, ref, ...props }: DownloadProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M8.01562 15.784H5.21429C3.43908 15.784 2 14.5585 2 12.7614C2 10.9644 3.43908 9.50762 5.21429 9.50762C5.335 9.50762 5.45417 9.51436 5.57143 9.52748V9.50762H5.61564C5.58646 9.27074 5.57143 9.02942 5.57143 8.78455C5.57143 5.58983 8.1298 3 11.2857 3C13.4228 3 15.2859 4.1876 16.2661 5.94642C16.5056 5.91075 16.7507 5.89227 17 5.89227C19.7614 5.89227 22 8.15838 22 10.9538C22 13.5036 20.1374 15.3819 17.7143 15.7328H15.125M11.6429 9.86915V21M14.1094 18.5008L11.6429 21L9.10937 18.5008" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
Download.displayName = "Download";

export default Download;