key icon

key-thin from Phosphor by Phosphor Icons · Thin · MIT Free for personal and commercial use.

Name
key-thin
Set
Phosphor
Style
Thin
Viewbox
256×256
License
MIT

5 other variants in Phosphor

keykey-boldkey-duotonekey-fillkey-light

The same icon in other sets

keyAkar Iconskey-outlinedAnt Design IconskeyBootstrap IconskeyBoxIcons v2keyBoxIcons v2 SolidkeyCarbonkeyCatppuccin IconskeyCodiconskeyEmoji One (Colored)keyElement PluskeyFont Awesome 6 SolidkeyFont Awesome SolidkeyFeather Iconskey-16-filledFluent UI System IconskeyFluent EmojikeyFluent Emoji FlatkeyFluent Emoji High ContrastkeyFirefox OS Emojikeycss.ggkeyHeroIconskeyHumbleiconskeyIconParkkeyIconPark OutlinekeyIconPark Solid

Related icons in Phosphor

key-return

Use the key icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M213.74 42.26a76 76 0 0 0-125.23 79.58l-57 57a11.93 11.93 0 0 0-3.51 8.47V216a12 12 0 0 0 12 12h32a4 4 0 0 0 4-4v-20h20a4 4 0 0 0 4-4v-20h20a4 4 0 0 0 2.83-1.17l11.33-11.34A75.7 75.7 0 0 0 160 172h.1a76 76 0 0 0 53.64-129.74m14.22 56c-1.15 36.22-31.6 65.72-67.87 65.77H160a67.5 67.5 0 0 1-25.21-4.83a4 4 0 0 0-4.45.83l-12 12H96a4 4 0 0 0-4 4v20H72a4 4 0 0 0-4 4v20H40a4 4 0 0 1-4-4v-28.72a4.06 4.06 0 0 1 1.17-2.83L96 125.66a4 4 0 0 0 .83-4.45A67.5 67.5 0 0 1 92 95.91c0-36.27 29.55-66.72 65.77-67.91A68 68 0 0 1 228 98.23ZM188 76a8 8 0 1 1-8-8a8 8 0 0 1 8 8"/></svg>

React

import type { SVGProps } from "react";

export function PhKeyThin(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M213.74 42.26a76 76 0 0 0-125.23 79.58l-57 57a11.93 11.93 0 0 0-3.51 8.47V216a12 12 0 0 0 12 12h32a4 4 0 0 0 4-4v-20h20a4 4 0 0 0 4-4v-20h20a4 4 0 0 0 2.83-1.17l11.33-11.34A75.7 75.7 0 0 0 160 172h.1a76 76 0 0 0 53.64-129.74m14.22 56c-1.15 36.22-31.6 65.72-67.87 65.77H160a67.5 67.5 0 0 1-25.21-4.83a4 4 0 0 0-4.45.83l-12 12H96a4 4 0 0 0-4 4v20H72a4 4 0 0 0-4 4v20H40a4 4 0 0 1-4-4v-28.72a4.06 4.06 0 0 1 1.17-2.83L96 125.66a4 4 0 0 0 .83-4.45A67.5 67.5 0 0 1 92 95.91c0-36.27 29.55-66.72 65.77-67.91A68 68 0 0 1 228 98.23ZM188 76a8 8 0 1 1-8-8a8 8 0 0 1 8 8"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M213.74 42.26a76 76 0 0 0-125.23 79.58l-57 57a11.93 11.93 0 0 0-3.51 8.47V216a12 12 0 0 0 12 12h32a4 4 0 0 0 4-4v-20h20a4 4 0 0 0 4-4v-20h20a4 4 0 0 0 2.83-1.17l11.33-11.34A75.7 75.7 0 0 0 160 172h.1a76 76 0 0 0 53.64-129.74m14.22 56c-1.15 36.22-31.6 65.72-67.87 65.77H160a67.5 67.5 0 0 1-25.21-4.83a4 4 0 0 0-4.45.83l-12 12H96a4 4 0 0 0-4 4v20H72a4 4 0 0 0-4 4v20H40a4 4 0 0 1-4-4v-28.72a4.06 4.06 0 0 1 1.17-2.83L96 125.66a4 4 0 0 0 .83-4.45A67.5 67.5 0 0 1 92 95.91c0-36.27 29.55-66.72 65.77-67.91A68 68 0 0 1 228 98.23ZM188 76a8 8 0 1 1-8-8a8 8 0 0 1 8 8"/></svg>
</template>

CSS

.icon-key-thin {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M213.74%2042.26a76%2076%200%200%200-125.23%2079.58l-57%2057a11.93%2011.93%200%200%200-3.51%208.47V216a12%2012%200%200%200%2012%2012h32a4%204%200%200%200%204-4v-20h20a4%204%200%200%200%204-4v-20h20a4%204%200%200%200%202.83-1.17l11.33-11.34A75.7%2075.7%200%200%200%20160%20172h.1a76%2076%200%200%200%2053.64-129.74m14.22%2056c-1.15%2036.22-31.6%2065.72-67.87%2065.77H160a67.5%2067.5%200%200%201-25.21-4.83a4%204%200%200%200-4.45.83l-12%2012H96a4%204%200%200%200-4%204v20H72a4%204%200%200%200-4%204v20H40a4%204%200%200%201-4-4v-28.72a4.06%204.06%200%200%201%201.17-2.83L96%20125.66a4%204%200%200%200%20.83-4.45A67.5%2067.5%200%200%201%2092%2095.91c0-36.27%2029.55-66.72%2065.77-67.91A68%2068%200%200%201%20228%2098.23ZM188%2076a8%208%200%201%201-8-8a8%208%200%200%201%208%208%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M213.74%2042.26a76%2076%200%200%200-125.23%2079.58l-57%2057a11.93%2011.93%200%200%200-3.51%208.47V216a12%2012%200%200%200%2012%2012h32a4%204%200%200%200%204-4v-20h20a4%204%200%200%200%204-4v-20h20a4%204%200%200%200%202.83-1.17l11.33-11.34A75.7%2075.7%200%200%200%20160%20172h.1a76%2076%200%200%200%2053.64-129.74m14.22%2056c-1.15%2036.22-31.6%2065.72-67.87%2065.77H160a67.5%2067.5%200%200%201-25.21-4.83a4%204%200%200%200-4.45.83l-12%2012H96a4%204%200%200%200-4%204v20H72a4%204%200%200%200-4%204v20H40a4%204%200%200%201-4-4v-28.72a4.06%204.06%200%200%201%201.17-2.83L96%20125.66a4%204%200%200%200%20.83-4.45A67.5%2067.5%200%200%201%2092%2095.91c0-36.27%2029.55-66.72%2065.77-67.91A68%2068%200%200%201%20228%2098.23ZM188%2076a8%208%200%201%201-8-8a8%208%200%200%201%208%208%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/key-thin.svg?color=%231a73e8&size=48