Vela UI Docs
venizia.ai

folder-code

FolderCode, 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-folder-code.

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

Installation

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

Usage

// components/icons/folder-code.tsx
import FolderCode from "@/components/icons/folder-code"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function FolderCode({ size = 24, strokeWidth = 0, className, ref, ...props }: FolderCodeProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M10.0465 16.1539C10.2417 16.3492 10.5583 16.3492 10.7536 16.1539C10.9488 15.9587 10.9488 15.6421 10.7536 15.4468L10.4 15.8004L10.0465 16.1539ZM8.40002 13.8004L8.04647 13.4468C7.85121 13.6421 7.85121 13.9587 8.04647 14.1539L8.40002 13.8004ZM10.7536 12.1539C10.9488 11.9587 10.9488 11.6421 10.7536 11.4468C10.5583 11.2516 10.2417 11.2516 10.0465 11.4468L10.4 11.8004L10.7536 12.1539ZM13.9536 11.4468C13.7583 11.2516 13.4417 11.2516 13.2465 11.4468C13.0512 11.6421 13.0512 11.9587 13.2465 12.1539L13.6 11.8004L13.9536 11.4468ZM15.6 13.8004L15.9536 14.1539C16.1488 13.9587 16.1488 13.6421 15.9536 13.4468L15.6 13.8004ZM13.2465 15.4468C13.0512 15.6421 13.0512 15.9587 13.2465 16.1539C13.4417 16.3492 13.7583 16.3492 13.9536 16.1539L13.6 15.8004L13.2465 15.4468ZM3.77145 4.2002V4.7002H9.25717V4.2002V3.7002H3.77145V4.2002ZM10.6286 5.6002H10.1286V8.0002H10.6286H11.1286V5.6002H10.6286ZM10.6286 8.0002H10.1286V8.2002H10.6286H11.1286V8.0002H10.6286ZM9.25717 4.2002V4.7002C9.72877 4.7002 10.1286 5.09337 10.1286 5.6002H10.6286H11.1286C11.1286 4.56062 10.3004 3.7002 9.25717 3.7002V4.2002ZM3.77145 4.2002V3.7002C2.72822 3.7002 1.90002 4.56062 1.90002 5.6002H2.40002H2.90002C2.90002 5.09337 3.29985 4.7002 3.77145 4.7002V4.2002ZM2.40002 8.0002V8.5002H10.6286V8.0002V7.5002H2.40002V8.0002ZM10.6286 8.0002V8.5002H20.2286V8.0002V7.5002H10.6286V8.0002ZM21.6 9.40019H21.1V18.4002H21.6H22.1V9.40019H21.6ZM20.2286 19.8002V19.3002H3.77145V19.8002V20.3002H20.2286V19.8002ZM2.40002 18.4002H2.90002V8.0002H2.40002H1.90002V18.4002H2.40002ZM3.77145 19.8002V19.3002C3.29985 19.3002 2.90002 18.907 2.90002 18.4002H2.40002H1.90002C1.90002 19.4398 2.72822 20.3002 3.77145 20.3002V19.8002ZM21.6 18.4002H21.1C21.1 18.907 20.7002 19.3002 20.2286 19.3002V19.8002V20.3002C21.2718 20.3002 22.1 19.4398 22.1 18.4002H21.6ZM20.2286 8.0002V8.5002C20.7002 8.5002 21.1 8.89337 21.1 9.40019H21.6H22.1C22.1 8.36062 21.2718 7.5002 20.2286 7.5002V8.0002ZM10.4 15.8004L10.7536 15.4468L8.75358 13.4468L8.40002 13.8004L8.04647 14.1539L10.0465 16.1539L10.4 15.8004ZM8.40002 13.8004L8.75358 14.1539L10.7536 12.1539L10.4 11.8004L10.0465 11.4468L8.04647 13.4468L8.40002 13.8004ZM13.6 11.8004L13.2465 12.1539L15.2465 14.1539L15.6 13.8004L15.9536 13.4468L13.9536 11.4468L13.6 11.8004ZM15.6 13.8004L15.2465 13.4468L13.2465 15.4468L13.6 15.8004L13.9536 16.1539L15.9536 14.1539L15.6 13.8004ZM2.40002 8.0002H2.90002V5.6002H2.40002H1.90002V8.0002H2.40002Z" fill="currentColor"/>
    </svg>
  );
}
FolderCode.displayName = "FolderCode";

export default FolderCode;