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 · VscKey

Key icon

A free key 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 aspassword iconaccess iconauth iconlogin iconcredential 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/key.json
components/icons/vscode-codicons-key.tsx
import * as React from "react";

/**
 * Key from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
 * Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/key. Sized in em, colored by currentColor.
 */
export function VscKeyIcon(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="M12 5C12 5.552 11.552 6 11 6C10.448 6 10 5.552 10 5C10 4.448 10.448 4 11 4C11.552 4 12 4.448 12 5ZM15 5.5C15 7.981 12.981 10 10.5 10H9.186L8.389 10.775C8.349 10.814 8.302 10.846 8.251 10.87L8.072 10.953C8.006 10.983 7.934 10.999 7.861 10.999H7V12.292C7 12.425 6.947 12.552 6.854 12.646L6.647 12.853C6.553 12.947 6.426 12.999 6.293 12.999H5V14.292C5 14.424 4.947 14.551 4.854 14.645L4.648 14.852C4.554 14.946 4.426 14.999 4.294 14.999H2C1.448 14.997 1 14.548 1 13.998V12.405C1 12.142 1.106 11.884 1.293 11.698L6.19 6.801C6.064 6.381 6 5.945 6 5.5C6 3.019 8.019 1 10.5 1C12.981 1 15 3.019 15 5.5ZM14 5.5C14 3.57 12.43 2 10.5 2C8.57 2 7 3.57 7 5.5C7 5.933 7.078 6.355 7.231 6.755C7.301 6.94 7.257 7.148 7.118 7.288L2 12.406V13.999H4V12.5C4 12.224 4.224 12 4.5 12H6V10.5C6 10.224 6.224 10 6.5 10H7.752L8.634 9.142C8.728 9.051 8.853 9 8.983 9H10.501C12.431 9 14.001 7.43 14.001 5.5H14Z"
      />
    </svg>
  );
}
With react-icons
import { VscKey } from "react-icons/vsc";

export function Example() {
  return <VscKey className="size-5" />;
}
key.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="M12 5C12 5.552 11.552 6 11 6C10.448 6 10 5.552 10 5C10 4.448 10.448 4 11 4C11.552 4 12 4.448 12 5ZM15 5.5C15 7.981 12.981 10 10.5 10H9.186L8.389 10.775C8.349 10.814 8.302 10.846 8.251 10.87L8.072 10.953C8.006 10.983 7.934 10.999 7.861 10.999H7V12.292C7 12.425 6.947 12.552 6.854 12.646L6.647 12.853C6.553 12.947 6.426 12.999 6.293 12.999H5V14.292C5 14.424 4.947 14.551 4.854 14.645L4.648 14.852C4.554 14.946 4.426 14.999 4.294 14.999H2C1.448 14.997 1 14.548 1 13.998V12.405C1 12.142 1.106 11.884 1.293 11.698L6.19 6.801C6.064 6.381 6 5.945 6 5.5C6 3.019 8.019 1 10.5 1C12.981 1 15 3.019 15 5.5ZM14 5.5C14 3.57 12.43 2 10.5 2C8.57 2 7 3.57 7 5.5C7 5.933 7.078 6.355 7.231 6.755C7.301 6.94 7.257 7.148 7.118 7.288L2 12.406V13.999H4V12.5C4 12.224 4.224 12 4.5 12H6V10.5C6 10.224 6.224 10 6.5 10H7.752L8.634 9.142C8.728 9.051 8.853 9 8.983 9H10.501C12.431 9 14.001 7.43 14.001 5.5H14Z"
  />
</svg>
Attribution
"Key" icon from VS Code Icons (https://github.com/microsoft/vscode-codicons), licensed under CC BY 4.0 license.

Related icons: password, access, auth, login

Key icon in other sets