key emoji
key from Fluent Emoji High Contrast by Microsoft Corporation · Default · Objects · MIT Free for personal and commercial use.
- Name
- key
- Set
- Fluent Emoji High Contrast
- Style
- Default
- Category
- Objects
- Viewbox
- 32×32
- License
- MIT
The same emoji 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 FlatkeyFirefox OS Emojikeycss.ggkeyHeroIconskeyHumbleiconskeyIconParkkeyIconPark OutlinekeyIconPark SolidkeyIconPark TwoTone
More objects icons from Fluent Emoji High Contrast
Use the key emoji
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="none"><g clip-path="url(#SVGkRCCwb7V)"><path fill="currentColor" d="M22.209 2a7.47 7.47 0 0 1 4.076 1.187a8.086 8.086 0 0 1 1.4 12.473a7.91 7.91 0 0 1-8.58 1.77l-3.571 3.584a1.07 1.07 0 0 1-.746.327a.8.8 0 0 1-.214-.027a2 2 0 0 0-.526-.066a1.84 1.84 0 0 0-1.185.4a1.5 1.5 0 0 0-.54 1.147a1.26 1.26 0 0 1-.36.894a1.18 1.18 0 0 1-.945.348q-.113.002-.245-.008h-.024a1.4 1.4 0 0 0-1.076.87c-.144.42-.155.875-.03 1.3a.96.96 0 0 1-.22.922c-.761.74-1.961 1.95-1.961 1.95a3.206 3.206 0 0 1-5.131-.84a3.26 3.26 0 0 1 .68-3.751l11.604-11.622a7.54 7.54 0 0 1 1.63-8.331A8.46 8.46 0 0 1 22.209 2m2.983 7.01a1.83 1.83 0 0 0 1.3-.544a1.89 1.89 0 0 0 0-2.64a1.84 1.84 0 0 0-2.613 0a1.886 1.886 0 0 0 0 2.64a1.85 1.85 0 0 0 1.31.544zM22.209 0a10.48 10.48 0 0 0-7.386 3.12a9.51 9.51 0 0 0-2.5 9.206L1.592 23.06a5.28 5.28 0 0 0-1.043 6.082a5.208 5.208 0 0 0 8.323 1.338c.009-.01 1.192-1.2 1.942-1.932a2.98 2.98 0 0 0 .824-2.562a3.17 3.17 0 0 0 2.634-2.687q.254.045.512.046a3.1 3.1 0 0 0 2.16-.912l2.711-2.72a10 10 0 0 0 2.41.3a9.82 9.82 0 0 0 7.035-2.95A10.085 10.085 0 0 0 27.366 1.5A9.5 9.5 0 0 0 22.209 0"/></g><defs><clipPath id="SVGkRCCwb7V"><path fill="#fff" d="M0 0h32v32H0z"/></clipPath></defs></g></svg>
React
import type { SVGProps } from "react";
export function FluentEmojiHighContrastKey(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="none"><g clipPath="url(#SVGkRCCwb7V)"><path fill="currentColor" d="M22.209 2a7.47 7.47 0 0 1 4.076 1.187a8.086 8.086 0 0 1 1.4 12.473a7.91 7.91 0 0 1-8.58 1.77l-3.571 3.584a1.07 1.07 0 0 1-.746.327a.8.8 0 0 1-.214-.027a2 2 0 0 0-.526-.066a1.84 1.84 0 0 0-1.185.4a1.5 1.5 0 0 0-.54 1.147a1.26 1.26 0 0 1-.36.894a1.18 1.18 0 0 1-.945.348q-.113.002-.245-.008h-.024a1.4 1.4 0 0 0-1.076.87c-.144.42-.155.875-.03 1.3a.96.96 0 0 1-.22.922c-.761.74-1.961 1.95-1.961 1.95a3.206 3.206 0 0 1-5.131-.84a3.26 3.26 0 0 1 .68-3.751l11.604-11.622a7.54 7.54 0 0 1 1.63-8.331A8.46 8.46 0 0 1 22.209 2m2.983 7.01a1.83 1.83 0 0 0 1.3-.544a1.89 1.89 0 0 0 0-2.64a1.84 1.84 0 0 0-2.613 0a1.886 1.886 0 0 0 0 2.64a1.85 1.85 0 0 0 1.31.544zM22.209 0a10.48 10.48 0 0 0-7.386 3.12a9.51 9.51 0 0 0-2.5 9.206L1.592 23.06a5.28 5.28 0 0 0-1.043 6.082a5.208 5.208 0 0 0 8.323 1.338c.009-.01 1.192-1.2 1.942-1.932a2.98 2.98 0 0 0 .824-2.562a3.17 3.17 0 0 0 2.634-2.687q.254.045.512.046a3.1 3.1 0 0 0 2.16-.912l2.711-2.72a10 10 0 0 0 2.41.3a9.82 9.82 0 0 0 7.035-2.95A10.085 10.085 0 0 0 27.366 1.5A9.5 9.5 0 0 0 22.209 0"/></g><defs><clipPath id="SVGkRCCwb7V"><path fill="#fff" d="M0 0h32v32H0z"/></clipPath></defs></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="none"><g clip-path="url(#SVGkRCCwb7V)"><path fill="currentColor" d="M22.209 2a7.47 7.47 0 0 1 4.076 1.187a8.086 8.086 0 0 1 1.4 12.473a7.91 7.91 0 0 1-8.58 1.77l-3.571 3.584a1.07 1.07 0 0 1-.746.327a.8.8 0 0 1-.214-.027a2 2 0 0 0-.526-.066a1.84 1.84 0 0 0-1.185.4a1.5 1.5 0 0 0-.54 1.147a1.26 1.26 0 0 1-.36.894a1.18 1.18 0 0 1-.945.348q-.113.002-.245-.008h-.024a1.4 1.4 0 0 0-1.076.87c-.144.42-.155.875-.03 1.3a.96.96 0 0 1-.22.922c-.761.74-1.961 1.95-1.961 1.95a3.206 3.206 0 0 1-5.131-.84a3.26 3.26 0 0 1 .68-3.751l11.604-11.622a7.54 7.54 0 0 1 1.63-8.331A8.46 8.46 0 0 1 22.209 2m2.983 7.01a1.83 1.83 0 0 0 1.3-.544a1.89 1.89 0 0 0 0-2.64a1.84 1.84 0 0 0-2.613 0a1.886 1.886 0 0 0 0 2.64a1.85 1.85 0 0 0 1.31.544zM22.209 0a10.48 10.48 0 0 0-7.386 3.12a9.51 9.51 0 0 0-2.5 9.206L1.592 23.06a5.28 5.28 0 0 0-1.043 6.082a5.208 5.208 0 0 0 8.323 1.338c.009-.01 1.192-1.2 1.942-1.932a2.98 2.98 0 0 0 .824-2.562a3.17 3.17 0 0 0 2.634-2.687q.254.045.512.046a3.1 3.1 0 0 0 2.16-.912l2.711-2.72a10 10 0 0 0 2.41.3a9.82 9.82 0 0 0 7.035-2.95A10.085 10.085 0 0 0 27.366 1.5A9.5 9.5 0 0 0 22.209 0"/></g><defs><clipPath id="SVGkRCCwb7V"><path fill="#fff" d="M0 0h32v32H0z"/></clipPath></defs></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%2032%2032%22%3E%3Cg%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url(%23SVGkRCCwb7V)%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M22.209%202a7.47%207.47%200%200%201%204.076%201.187a8.086%208.086%200%200%201%201.4%2012.473a7.91%207.91%200%200%201-8.58%201.77l-3.571%203.584a1.07%201.07%200%200%201-.746.327a.8.8%200%200%201-.214-.027a2%202%200%200%200-.526-.066a1.84%201.84%200%200%200-1.185.4a1.5%201.5%200%200%200-.54%201.147a1.26%201.26%200%200%201-.36.894a1.18%201.18%200%200%201-.945.348q-.113.002-.245-.008h-.024a1.4%201.4%200%200%200-1.076.87c-.144.42-.155.875-.03%201.3a.96.96%200%200%201-.22.922c-.761.74-1.961%201.95-1.961%201.95a3.206%203.206%200%200%201-5.131-.84a3.26%203.26%200%200%201%20.68-3.751l11.604-11.622a7.54%207.54%200%200%201%201.63-8.331A8.46%208.46%200%200%201%2022.209%202m2.983%207.01a1.83%201.83%200%200%200%201.3-.544a1.89%201.89%200%200%200%200-2.64a1.84%201.84%200%200%200-2.613%200a1.886%201.886%200%200%200%200%202.64a1.85%201.85%200%200%200%201.31.544zM22.209%200a10.48%2010.48%200%200%200-7.386%203.12a9.51%209.51%200%200%200-2.5%209.206L1.592%2023.06a5.28%205.28%200%200%200-1.043%206.082a5.208%205.208%200%200%200%208.323%201.338c.009-.01%201.192-1.2%201.942-1.932a2.98%202.98%200%200%200%20.824-2.562a3.17%203.17%200%200%200%202.634-2.687q.254.045.512.046a3.1%203.1%200%200%200%202.16-.912l2.711-2.72a10%2010%200%200%200%202.41.3a9.82%209.82%200%200%200%207.035-2.95A10.085%2010.085%200%200%200%2027.366%201.5A9.5%209.5%200%200%200%2022.209%200%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22SVGkRCCwb7V%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%200h32v32H0z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%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%2032%2032%22%3E%3Cg%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url(%23SVGkRCCwb7V)%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M22.209%202a7.47%207.47%200%200%201%204.076%201.187a8.086%208.086%200%200%201%201.4%2012.473a7.91%207.91%200%200%201-8.58%201.77l-3.571%203.584a1.07%201.07%200%200%201-.746.327a.8.8%200%200%201-.214-.027a2%202%200%200%200-.526-.066a1.84%201.84%200%200%200-1.185.4a1.5%201.5%200%200%200-.54%201.147a1.26%201.26%200%200%201-.36.894a1.18%201.18%200%200%201-.945.348q-.113.002-.245-.008h-.024a1.4%201.4%200%200%200-1.076.87c-.144.42-.155.875-.03%201.3a.96.96%200%200%201-.22.922c-.761.74-1.961%201.95-1.961%201.95a3.206%203.206%200%200%201-5.131-.84a3.26%203.26%200%200%201%20.68-3.751l11.604-11.622a7.54%207.54%200%200%201%201.63-8.331A8.46%208.46%200%200%201%2022.209%202m2.983%207.01a1.83%201.83%200%200%200%201.3-.544a1.89%201.89%200%200%200%200-2.64a1.84%201.84%200%200%200-2.613%200a1.886%201.886%200%200%200%200%202.64a1.85%201.85%200%200%200%201.31.544zM22.209%200a10.48%2010.48%200%200%200-7.386%203.12a9.51%209.51%200%200%200-2.5%209.206L1.592%2023.06a5.28%205.28%200%200%200-1.043%206.082a5.208%205.208%200%200%200%208.323%201.338c.009-.01%201.192-1.2%201.942-1.932a2.98%202.98%200%200%200%20.824-2.562a3.17%203.17%200%200%200%202.634-2.687q.254.045.512.046a3.1%203.1%200%200%200%202.16-.912l2.711-2.72a10%2010%200%200%200%202.41.3a9.82%209.82%200%200%200%207.035-2.95A10.085%2010.085%200%200%200%2027.366%201.5A9.5%209.5%200%200%200%2022.209%200%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22SVGkRCCwb7V%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%200h32v32H0z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent-emoji-high-contrast/key.svg?color=%231a73e8&size=48
