key icon
key-rounded from Material Symbols Light by Google · Rounded · UI Actions · Apache-2.0 Free for personal and commercial use.
- Name
- key-rounded
- Set
- Material Symbols Light
- Style
- Rounded
- Category
- UI Actions
- Viewbox
- 24×24
- License
- Apache 2.0
3 other variants in Material Symbols Light
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
More ui actions icons from Material Symbols Light
Use the key icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M5.692 13.308q-.538-.539-.538-1.308t.538-1.308T7 10.154t1.308.538T8.846 12t-.538 1.308T7 13.846t-1.308-.538M7 16.73q1.675 0 2.927-.947q1.252-.945 1.608-2.284h2.85l1.069.82q.111.072.229.116t.26.043t.259-.043q.117-.044.229-.136l1.357-1.05l1.212.933q.13.086.28.139q.149.053.291.028t.276-.084t.24-.17l1.442-1.537q.125-.13.178-.267q.052-.136.052-.298t-.055-.295t-.181-.258l-.698-.699q-.13-.13-.28-.186t-.31-.056h-8.7q-.35-1.315-1.594-2.273Q8.698 7.269 7 7.269q-2 0-3.366 1.366Q2.27 10 2.27 12t1.366 3.366T7 16.73"/></svg>
React
import type { SVGProps } from "react";
export function MaterialSymbolsLightKeyRounded(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M5.692 13.308q-.538-.539-.538-1.308t.538-1.308T7 10.154t1.308.538T8.846 12t-.538 1.308T7 13.846t-1.308-.538M7 16.73q1.675 0 2.927-.947q1.252-.945 1.608-2.284h2.85l1.069.82q.111.072.229.116t.26.043t.259-.043q.117-.044.229-.136l1.357-1.05l1.212.933q.13.086.28.139q.149.053.291.028t.276-.084t.24-.17l1.442-1.537q.125-.13.178-.267q.052-.136.052-.298t-.055-.295t-.181-.258l-.698-.699q-.13-.13-.28-.186t-.31-.056h-8.7q-.35-1.315-1.594-2.273Q8.698 7.269 7 7.269q-2 0-3.366 1.366Q2.27 10 2.27 12t1.366 3.366T7 16.73"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M5.692 13.308q-.538-.539-.538-1.308t.538-1.308T7 10.154t1.308.538T8.846 12t-.538 1.308T7 13.846t-1.308-.538M7 16.73q1.675 0 2.927-.947q1.252-.945 1.608-2.284h2.85l1.069.82q.111.072.229.116t.26.043t.259-.043q.117-.044.229-.136l1.357-1.05l1.212.933q.13.086.28.139q.149.053.291.028t.276-.084t.24-.17l1.442-1.537q.125-.13.178-.267q.052-.136.052-.298t-.055-.295t-.181-.258l-.698-.699q-.13-.13-.28-.186t-.31-.056h-8.7q-.35-1.315-1.594-2.273Q8.698 7.269 7 7.269q-2 0-3.366 1.366Q2.27 10 2.27 12t1.366 3.366T7 16.73"/></svg> </template>
CSS
.icon-key-rounded {
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%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M5.692%2013.308q-.538-.539-.538-1.308t.538-1.308T7%2010.154t1.308.538T8.846%2012t-.538%201.308T7%2013.846t-1.308-.538M7%2016.73q1.675%200%202.927-.947q1.252-.945%201.608-2.284h2.85l1.069.82q.111.072.229.116t.26.043t.259-.043q.117-.044.229-.136l1.357-1.05l1.212.933q.13.086.28.139q.149.053.291.028t.276-.084t.24-.17l1.442-1.537q.125-.13.178-.267q.052-.136.052-.298t-.055-.295t-.181-.258l-.698-.699q-.13-.13-.28-.186t-.31-.056h-8.7q-.35-1.315-1.594-2.273Q8.698%207.269%207%207.269q-2%200-3.366%201.366Q2.27%2010%202.27%2012t1.366%203.366T7%2016.73%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M5.692%2013.308q-.538-.539-.538-1.308t.538-1.308T7%2010.154t1.308.538T8.846%2012t-.538%201.308T7%2013.846t-1.308-.538M7%2016.73q1.675%200%202.927-.947q1.252-.945%201.608-2.284h2.85l1.069.82q.111.072.229.116t.26.043t.259-.043q.117-.044.229-.136l1.357-1.05l1.212.933q.13.086.28.139q.149.053.291.028t.276-.084t.24-.17l1.442-1.537q.125-.13.178-.267q.052-.136.052-.298t-.055-.295t-.181-.258l-.698-.699q-.13-.13-.28-.186t-.31-.056h-8.7q-.35-1.315-1.594-2.273Q8.698%207.269%207%207.269q-2%200-3.366%201.366Q2.27%2010%202.27%2012t1.366%203.366T7%2016.73%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-symbols-light/key-rounded.svg?color=%231a73e8&size=48
