key icon
key from Reicon by REICON · Outline · Security · MIT Free for personal and commercial use.
- Name
- key
- Set
- Reicon
- Style
- Outline
- Category
- Security
- Viewbox
- 24×24
- License
- MIT
2 other variants in Reicon
The same icon in other sets
All key icons →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
More security icons from Reicon
Use the key icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"><path d="M15.68 5.348a2.95 2.95 0 0 0-2.953 2.946a2.95 2.95 0 0 0 2.954 2.945a2.95 2.95 0 0 0 2.954-2.945a2.95 2.95 0 0 0-2.954-2.946m-1.453 2.946a1.45 1.45 0 0 1 1.454-1.446c.806 0 1.454.65 1.454 1.446a1.45 1.45 0 0 1-1.454 1.445a1.45 1.45 0 0 1-1.454-1.445"/><path d="M9.53 20.878a2.2 2.2 0 0 0 .432-1.355c.392.116.78.13 1.152.06c.768-.146 1.337-.632 1.639-1.032l.005-.007l.005-.007a2.42 2.42 0 0 0 .396-2.02a2.9 2.9 0 0 0-.36-.85a2.2 2.2 0 0 0-.272-.393l.009-.01l.464-.462c.382.183.796.298 1.158.373a8 8 0 0 0 1.523.162c3.901 0 7.069-3.15 7.069-7.044c0-3.892-3.168-7.043-7.07-7.043c-3.9 0-7.069 3.15-7.069 7.043a6.5 6.5 0 0 0 .57 2.635l-7.256 7.226a2.37 2.37 0 0 0-.648 1.255c-.099.603.063 1.274.648 1.856l.882.878l.042.04a2.46 2.46 0 0 0 1.197.544a1.98 1.98 0 0 0 1.73-.584l.566-.564a2.33 2.33 0 0 0 1.617.276a2.62 2.62 0 0 0 1.56-.963l.006-.007zm.581-12.585c0-3.058 2.491-5.543 5.57-5.543c3.078 0 5.569 2.485 5.569 5.543c0 3.06-2.49 5.544-5.57 5.544c-.272 0-.743-.033-1.218-.13c-.497-.104-.887-.257-1.095-.43a.75.75 0 0 0-1.008.047l-.882.878c-.201.2-.395.428-.498.691c-.13.333-.088.653.06.92c.088.157.23.307.289.37l.02.021c.07.077.107.127.135.183l.027.053l.03.042l.007.01q.014.023.042.076c.038.073.082.176.11.297a.92.92 0 0 1-.15.79c-.14.183-.407.396-.714.454c-.258.049-.678.017-1.238-.54a.75.75 0 0 0-1.059 0l-.294.292a.75.75 0 0 0-.032 1.03q.018.024.055.08c.048.075.104.18.144.3c.076.225.088.466-.095.726c-.12.155-.363.332-.639.384c-.234.045-.534.012-.872-.325a.75.75 0 0 0-1.059 0l-1.029 1.025c-.165.164-.31.183-.452.162a1 1 0 0 1-.424-.187l-.857-.854c-.239-.237-.248-.42-.227-.55a.87.87 0 0 1 .227-.436l7.644-7.613a.746.746 0 0 0 .105-.925l-.002-.003a2 2 0 0 1-.082-.15a5 5 0 0 1-.538-2.232m-1.91 10.583q0 .002.004.005l-.001-.001z"/></g></svg>
React
import type { SVGProps } from "react";
export function ReiconKey(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor" fillRule="evenodd" clipRule="evenodd"><path d="M15.68 5.348a2.95 2.95 0 0 0-2.953 2.946a2.95 2.95 0 0 0 2.954 2.945a2.95 2.95 0 0 0 2.954-2.945a2.95 2.95 0 0 0-2.954-2.946m-1.453 2.946a1.45 1.45 0 0 1 1.454-1.446c.806 0 1.454.65 1.454 1.446a1.45 1.45 0 0 1-1.454 1.445a1.45 1.45 0 0 1-1.454-1.445"/><path d="M9.53 20.878a2.2 2.2 0 0 0 .432-1.355c.392.116.78.13 1.152.06c.768-.146 1.337-.632 1.639-1.032l.005-.007l.005-.007a2.42 2.42 0 0 0 .396-2.02a2.9 2.9 0 0 0-.36-.85a2.2 2.2 0 0 0-.272-.393l.009-.01l.464-.462c.382.183.796.298 1.158.373a8 8 0 0 0 1.523.162c3.901 0 7.069-3.15 7.069-7.044c0-3.892-3.168-7.043-7.07-7.043c-3.9 0-7.069 3.15-7.069 7.043a6.5 6.5 0 0 0 .57 2.635l-7.256 7.226a2.37 2.37 0 0 0-.648 1.255c-.099.603.063 1.274.648 1.856l.882.878l.042.04a2.46 2.46 0 0 0 1.197.544a1.98 1.98 0 0 0 1.73-.584l.566-.564a2.33 2.33 0 0 0 1.617.276a2.62 2.62 0 0 0 1.56-.963l.006-.007zm.581-12.585c0-3.058 2.491-5.543 5.57-5.543c3.078 0 5.569 2.485 5.569 5.543c0 3.06-2.49 5.544-5.57 5.544c-.272 0-.743-.033-1.218-.13c-.497-.104-.887-.257-1.095-.43a.75.75 0 0 0-1.008.047l-.882.878c-.201.2-.395.428-.498.691c-.13.333-.088.653.06.92c.088.157.23.307.289.37l.02.021c.07.077.107.127.135.183l.027.053l.03.042l.007.01q.014.023.042.076c.038.073.082.176.11.297a.92.92 0 0 1-.15.79c-.14.183-.407.396-.714.454c-.258.049-.678.017-1.238-.54a.75.75 0 0 0-1.059 0l-.294.292a.75.75 0 0 0-.032 1.03q.018.024.055.08c.048.075.104.18.144.3c.076.225.088.466-.095.726c-.12.155-.363.332-.639.384c-.234.045-.534.012-.872-.325a.75.75 0 0 0-1.059 0l-1.029 1.025c-.165.164-.31.183-.452.162a1 1 0 0 1-.424-.187l-.857-.854c-.239-.237-.248-.42-.227-.55a.87.87 0 0 1 .227-.436l7.644-7.613a.746.746 0 0 0 .105-.925l-.002-.003a2 2 0 0 1-.082-.15a5 5 0 0 1-.538-2.232m-1.91 10.583q0 .002.004.005l-.001-.001z"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"><path d="M15.68 5.348a2.95 2.95 0 0 0-2.953 2.946a2.95 2.95 0 0 0 2.954 2.945a2.95 2.95 0 0 0 2.954-2.945a2.95 2.95 0 0 0-2.954-2.946m-1.453 2.946a1.45 1.45 0 0 1 1.454-1.446c.806 0 1.454.65 1.454 1.446a1.45 1.45 0 0 1-1.454 1.445a1.45 1.45 0 0 1-1.454-1.445"/><path d="M9.53 20.878a2.2 2.2 0 0 0 .432-1.355c.392.116.78.13 1.152.06c.768-.146 1.337-.632 1.639-1.032l.005-.007l.005-.007a2.42 2.42 0 0 0 .396-2.02a2.9 2.9 0 0 0-.36-.85a2.2 2.2 0 0 0-.272-.393l.009-.01l.464-.462c.382.183.796.298 1.158.373a8 8 0 0 0 1.523.162c3.901 0 7.069-3.15 7.069-7.044c0-3.892-3.168-7.043-7.07-7.043c-3.9 0-7.069 3.15-7.069 7.043a6.5 6.5 0 0 0 .57 2.635l-7.256 7.226a2.37 2.37 0 0 0-.648 1.255c-.099.603.063 1.274.648 1.856l.882.878l.042.04a2.46 2.46 0 0 0 1.197.544a1.98 1.98 0 0 0 1.73-.584l.566-.564a2.33 2.33 0 0 0 1.617.276a2.62 2.62 0 0 0 1.56-.963l.006-.007zm.581-12.585c0-3.058 2.491-5.543 5.57-5.543c3.078 0 5.569 2.485 5.569 5.543c0 3.06-2.49 5.544-5.57 5.544c-.272 0-.743-.033-1.218-.13c-.497-.104-.887-.257-1.095-.43a.75.75 0 0 0-1.008.047l-.882.878c-.201.2-.395.428-.498.691c-.13.333-.088.653.06.92c.088.157.23.307.289.37l.02.021c.07.077.107.127.135.183l.027.053l.03.042l.007.01q.014.023.042.076c.038.073.082.176.11.297a.92.92 0 0 1-.15.79c-.14.183-.407.396-.714.454c-.258.049-.678.017-1.238-.54a.75.75 0 0 0-1.059 0l-.294.292a.75.75 0 0 0-.032 1.03q.018.024.055.08c.048.075.104.18.144.3c.076.225.088.466-.095.726c-.12.155-.363.332-.639.384c-.234.045-.534.012-.872-.325a.75.75 0 0 0-1.059 0l-1.029 1.025c-.165.164-.31.183-.452.162a1 1 0 0 1-.424-.187l-.857-.854c-.239-.237-.248-.42-.227-.55a.87.87 0 0 1 .227-.436l7.644-7.613a.746.746 0 0 0 .105-.925l-.002-.003a2 2 0 0 1-.082-.15a5 5 0 0 1-.538-2.232m-1.91 10.583q0 .002.004.005l-.001-.001z"/></g></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%2024%2024%22%3E%3Cg%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M15.68%205.348a2.95%202.95%200%200%200-2.953%202.946a2.95%202.95%200%200%200%202.954%202.945a2.95%202.95%200%200%200%202.954-2.945a2.95%202.95%200%200%200-2.954-2.946m-1.453%202.946a1.45%201.45%200%200%201%201.454-1.446c.806%200%201.454.65%201.454%201.446a1.45%201.45%200%200%201-1.454%201.445a1.45%201.45%200%200%201-1.454-1.445%22%2F%3E%3Cpath%20d%3D%22M9.53%2020.878a2.2%202.2%200%200%200%20.432-1.355c.392.116.78.13%201.152.06c.768-.146%201.337-.632%201.639-1.032l.005-.007l.005-.007a2.42%202.42%200%200%200%20.396-2.02a2.9%202.9%200%200%200-.36-.85a2.2%202.2%200%200%200-.272-.393l.009-.01l.464-.462c.382.183.796.298%201.158.373a8%208%200%200%200%201.523.162c3.901%200%207.069-3.15%207.069-7.044c0-3.892-3.168-7.043-7.07-7.043c-3.9%200-7.069%203.15-7.069%207.043a6.5%206.5%200%200%200%20.57%202.635l-7.256%207.226a2.37%202.37%200%200%200-.648%201.255c-.099.603.063%201.274.648%201.856l.882.878l.042.04a2.46%202.46%200%200%200%201.197.544a1.98%201.98%200%200%200%201.73-.584l.566-.564a2.33%202.33%200%200%200%201.617.276a2.62%202.62%200%200%200%201.56-.963l.006-.007zm.581-12.585c0-3.058%202.491-5.543%205.57-5.543c3.078%200%205.569%202.485%205.569%205.543c0%203.06-2.49%205.544-5.57%205.544c-.272%200-.743-.033-1.218-.13c-.497-.104-.887-.257-1.095-.43a.75.75%200%200%200-1.008.047l-.882.878c-.201.2-.395.428-.498.691c-.13.333-.088.653.06.92c.088.157.23.307.289.37l.02.021c.07.077.107.127.135.183l.027.053l.03.042l.007.01q.014.023.042.076c.038.073.082.176.11.297a.92.92%200%200%201-.15.79c-.14.183-.407.396-.714.454c-.258.049-.678.017-1.238-.54a.75.75%200%200%200-1.059%200l-.294.292a.75.75%200%200%200-.032%201.03q.018.024.055.08c.048.075.104.18.144.3c.076.225.088.466-.095.726c-.12.155-.363.332-.639.384c-.234.045-.534.012-.872-.325a.75.75%200%200%200-1.059%200l-1.029%201.025c-.165.164-.31.183-.452.162a1%201%200%200%201-.424-.187l-.857-.854c-.239-.237-.248-.42-.227-.55a.87.87%200%200%201%20.227-.436l7.644-7.613a.746.746%200%200%200%20.105-.925l-.002-.003a2%202%200%200%201-.082-.15a5%205%200%200%201-.538-2.232m-1.91%2010.583q0%20.002.004.005l-.001-.001z%22%2F%3E%3C%2Fg%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%2024%2024%22%3E%3Cg%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M15.68%205.348a2.95%202.95%200%200%200-2.953%202.946a2.95%202.95%200%200%200%202.954%202.945a2.95%202.95%200%200%200%202.954-2.945a2.95%202.95%200%200%200-2.954-2.946m-1.453%202.946a1.45%201.45%200%200%201%201.454-1.446c.806%200%201.454.65%201.454%201.446a1.45%201.45%200%200%201-1.454%201.445a1.45%201.45%200%200%201-1.454-1.445%22%2F%3E%3Cpath%20d%3D%22M9.53%2020.878a2.2%202.2%200%200%200%20.432-1.355c.392.116.78.13%201.152.06c.768-.146%201.337-.632%201.639-1.032l.005-.007l.005-.007a2.42%202.42%200%200%200%20.396-2.02a2.9%202.9%200%200%200-.36-.85a2.2%202.2%200%200%200-.272-.393l.009-.01l.464-.462c.382.183.796.298%201.158.373a8%208%200%200%200%201.523.162c3.901%200%207.069-3.15%207.069-7.044c0-3.892-3.168-7.043-7.07-7.043c-3.9%200-7.069%203.15-7.069%207.043a6.5%206.5%200%200%200%20.57%202.635l-7.256%207.226a2.37%202.37%200%200%200-.648%201.255c-.099.603.063%201.274.648%201.856l.882.878l.042.04a2.46%202.46%200%200%200%201.197.544a1.98%201.98%200%200%200%201.73-.584l.566-.564a2.33%202.33%200%200%200%201.617.276a2.62%202.62%200%200%200%201.56-.963l.006-.007zm.581-12.585c0-3.058%202.491-5.543%205.57-5.543c3.078%200%205.569%202.485%205.569%205.543c0%203.06-2.49%205.544-5.57%205.544c-.272%200-.743-.033-1.218-.13c-.497-.104-.887-.257-1.095-.43a.75.75%200%200%200-1.008.047l-.882.878c-.201.2-.395.428-.498.691c-.13.333-.088.653.06.92c.088.157.23.307.289.37l.02.021c.07.077.107.127.135.183l.027.053l.03.042l.007.01q.014.023.042.076c.038.073.082.176.11.297a.92.92%200%200%201-.15.79c-.14.183-.407.396-.714.454c-.258.049-.678.017-1.238-.54a.75.75%200%200%200-1.059%200l-.294.292a.75.75%200%200%200-.032%201.03q.018.024.055.08c.048.075.104.18.144.3c.076.225.088.466-.095.726c-.12.155-.363.332-.639.384c-.234.045-.534.012-.872-.325a.75.75%200%200%200-1.059%200l-1.029%201.025c-.165.164-.31.183-.452.162a1%201%200%200%201-.424-.187l-.857-.854c-.239-.237-.248-.42-.227-.55a.87.87%200%200%201%20.227-.436l7.644-7.613a.746.746%200%200%200%20.105-.925l-.002-.003a2%202%200%200%201-.082-.15a5%205%200%200%201-.538-2.232m-1.91%2010.583q0%20.002.004.005l-.001-.001z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/reicon/key.svg?color=%231a73e8&size=48
