key icon

key from Jam Icons by Michael Amprimo · Outline · MIT Free for personal and commercial use.

Name
key
Set
Jam Icons
Style
Outline
Viewbox
24×24
License
MIT

1 other variant in Jam Icons

key-f

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.ggkeyHeroIconskeyHumbleiconskeyIconoirkeyIonIconskeyLine AwesomekeyLucidekeyMage IconskeyMajesticonskeyMaterial SymbolskeyMaterial Design Icons

Use the key icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="-1 -1 24 24"><path fill="currentColor" d="m8.612 16.337l3.746-3.747l1.027.183a5 5 0 1 0-4.039-4.039l.184 1.028l-6.994 6.994l.177 2.651l2.651.177l1.833-1.833l-.707-.707a1 1 0 0 1 1.415-1.414zm.707-13.435a7 7 0 1 1 3.715 11.84L6.137 21.64l-4.43-.295a1 1 0 0 1-.932-.932l-.295-4.43l6.898-6.898a6.99 6.99 0 0 1 1.94-6.183zm4.242 5.656A2 2 0 1 1 16.39 5.73a2 2 0 0 1-2.829 2.828"/></svg>

React

import type { SVGProps } from "react";

export function JamKey(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="-1 -1 24 24"><path fill="currentColor" d="m8.612 16.337l3.746-3.747l1.027.183a5 5 0 1 0-4.039-4.039l.184 1.028l-6.994 6.994l.177 2.651l2.651.177l1.833-1.833l-.707-.707a1 1 0 0 1 1.415-1.414zm.707-13.435a7 7 0 1 1 3.715 11.84L6.137 21.64l-4.43-.295a1 1 0 0 1-.932-.932l-.295-4.43l6.898-6.898a6.99 6.99 0 0 1 1.94-6.183zm4.242 5.656A2 2 0 1 1 16.39 5.73a2 2 0 0 1-2.829 2.828"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="-1 -1 24 24"><path fill="currentColor" d="m8.612 16.337l3.746-3.747l1.027.183a5 5 0 1 0-4.039-4.039l.184 1.028l-6.994 6.994l.177 2.651l2.651.177l1.833-1.833l-.707-.707a1 1 0 0 1 1.415-1.414zm.707-13.435a7 7 0 1 1 3.715 11.84L6.137 21.64l-4.43-.295a1 1 0 0 1-.932-.932l-.295-4.43l6.898-6.898a6.99 6.99 0 0 1 1.94-6.183zm4.242 5.656A2 2 0 1 1 16.39 5.73a2 2 0 0 1-2.829 2.828"/></svg>
</template>

CSS

.icon-key {
  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%22-1%20-1%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m8.612%2016.337l3.746-3.747l1.027.183a5%205%200%201%200-4.039-4.039l.184%201.028l-6.994%206.994l.177%202.651l2.651.177l1.833-1.833l-.707-.707a1%201%200%200%201%201.415-1.414zm.707-13.435a7%207%200%201%201%203.715%2011.84L6.137%2021.64l-4.43-.295a1%201%200%200%201-.932-.932l-.295-4.43l6.898-6.898a6.99%206.99%200%200%201%201.94-6.183zm4.242%205.656A2%202%200%201%201%2016.39%205.73a2%202%200%200%201-2.829%202.828%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%22-1%20-1%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m8.612%2016.337l3.746-3.747l1.027.183a5%205%200%201%200-4.039-4.039l.184%201.028l-6.994%206.994l.177%202.651l2.651.177l1.833-1.833l-.707-.707a1%201%200%200%201%201.415-1.414zm.707-13.435a7%207%200%201%201%203.715%2011.84L6.137%2021.64l-4.43-.295a1%201%200%200%201-.932-.932l-.295-4.43l6.898-6.898a6.99%206.99%200%200%201%201.94-6.183zm4.242%205.656A2%202%200%201%201%2016.39%205.73a2%202%200%200%201-2.829%202.828%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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