key off icon

key-off from Material Symbols Light by Google · Regular · UI Actions · Apache-2.0 Free for personal and commercial use.

Name: key-off
Set: Material Symbols Light
Style: Regular
Category: UI Actions
Viewbox: 24×24
License: Apache 2.0
Aliases: key-off-sharp

3 other variants in Material Symbols Light

key-off-outline key-off-outline-rounded key-off-rounded

The same icon in other sets

key-offMaterial Symbols key-offTabler Icons

More ui actions icons from Material Symbols Light

Use the key off icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m19.827 21.248l-7.512-7.511h-.884q-.396 1.215-1.589 2.104q-1.192.89-2.842.89q-2 0-3.366-1.366Q2.27 14 2.27 12q0-1.766 1.092-3.016q1.091-1.25 2.672-1.53L2.752 4.173l.714-.707L20.535 20.54zm.756-10.748l1.494 1.494l-2.616 2.635l-1.672-1.379l-.999.716l-.484-.485l-1.462-1.462l-1.519-1.519zM7 13.846q.729 0 1.25-.49t.573-1.189q0-.23-.216-.572t-.539-.663t-.663-.539t-.572-.216q-.724.052-1.201.582T5.154 12q0 .77.538 1.308T7 13.846"/></svg>

React

import type { SVGProps } from "react";

export function MaterialSymbolsLightKeyOff(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="m19.827 21.248l-7.512-7.511h-.884q-.396 1.215-1.589 2.104q-1.192.89-2.842.89q-2 0-3.366-1.366Q2.27 14 2.27 12q0-1.766 1.092-3.016q1.091-1.25 2.672-1.53L2.752 4.173l.714-.707L20.535 20.54zm.756-10.748l1.494 1.494l-2.616 2.635l-1.672-1.379l-.999.716l-.484-.485l-1.462-1.462l-1.519-1.519zM7 13.846q.729 0 1.25-.49t.573-1.189q0-.23-.216-.572t-.539-.663t-.663-.539t-.572-.216q-.724.052-1.201.582T5.154 12q0 .77.538 1.308T7 13.846"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m19.827 21.248l-7.512-7.511h-.884q-.396 1.215-1.589 2.104q-1.192.89-2.842.89q-2 0-3.366-1.366Q2.27 14 2.27 12q0-1.766 1.092-3.016q1.091-1.25 2.672-1.53L2.752 4.173l.714-.707L20.535 20.54zm.756-10.748l1.494 1.494l-2.616 2.635l-1.672-1.379l-.999.716l-.484-.485l-1.462-1.462l-1.519-1.519zM7 13.846q.729 0 1.25-.49t.573-1.189q0-.23-.216-.572t-.539-.663t-.663-.539t-.572-.216q-.724.052-1.201.582T5.154 12q0 .77.538 1.308T7 13.846"/></svg>
</template>

CSS

.icon-key-off {
  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%22m19.827%2021.248l-7.512-7.511h-.884q-.396%201.215-1.589%202.104q-1.192.89-2.842.89q-2%200-3.366-1.366Q2.27%2014%202.27%2012q0-1.766%201.092-3.016q1.091-1.25%202.672-1.53L2.752%204.173l.714-.707L20.535%2020.54zm.756-10.748l1.494%201.494l-2.616%202.635l-1.672-1.379l-.999.716l-.484-.485l-1.462-1.462l-1.519-1.519zM7%2013.846q.729%200%201.25-.49t.573-1.189q0-.23-.216-.572t-.539-.663t-.663-.539t-.572-.216q-.724.052-1.201.582T5.154%2012q0%20.77.538%201.308T7%2013.846%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%22m19.827%2021.248l-7.512-7.511h-.884q-.396%201.215-1.589%202.104q-1.192.89-2.842.89q-2%200-3.366-1.366Q2.27%2014%202.27%2012q0-1.766%201.092-3.016q1.091-1.25%202.672-1.53L2.752%204.173l.714-.707L20.535%2020.54zm.756-10.748l1.494%201.494l-2.616%202.635l-1.672-1.379l-.999.716l-.484-.485l-1.462-1.462l-1.519-1.519zM7%2013.846q.729%200%201.25-.49t.573-1.189q0-.23-.216-.572t-.539-.663t-.663-.539t-.572-.216q-.724.052-1.201.582T5.154%2012q0%20.77.538%201.308T7%2013.846%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-off.svg?color=%231a73e8&size=48