Vela UI Docs
venizia.ai

file

File, one of the 856 Vela UI icons, in the Files 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-file.

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

Installation

pnpm dlx velaui add @velaui/icon-file

Usage

// components/icons/file.tsx
import File from "@/components/icons/file"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function File({ size = 24, strokeWidth = 1, className, ref, ...props }: FileProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M13.1667 3V7.5C13.1667 8.12132 13.689 8.625 14.3333 8.625H19M13.3668 3H7.33333C6.04467 3 5 4.00736 5 5.25V18.75C5 19.9926 6.04467 21 7.33333 21H16.6667C17.9553 21 19 19.9926 19 18.75V8.43198C19 7.83524 18.7542 7.26295 18.3166 6.84099L15.0168 3.65901C14.5792 3.23705 13.9857 3 13.3668 3Z" stroke="currentColor"/>
    </svg>
  );
}
File.displayName = "File";

export default File;