key icon
key from IonIcons by Ben Sperry · Regular · MIT Free for personal and commercial use.
- Name
- key
- Set
- IonIcons
- Style
- Regular
- Viewbox
- 512×512
- License
- MIT
2 other variants in IonIcons
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
Use the key icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M218.1 167.17c0 13 0 25.6 4.1 37.4c-43.1 50.6-156.9 184.3-167.5 194.5a20.17 20.17 0 0 0-6.7 15c0 8.5 5.2 16.7 9.6 21.3c6.6 6.9 34.8 33 40 28c15.4-15 18.5-19 24.8-25.2c9.5-9.3-1-28.3 2.3-36s6.8-9.2 12.5-10.4s15.8 2.9 23.7 3c8.3.1 12.8-3.4 19-9.2c5-4.6 8.6-8.9 8.7-15.6c.2-9-12.8-20.9-3.1-30.4s23.7 6.2 34 5s22.8-15.5 24.1-21.6s-11.7-21.8-9.7-30.7c.7-3 6.8-10 11.4-11s25 6.9 29.6 5.9c5.6-1.2 12.1-7.1 17.4-10.4c15.5 6.7 29.6 9.4 47.7 9.4c68.5 0 124-53.4 124-119.2S408.5 48 340 48s-121.9 53.37-121.9 119.17M400 144a32 32 0 1 1-32-32a32 32 0 0 1 32 32"/></svg>
React
import type { SVGProps } from "react";
export function IonKey(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M218.1 167.17c0 13 0 25.6 4.1 37.4c-43.1 50.6-156.9 184.3-167.5 194.5a20.17 20.17 0 0 0-6.7 15c0 8.5 5.2 16.7 9.6 21.3c6.6 6.9 34.8 33 40 28c15.4-15 18.5-19 24.8-25.2c9.5-9.3-1-28.3 2.3-36s6.8-9.2 12.5-10.4s15.8 2.9 23.7 3c8.3.1 12.8-3.4 19-9.2c5-4.6 8.6-8.9 8.7-15.6c.2-9-12.8-20.9-3.1-30.4s23.7 6.2 34 5s22.8-15.5 24.1-21.6s-11.7-21.8-9.7-30.7c.7-3 6.8-10 11.4-11s25 6.9 29.6 5.9c5.6-1.2 12.1-7.1 17.4-10.4c15.5 6.7 29.6 9.4 47.7 9.4c68.5 0 124-53.4 124-119.2S408.5 48 340 48s-121.9 53.37-121.9 119.17M400 144a32 32 0 1 1-32-32a32 32 0 0 1 32 32"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M218.1 167.17c0 13 0 25.6 4.1 37.4c-43.1 50.6-156.9 184.3-167.5 194.5a20.17 20.17 0 0 0-6.7 15c0 8.5 5.2 16.7 9.6 21.3c6.6 6.9 34.8 33 40 28c15.4-15 18.5-19 24.8-25.2c9.5-9.3-1-28.3 2.3-36s6.8-9.2 12.5-10.4s15.8 2.9 23.7 3c8.3.1 12.8-3.4 19-9.2c5-4.6 8.6-8.9 8.7-15.6c.2-9-12.8-20.9-3.1-30.4s23.7 6.2 34 5s22.8-15.5 24.1-21.6s-11.7-21.8-9.7-30.7c.7-3 6.8-10 11.4-11s25 6.9 29.6 5.9c5.6-1.2 12.1-7.1 17.4-10.4c15.5 6.7 29.6 9.4 47.7 9.4c68.5 0 124-53.4 124-119.2S408.5 48 340 48s-121.9 53.37-121.9 119.17M400 144a32 32 0 1 1-32-32a32 32 0 0 1 32 32"/></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%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M218.1%20167.17c0%2013%200%2025.6%204.1%2037.4c-43.1%2050.6-156.9%20184.3-167.5%20194.5a20.17%2020.17%200%200%200-6.7%2015c0%208.5%205.2%2016.7%209.6%2021.3c6.6%206.9%2034.8%2033%2040%2028c15.4-15%2018.5-19%2024.8-25.2c9.5-9.3-1-28.3%202.3-36s6.8-9.2%2012.5-10.4s15.8%202.9%2023.7%203c8.3.1%2012.8-3.4%2019-9.2c5-4.6%208.6-8.9%208.7-15.6c.2-9-12.8-20.9-3.1-30.4s23.7%206.2%2034%205s22.8-15.5%2024.1-21.6s-11.7-21.8-9.7-30.7c.7-3%206.8-10%2011.4-11s25%206.9%2029.6%205.9c5.6-1.2%2012.1-7.1%2017.4-10.4c15.5%206.7%2029.6%209.4%2047.7%209.4c68.5%200%20124-53.4%20124-119.2S408.5%2048%20340%2048s-121.9%2053.37-121.9%20119.17M400%20144a32%2032%200%201%201-32-32a32%2032%200%200%201%2032%2032%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%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M218.1%20167.17c0%2013%200%2025.6%204.1%2037.4c-43.1%2050.6-156.9%20184.3-167.5%20194.5a20.17%2020.17%200%200%200-6.7%2015c0%208.5%205.2%2016.7%209.6%2021.3c6.6%206.9%2034.8%2033%2040%2028c15.4-15%2018.5-19%2024.8-25.2c9.5-9.3-1-28.3%202.3-36s6.8-9.2%2012.5-10.4s15.8%202.9%2023.7%203c8.3.1%2012.8-3.4%2019-9.2c5-4.6%208.6-8.9%208.7-15.6c.2-9-12.8-20.9-3.1-30.4s23.7%206.2%2034%205s22.8-15.5%2024.1-21.6s-11.7-21.8-9.7-30.7c.7-3%206.8-10%2011.4-11s25%206.9%2029.6%205.9c5.6-1.2%2012.1-7.1%2017.4-10.4c15.5%206.7%2029.6%209.4%2047.7%209.4c68.5%200%20124-53.4%20124-119.2S408.5%2048%20340%2048s-121.9%2053.37-121.9%20119.17M400%20144a32%2032%200%201%201-32-32a32%2032%200%200%201%2032%2032%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ion/key.svg?color=%231a73e8&size=48
