Vela UI Docs
venizia.ai

card-lock

CardLock, 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-card-lock.

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

Installation

pnpm dlx velaui add @velaui/icon-card-lock

Usage

// components/icons/card-lock.tsx
import CardLock from "@/components/icons/card-lock"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function CardLock({ size = 24, strokeWidth = 1, className, ref, ...props }: CardLockProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M12.0002 18.3L4.20045 18.2999C2.87501 18.2998 1.80053 17.2254 1.80049 15.8999L1.80023 6.90007C1.80019 5.57456 2.87472 4.5 4.20023 4.5H18.5992C19.9249 4.5 20.9997 5.57422 20.9997 6.89993L20.9998 8.7M2.39977 8.69985H20.3998M17.6998 15V14C17.6998 13.1716 18.3713 12.5 19.1998 12.5C20.0282 12.5 20.6998 13.1716 20.6998 14V15.5M17.1998 19.5H21.1998C21.7521 19.5 22.1998 19.0523 22.1998 18.5V16.5C22.1998 15.9478 21.7521 15.5 21.1998 15.5H17.1998C16.6475 15.5 16.1998 15.9478 16.1998 16.5V18.5C16.1998 19.0523 16.6475 19.5 17.1998 19.5Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
CardLock.displayName = "CardLock";

export default CardLock;