Skip to content
Cuelark UI

Hover the icon or press Play. Suggested motion: shake. Pick another to preview it and update the animated code:

VS Code Icons · VscLock

Lock icon

A free lock icon from VS Code Icons, ready for React. Use it static or animated: both versions are below, copy-paste or one shadcn command away. Sized in em and colored by currentColor.

Also known assecure iconsecurity iconpassword iconpadlock iconprivate iconprotected icon
License
CC BY 4.0 license
Project
github.com
Download SVG
Install with shadcn
npx shadcn@latest add https://ui.cuelark.com/r/icons/vscode-codicons/lock.json
components/icons/vscode-codicons-lock.tsx
import * as React from "react";

/**
 * Lock from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
 * Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/lock. Sized in em, colored by currentColor.
 */
export function VscLockIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 16 16"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M8 9C8.55228 9 9 9.44771 9 10C9 10.5523 8.55228 11 8 11C7.44772 11 7 10.5523 7 10C7 9.44771 7.44772 9 8 9Z"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M8 1C9.654 1 11 2.346 11 4V6H12C13.103 6 14 6.897 14 8V13C14 14.103 13.103 15 12 15H4C2.897 15 2 14.103 2 13V8C2 6.897 2.897 6 4 6H5V4C5 2.346 6.346 1 8 1ZM4 7C3.449 7 3 7.449 3 8V13C3 13.551 3.449 14 4 14H12C12.551 14 13 13.551 13 13V8C13 7.449 12.551 7 12 7H4ZM8 2C6.897 2 6 2.897 6 4V6H10V4C10 2.897 9.103 2 8 2Z"
      />
    </svg>
  );
}
With react-icons
import { VscLock } from "react-icons/vsc";

export function Example() {
  return <VscLock className="size-5" />;
}
lock.svg
<svg
  viewBox="0 0 16 16"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M8 9C8.55228 9 9 9.44771 9 10C9 10.5523 8.55228 11 8 11C7.44772 11 7 10.5523 7 10C7 9.44771 7.44772 9 8 9Z"
  />
  <path
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="M8 1C9.654 1 11 2.346 11 4V6H12C13.103 6 14 6.897 14 8V13C14 14.103 13.103 15 12 15H4C2.897 15 2 14.103 2 13V8C2 6.897 2.897 6 4 6H5V4C5 2.346 6.346 1 8 1ZM4 7C3.449 7 3 7.449 3 8V13C3 13.551 3.449 14 4 14H12C12.551 14 13 13.551 13 13V8C13 7.449 12.551 7 12 7H4ZM8 2C6.897 2 6 2.897 6 4V6H10V4C10 2.897 9.103 2 8 2Z"
  />
</svg>
Attribution
"Lock" icon from VS Code Icons (https://github.com/microsoft/vscode-codicons), licensed under CC BY 4.0 license.

Related icons: secure, security, password, padlock

Lock icon in other sets