Vela UI Docs
venizia.ai

file-code

FileCode, 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-code.

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

Installation

pnpm dlx velaui add @velaui/icon-file-code

Usage

// components/icons/file-code.tsx
import FileCode from "@/components/icons/file-code"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function FileCode({ size = 24, strokeWidth = 0, className, ref, ...props }: FileCodeProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M15.1029 3.10333L15.4565 2.74978V2.74978L15.1029 3.10333ZM18.497 6.49745L18.1435 6.851V6.851L18.497 6.49745ZM10.0464 16.3539C10.2417 16.5492 10.5583 16.5492 10.7535 16.3539C10.9488 16.1587 10.9488 15.8421 10.7535 15.6468L10.4 16.0004L10.0464 16.3539ZM8.39999 14.0004L8.04643 13.6468C7.95267 13.7406 7.89999 13.8678 7.89999 14.0004C7.89999 14.133 7.95267 14.2602 8.04643 14.3539L8.39999 14.0004ZM10.7535 12.3539C10.9488 12.1587 10.9488 11.8421 10.7535 11.6468C10.5583 11.4516 10.2417 11.4516 10.0464 11.6468L10.4 12.0004L10.7535 12.3539ZM13.9535 11.6468C13.7583 11.4516 13.4417 11.4516 13.2464 11.6468C13.0512 11.8421 13.0512 12.1587 13.2464 12.3539L13.6 12.0004L13.9535 11.6468ZM15.6 14.0004L15.9535 14.3539C16.0473 14.2602 16.1 14.133 16.1 14.0004C16.1 13.8678 16.0473 13.7406 15.9535 13.6468L15.6 14.0004ZM13.2464 15.6468C13.0512 15.8421 13.0512 16.1587 13.2464 16.3539C13.4417 16.5492 13.7583 16.5492 13.9535 16.3539L13.6 16.0004L13.2464 15.6468ZM16.8 21.6004V21.1004H7.19999V21.6004V22.1004H16.8V21.6004ZM4.79999 19.2004H5.29999V4.80039H4.79999H4.29999V19.2004H4.79999ZM7.19999 2.40039V2.90039H13.4059V2.40039V1.90039H7.19999V2.40039ZM19.2 8.1945H18.7V19.2004H19.2H19.7V8.1945H19.2ZM13.4059 2.40039V2.90039C13.9098 2.90039 14.3931 3.10057 14.7494 3.45689L15.1029 3.10333L15.4565 2.74978C14.9126 2.20593 14.175 1.90039 13.4059 1.90039V2.40039ZM7.19999 21.6004V21.1004C6.15065 21.1004 5.29999 20.2497 5.29999 19.2004H4.79999H4.29999C4.29999 20.802 5.59836 22.1004 7.19999 22.1004V21.6004ZM16.8 21.6004V22.1004C18.4016 22.1004 19.7 20.802 19.7 19.2004H19.2H18.7C18.7 20.2497 17.8493 21.1004 16.8 21.1004V21.6004ZM18.497 6.49745L18.1435 6.851C18.4998 7.20732 18.7 7.69059 18.7 8.1945H19.2H19.7C19.7 7.42537 19.3945 6.68775 18.8506 6.14389L18.497 6.49745ZM4.79999 4.80039H5.29999C5.29999 3.75105 6.15065 2.90039 7.19999 2.90039V2.40039V1.90039C5.59836 1.90039 4.29999 3.19876 4.29999 4.80039H4.79999ZM13.2 2.40039H12.7V7.20039H13.2H13.7V2.40039H13.2ZM14.4 8.40039V8.90039H19.2V8.40039V7.90039H14.4V8.40039ZM13.2 7.20039H12.7C12.7 8.13927 13.4611 8.90039 14.4 8.90039V8.40039V7.90039C14.0134 7.90039 13.7 7.58699 13.7 7.20039H13.2ZM15.1029 3.10333L14.7494 3.45689L18.1435 6.851L18.497 6.49745L18.8506 6.14389L15.4565 2.74978L15.1029 3.10333ZM10.4 16.0004L10.7535 15.6468L8.75354 13.6468L8.39999 14.0004L8.04643 14.3539L10.0464 16.3539L10.4 16.0004ZM8.39999 14.0004L8.75354 14.3539L10.7535 12.3539L10.4 12.0004L10.0464 11.6468L8.04643 13.6468L8.39999 14.0004ZM13.6 12.0004L13.2464 12.3539L15.2464 14.3539L15.6 14.0004L15.9535 13.6468L13.9535 11.6468L13.6 12.0004ZM15.6 14.0004L15.2464 13.6468L13.2464 15.6468L13.6 16.0004L13.9535 16.3539L15.9535 14.3539L15.6 14.0004Z" fill="currentColor"/>
    </svg>
  );
}
FileCode.displayName = "FileCode";

export default FileCode;