key icon

key from Font Awesome 6 Solid by Dave Gandy · Regular · Hotel · CC-BY-4.0 Attribution required.

Name
key
Set
Font Awesome 6 Solid
Style
Regular
Category
Hotel
Viewbox
512×512
License
CC BY 4.0

The same icon in other sets

keyAkar IconskeyBootstrap IconskeyBoxIcons v2keyBoxIcons v2 SolidkeyCarbonkeyCatppuccin IconskeyEmoji One (Colored)keyFeather Iconskey-16-filledFluent UI System IconskeyFluent EmojikeyFluent Emoji FlatkeyFluent Emoji High Contrastkeycss.ggkeyHeroIconskeyHumbleiconskeyIconoirkeyIonIconskeyJam IconskeyLine AwesomekeyLucidekeyMage IconskeyMajesticonskeyMaterial SymbolskeyMaterial Design Icons

More hotel icons from Font Awesome 6 Solid

beddoor-closeddoor-opendumbbellinfinityshowersmokingsnowflakesuitcasesuitcase-rollingumbrella-beachutensils

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="M336 352c97.2 0 176-78.8 176-176S433.2 0 336 0S160 78.8 160 176c0 18.7 2.9 36.8 8.3 53.7L7 391c-4.5 4.5-7 10.6-7 17v80c0 13.3 10.7 24 24 24h80c13.3 0 24-10.7 24-24v-40h40c13.3 0 24-10.7 24-24v-40h40c6.4 0 12.5-2.5 17-7l33.3-33.3c16.9 5.4 35 8.3 53.7 8.3m40-256a40 40 0 1 1 0 80a40 40 0 1 1 0-80"/></svg>

React

import type { SVGProps } from "react";

export function Fa6SolidKey(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="M336 352c97.2 0 176-78.8 176-176S433.2 0 336 0S160 78.8 160 176c0 18.7 2.9 36.8 8.3 53.7L7 391c-4.5 4.5-7 10.6-7 17v80c0 13.3 10.7 24 24 24h80c13.3 0 24-10.7 24-24v-40h40c13.3 0 24-10.7 24-24v-40h40c6.4 0 12.5-2.5 17-7l33.3-33.3c16.9 5.4 35 8.3 53.7 8.3m40-256a40 40 0 1 1 0 80a40 40 0 1 1 0-80"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M336 352c97.2 0 176-78.8 176-176S433.2 0 336 0S160 78.8 160 176c0 18.7 2.9 36.8 8.3 53.7L7 391c-4.5 4.5-7 10.6-7 17v80c0 13.3 10.7 24 24 24h80c13.3 0 24-10.7 24-24v-40h40c13.3 0 24-10.7 24-24v-40h40c6.4 0 12.5-2.5 17-7l33.3-33.3c16.9 5.4 35 8.3 53.7 8.3m40-256a40 40 0 1 1 0 80a40 40 0 1 1 0-80"/></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%22M336%20352c97.2%200%20176-78.8%20176-176S433.2%200%20336%200S160%2078.8%20160%20176c0%2018.7%202.9%2036.8%208.3%2053.7L7%20391c-4.5%204.5-7%2010.6-7%2017v80c0%2013.3%2010.7%2024%2024%2024h80c13.3%200%2024-10.7%2024-24v-40h40c13.3%200%2024-10.7%2024-24v-40h40c6.4%200%2012.5-2.5%2017-7l33.3-33.3c16.9%205.4%2035%208.3%2053.7%208.3m40-256a40%2040%200%201%201%200%2080a40%2040%200%201%201%200-80%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%22M336%20352c97.2%200%20176-78.8%20176-176S433.2%200%20336%200S160%2078.8%20160%20176c0%2018.7%202.9%2036.8%208.3%2053.7L7%20391c-4.5%204.5-7%2010.6-7%2017v80c0%2013.3%2010.7%2024%2024%2024h80c13.3%200%2024-10.7%2024-24v-40h40c13.3%200%2024-10.7%2024-24v-40h40c6.4%200%2012.5-2.5%2017-7l33.3-33.3c16.9%205.4%2035%208.3%2053.7%208.3m40-256a40%2040%200%201%201%200%2080a40%2040%200%201%201%200-80%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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