key icon

key-bold from Phosphor by Phosphor Icons · Bold · MIT Free for personal and commercial use.

Name
key-bold
Set
Phosphor
Style
Bold
Viewbox
256×256
License
MIT

5 other variants in Phosphor

keykey-duotonekey-fillkey-lightkey-thin

The same icon in other sets

keyAkar IconskeyBootstrap IconskeyBoxIcons v2keyBoxIcons v2 SolidkeyCarbonkeyCatppuccin IconskeyEmoji One (Colored)keyFont Awesome 6 SolidkeyFeather Iconskey-16-filledFluent UI System IconskeyFluent EmojikeyFluent Emoji FlatkeyFluent Emoji High Contrastkeycss.ggkeyHeroIconskeyHumbleiconskeyIconoirkeyIonIconskeyJam IconskeyLine AwesomekeyLucidekeyMage IconskeyMajesticonskeyMaterial Symbols

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="M196 76a16 16 0 1 1-16-16a16 16 0 0 1 16 16m48 22.74A84.3 84.3 0 0 1 160.11 180H160a83.5 83.5 0 0 1-23.65-3.38l-7.86 7.87A12 12 0 0 1 120 188h-12v12a12 12 0 0 1-12 12H84v12a12 12 0 0 1-12 12H40a20 20 0 0 1-20-20v-28.69a19.86 19.86 0 0 1 5.86-14.14l53.52-53.52A84 84 0 1 1 244 98.74m-41.57-45.17A59.48 59.48 0 0 0 158 36c-32 1-58 27.89-58 59.89a59.7 59.7 0 0 0 4.2 22.19a12 12 0 0 1-2.55 13.21L44 189v23h16v-12a12 12 0 0 1 12-12h12v-12a12 12 0 0 1 12-12h19l9.65-9.65a12 12 0 0 1 13.22-2.55A59.6 59.6 0 0 0 160 156h.08c32 0 58.87-26.07 59.89-58a59.55 59.55 0 0 0-17.54-44.43"/></svg>

React

import type { SVGProps } from "react";

export function PhKeyBold(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="M196 76a16 16 0 1 1-16-16a16 16 0 0 1 16 16m48 22.74A84.3 84.3 0 0 1 160.11 180H160a83.5 83.5 0 0 1-23.65-3.38l-7.86 7.87A12 12 0 0 1 120 188h-12v12a12 12 0 0 1-12 12H84v12a12 12 0 0 1-12 12H40a20 20 0 0 1-20-20v-28.69a19.86 19.86 0 0 1 5.86-14.14l53.52-53.52A84 84 0 1 1 244 98.74m-41.57-45.17A59.48 59.48 0 0 0 158 36c-32 1-58 27.89-58 59.89a59.7 59.7 0 0 0 4.2 22.19a12 12 0 0 1-2.55 13.21L44 189v23h16v-12a12 12 0 0 1 12-12h12v-12a12 12 0 0 1 12-12h19l9.65-9.65a12 12 0 0 1 13.22-2.55A59.6 59.6 0 0 0 160 156h.08c32 0 58.87-26.07 59.89-58a59.55 59.55 0 0 0-17.54-44.43"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M196 76a16 16 0 1 1-16-16a16 16 0 0 1 16 16m48 22.74A84.3 84.3 0 0 1 160.11 180H160a83.5 83.5 0 0 1-23.65-3.38l-7.86 7.87A12 12 0 0 1 120 188h-12v12a12 12 0 0 1-12 12H84v12a12 12 0 0 1-12 12H40a20 20 0 0 1-20-20v-28.69a19.86 19.86 0 0 1 5.86-14.14l53.52-53.52A84 84 0 1 1 244 98.74m-41.57-45.17A59.48 59.48 0 0 0 158 36c-32 1-58 27.89-58 59.89a59.7 59.7 0 0 0 4.2 22.19a12 12 0 0 1-2.55 13.21L44 189v23h16v-12a12 12 0 0 1 12-12h12v-12a12 12 0 0 1 12-12h19l9.65-9.65a12 12 0 0 1 13.22-2.55A59.6 59.6 0 0 0 160 156h.08c32 0 58.87-26.07 59.89-58a59.55 59.55 0 0 0-17.54-44.43"/></svg>
</template>

CSS

.icon-key-bold {
  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%22M196%2076a16%2016%200%201%201-16-16a16%2016%200%200%201%2016%2016m48%2022.74A84.3%2084.3%200%200%201%20160.11%20180H160a83.5%2083.5%200%200%201-23.65-3.38l-7.86%207.87A12%2012%200%200%201%20120%20188h-12v12a12%2012%200%200%201-12%2012H84v12a12%2012%200%200%201-12%2012H40a20%2020%200%200%201-20-20v-28.69a19.86%2019.86%200%200%201%205.86-14.14l53.52-53.52A84%2084%200%201%201%20244%2098.74m-41.57-45.17A59.48%2059.48%200%200%200%20158%2036c-32%201-58%2027.89-58%2059.89a59.7%2059.7%200%200%200%204.2%2022.19a12%2012%200%200%201-2.55%2013.21L44%20189v23h16v-12a12%2012%200%200%201%2012-12h12v-12a12%2012%200%200%201%2012-12h19l9.65-9.65a12%2012%200%200%201%2013.22-2.55A59.6%2059.6%200%200%200%20160%20156h.08c32%200%2058.87-26.07%2059.89-58a59.55%2059.55%200%200%200-17.54-44.43%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%22M196%2076a16%2016%200%201%201-16-16a16%2016%200%200%201%2016%2016m48%2022.74A84.3%2084.3%200%200%201%20160.11%20180H160a83.5%2083.5%200%200%201-23.65-3.38l-7.86%207.87A12%2012%200%200%201%20120%20188h-12v12a12%2012%200%200%201-12%2012H84v12a12%2012%200%200%201-12%2012H40a20%2020%200%200%201-20-20v-28.69a19.86%2019.86%200%200%201%205.86-14.14l53.52-53.52A84%2084%200%201%201%20244%2098.74m-41.57-45.17A59.48%2059.48%200%200%200%20158%2036c-32%201-58%2027.89-58%2059.89a59.7%2059.7%200%200%200%204.2%2022.19a12%2012%200%200%201-2.55%2013.21L44%20189v23h16v-12a12%2012%200%200%201%2012-12h12v-12a12%2012%200%200%201%2012-12h19l9.65-9.65a12%2012%200%200%201%2013.22-2.55A59.6%2059.6%200%200%200%20160%20156h.08c32%200%2058.87-26.07%2059.89-58a59.55%2059.55%200%200%200-17.54-44.43%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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