Vela UI Docs
venizia.ai

key-02

Key02, one of the 856 Vela UI icons, in the Security 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-key-02.

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

Installation

pnpm dlx velaui add @velaui/icon-key-02

Usage

// components/icons/key-02.tsx
import Key02 from "@/components/icons/key-02"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Key02({ size = 24, strokeWidth = 1, className, ref, ...props }: Key02Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M9.00026 8.99962H9.12143M18.0011 21.5999L11.3083 15.0022C10.0132 15.5041 8.46576 15.3071 7.02824 14.8865C3.6047 13.885 1.65296 10.3372 2.66891 6.96235C3.68486 3.58746 7.28378 1.66345 10.7073 2.66496C14.1309 3.66647 16.0826 7.21425 15.0667 10.5891L14.9073 11.4545L21.6 18.0521V21.5999H18.0011Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
Key02.displayName = "Key02";

export default Key02;