Gentleface › Security & privacy › key-horizontal

key-horizontal icon

Key horizontal. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M12.653 9.87C12.444 9.957 12.226 10 12 10C11.774 10 11.556 9.957 11.347 9.87C11.138 9.783 10.953 9.66 10.793 9.5L10.5 9.207L9.854 9.854C9.754 9.953 9.636 10.003 9.5 10.003C9.364 10.003 9.246 9.953 9.146 9.854L8.733 9.44C8.643 9.673 8.53 9.898 8.395 10.115C8.058 10.656 7.617 11.092 7.071 11.422C6.526 11.752 5.935 11.941 5.299 11.989C4.729 12.032 4.174 11.955 3.636 11.76C3.098 11.565 2.624 11.268 2.214 10.87C1.756 10.426 1.424 9.902 1.217 9.299C1.01 8.696 0.95 8.078 1.038 7.447C1.118 6.88 1.31 6.354 1.614 5.87C1.919 5.386 2.31 4.985 2.786 4.668C3.317 4.315 3.9 4.102 4.533 4.027C5.166 3.953 5.782 4.026 6.381 4.246C6.852 4.419 7.274 4.671 7.646 5L11.5 5C11.886 5 12.258 5.074 12.615 5.222C12.972 5.37 13.287 5.58 13.561 5.854L14.854 7.146C14.953 7.246 15.003 7.364 15.003 7.5C15.003 7.636 14.953 7.754 14.854 7.854L13.207 9.5C13.047 9.66 12.862 9.783 12.653 9.87ZM7.1 5.857C6.793 5.557 6.438 5.333 6.036 5.184C5.587 5.019 5.125 4.965 4.65 5.021C4.175 5.076 3.738 5.237 3.34 5.501C2.982 5.739 2.689 6.039 2.461 6.402C2.232 6.766 2.088 7.16 2.029 7.585C1.963 8.059 2.007 8.522 2.163 8.974C2.318 9.426 2.567 9.819 2.91 10.152C3.218 10.451 3.574 10.674 3.977 10.82C4.381 10.967 4.796 11.024 5.224 10.992C5.701 10.956 6.144 10.814 6.553 10.566C6.963 10.319 7.294 9.992 7.546 9.586C7.773 9.222 7.916 8.827 7.973 8.402C7.991 8.265 8.056 8.154 8.165 8.071C8.275 7.987 8.399 7.955 8.535 7.973C8.647 7.988 8.742 8.035 8.822 8.115L9.5 8.793L10.146 8.146C10.246 8.047 10.364 7.997 10.5 7.997C10.636 7.997 10.754 8.047 10.854 8.146L11.5 8.793C11.638 8.931 11.805 9 12 9C12.195 9 12.362 8.931 12.5 8.793L13.793 7.5L12.854 6.561C12.674 6.381 12.467 6.243 12.233 6.146C11.998 6.049 11.754 6 11.5 6L7.45 6C7.313 6 7.197 5.952 7.1 5.857ZM5.707 7.293C5.902 7.488 6 7.724 6 8C6 8.276 5.902 8.512 5.707 8.707C5.512 8.902 5.276 9 5 9C4.724 9 4.488 8.902 4.293 8.707C4.098 8.512 4 8.276 4 8C4 7.724 4.098 7.488 4.293 7.293C4.488 7.098 4.724 7 5 7C5.276 7 5.512 7.098 5.707 7.293Z"/></svg>

React

// Gentleface "key-horizontal" (line-round), MIT. https://gentleface.com/icons/key-horizontal
import type { SVGProps } from 'react';

export function KeyHorizontalIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M12.653 9.87C12.444 9.957 12.226 10 12 10C11.774 10 11.556 9.957 11.347 9.87C11.138 9.783 10.953 9.66 10.793 9.5L10.5 9.207L9.854 9.854C9.754 9.953 9.636 10.003 9.5 10.003C9.364 10.003 9.246 9.953 9.146 9.854L8.733 9.44C8.643 9.673 8.53 9.898 8.395 10.115C8.058 10.656 7.617 11.092 7.071 11.422C6.526 11.752 5.935 11.941 5.299 11.989C4.729 12.032 4.174 11.955 3.636 11.76C3.098 11.565 2.624 11.268 2.214 10.87C1.756 10.426 1.424 9.902 1.217 9.299C1.01 8.696 0.95 8.078 1.038 7.447C1.118 6.88 1.31 6.354 1.614 5.87C1.919 5.386 2.31 4.985 2.786 4.668C3.317 4.315 3.9 4.102 4.533 4.027C5.166 3.953 5.782 4.026 6.381 4.246C6.852 4.419 7.274 4.671 7.646 5L11.5 5C11.886 5 12.258 5.074 12.615 5.222C12.972 5.37 13.287 5.58 13.561 5.854L14.854 7.146C14.953 7.246 15.003 7.364 15.003 7.5C15.003 7.636 14.953 7.754 14.854 7.854L13.207 9.5C13.047 9.66 12.862 9.783 12.653 9.87ZM7.1 5.857C6.793 5.557 6.438 5.333 6.036 5.184C5.587 5.019 5.125 4.965 4.65 5.021C4.175 5.076 3.738 5.237 3.34 5.501C2.982 5.739 2.689 6.039 2.461 6.402C2.232 6.766 2.088 7.16 2.029 7.585C1.963 8.059 2.007 8.522 2.163 8.974C2.318 9.426 2.567 9.819 2.91 10.152C3.218 10.451 3.574 10.674 3.977 10.82C4.381 10.967 4.796 11.024 5.224 10.992C5.701 10.956 6.144 10.814 6.553 10.566C6.963 10.319 7.294 9.992 7.546 9.586C7.773 9.222 7.916 8.827 7.973 8.402C7.991 8.265 8.056 8.154 8.165 8.071C8.275 7.987 8.399 7.955 8.535 7.973C8.647 7.988 8.742 8.035 8.822 8.115L9.5 8.793L10.146 8.146C10.246 8.047 10.364 7.997 10.5 7.997C10.636 7.997 10.754 8.047 10.854 8.146L11.5 8.793C11.638 8.931 11.805 9 12 9C12.195 9 12.362 8.931 12.5 8.793L13.793 7.5L12.854 6.561C12.674 6.381 12.467 6.243 12.233 6.146C11.998 6.049 11.754 6 11.5 6L7.45 6C7.313 6 7.197 5.952 7.1 5.857ZM5.707 7.293C5.902 7.488 6 7.724 6 8C6 8.276 5.902 8.512 5.707 8.707C5.512 8.902 5.276 9 5 9C4.724 9 4.488 8.902 4.293 8.707C4.098 8.512 4 8.276 4 8C4 7.724 4.098 7.488 4.293 7.293C4.488 7.098 4.724 7 5 7C5.276 7 5.512 7.098 5.707 7.293Z" />
    </svg>
  );
}

Vue

Vue: see /icons/key-horizontal.md

Svelte

Svelte: see /icons/key-horizontal.md

HTML img

HTML img: see /icons/key-horizontal.md

CSS

CSS: see /icons/key-horizontal.md

Data URL

Data URL: see /icons/key-horizontal.md

Sprite

Sprite: see /icons/key-horizontal.md

SwiftUI

SwiftUI: see /icons/key-horizontal.md

Compose

Compose: see /icons/key-horizontal.md

Android XML

Android XML: see /icons/key-horizontal.md

Flutter

Flutter: see /icons/key-horizontal.md

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

Meaning

Also fits

key: the horizontal key, when the product picks the horizontal credentials set
access: the horizontal key, when the product picks the horizontal credentials set

Built from

variant of key

Tags

key, horizontal

Category

Security & privacy

Component name

KeyHorizontalIcon

History

2026-10-14 added
2026-10-15 20 px drawn, 24 px drawn
2026-10-16 20 px redrawn, 24 px redrawn

Family 8

key key-alert key-check key-clock key-code key-off key-plus key-question

More security & privacy icons

brick-wall cctv cctv-off fingerprint fingerprint-off incognito input-password lock lock-check lock-clock lock-open lock-open-alert scan-eye scan-face seal seal-question · all security & privacy icons

For agents

Metadata: /icons/key-horizontal.json · Markdown: /icons/key-horizontal.md · SVG: https://gentleface.com/svg/{style}/16/key-horizontal.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/key-horizontal.png

key-horizontal icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp