Vela UI Docs
venizia.ai

file-lock-02

FileLock02, 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-lock-02.

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

Installation

pnpm dlx velaui add @velaui/icon-file-lock-02

Usage

// components/icons/file-lock-02.tsx
import FileLock02 from "@/components/icons/file-lock-02"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function FileLock02({ size = 24, strokeWidth = 1, className, ref, ...props }: FileLock02Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M9.6 21.5999H7.2C5.21177 21.5999 3.6 19.9881 3.6 17.9999V5.9999C3.6 4.01168 5.21177 2.3999 7.2 2.3999H15.6C17.5882 2.3999 19.2 4.01168 19.2 5.9999V8.9999M15 14.9999V13.7999C15 12.8058 15.8059 11.9999 16.8 11.9999C17.7941 11.9999 18.6 12.8058 18.6 13.7999V15.5999M15 7.1999H7.2M11.4 10.7999H7.2M9.6 14.3999H7.2M14.4 21.5999H19.2C19.8627 21.5999 20.4 21.0626 20.4 20.3999V16.7999C20.4 16.1372 19.8627 15.5999 19.2 15.5999H14.4C13.7373 15.5999 13.2 16.1372 13.2 16.7999V20.3999C13.2 21.0626 13.7373 21.5999 14.4 21.5999Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
FileLock02.displayName = "FileLock02";

export default FileLock02;