Skip to content
Cuelark UI

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

Simple Line Icons · SlKey

Key icon

A free key icon from Simple Line 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
MIT license
Project
thesabbir.github.io
Download SVG
Install with shadcn
npx shadcn@latest add https://ui.cuelark.com/r/icons/simple-line-icons/key.json
components/icons/simple-line-icons-key.tsx
import * as React from "react";

/**
 * Key from Simple Line Icons (https://thesabbir.github.io/simple-line-icons/), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/simple-line-icons/key. Sized in em, colored by currentColor.
 */
export function SlKeyIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 1024 1024"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M655.696 0C496.64 0 367.693 129.154 367.693 288.467c0 71.408 26.032 136.624 68.944 187.008-8.832-.544-17.84 2.432-24.591 9.184L89.662 809.043c-12.481 12.496-12.481 32.768 0 45.249.24.24.512.383.768.624.08.08.128.175.208.255l156.912 159.904c12.48 12.497 32.753 12.497 45.25 0s12.495-32.768 0-45.249L157.326 831.762l82.496-83.007 135.728 138.32c12.48 12.496 32.753 12.496 45.25 0s12.48-32.769 0-45.25L284.943 703.379l172.384-173.472c6.672-6.672 9.664-15.536 9.216-24.273 50.624 44.288 116.672 71.313 189.168 71.313 159.056 0 288-129.152 288-288.48C943.696 129.154 814.769 0 655.696 0zm-.003 512.002c-123.248 0-224-100.272-224-224 0-123.744 100.752-224 224-224s224 100.256 224 224c0 123.728-100.736 224-224 224z"
      />
    </svg>
  );
}
With react-icons
import { SlKey } from "react-icons/sl";

export function Example() {
  return <SlKey className="size-5" />;
}
key.svg
<svg
  viewBox="0 0 1024 1024"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M655.696 0C496.64 0 367.693 129.154 367.693 288.467c0 71.408 26.032 136.624 68.944 187.008-8.832-.544-17.84 2.432-24.591 9.184L89.662 809.043c-12.481 12.496-12.481 32.768 0 45.249.24.24.512.383.768.624.08.08.128.175.208.255l156.912 159.904c12.48 12.497 32.753 12.497 45.25 0s12.495-32.768 0-45.249L157.326 831.762l82.496-83.007 135.728 138.32c12.48 12.496 32.753 12.496 45.25 0s12.48-32.769 0-45.25L284.943 703.379l172.384-173.472c6.672-6.672 9.664-15.536 9.216-24.273 50.624 44.288 116.672 71.313 189.168 71.313 159.056 0 288-129.152 288-288.48C943.696 129.154 814.769 0 655.696 0zm-.003 512.002c-123.248 0-224-100.272-224-224 0-123.744 100.752-224 224-224s224 100.256 224 224c0 123.728-100.736 224-224 224z"
  />
</svg>
Attribution
"Key" icon from Simple Line Icons (https://thesabbir.github.io/simple-line-icons/), licensed under MIT license.

Related icons: password, access, auth, login

Key icon in other sets