visibility off icon

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

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

3 other variants in Material Symbols Light

visibility-off-outline visibility-off-outline-rounded visibility-off-rounded

The same icon in other sets

visibility-offMaterial Symbols

More actions icons from Material Symbols Light

Use the visibility 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.723 21.139l-3.892-3.881q-.664.294-1.647.518Q13.2 18 12 18q-3.275 0-5.956-1.79q-2.68-1.789-3.967-4.71q.583-1.325 1.537-2.482q.953-1.157 2.036-1.941l-2.789-2.8l.708-.708l16.862 16.862zM12 15.154q.352 0 .772-.083q.42-.082.657-.215L8.644 10.07q-.133.275-.215.686q-.083.41-.083.743q0 1.529 1.063 2.591T12 15.154m6.608.565l-3.098-3.073q.06-.213.102-.506t.042-.64q0-1.529-1.063-2.591T12 7.846q-.346 0-.62.052t-.507.156L8.419 5.619q.871-.328 1.773-.474T12 5q3.256 0 5.956 1.79q2.7 1.789 3.967 4.71q-.536 1.206-1.358 2.266t-1.957 1.953m-3.914-3.869l-3.019-3q.623-.125 1.21.084q.588.208 1.013.639q.444.43.66 1.028q.217.597.136 1.249"/></svg>

React

import type { SVGProps } from "react";

export function MaterialSymbolsLightVisibilityOff(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.723 21.139l-3.892-3.881q-.664.294-1.647.518Q13.2 18 12 18q-3.275 0-5.956-1.79q-2.68-1.789-3.967-4.71q.583-1.325 1.537-2.482q.953-1.157 2.036-1.941l-2.789-2.8l.708-.708l16.862 16.862zM12 15.154q.352 0 .772-.083q.42-.082.657-.215L8.644 10.07q-.133.275-.215.686q-.083.41-.083.743q0 1.529 1.063 2.591T12 15.154m6.608.565l-3.098-3.073q.06-.213.102-.506t.042-.64q0-1.529-1.063-2.591T12 7.846q-.346 0-.62.052t-.507.156L8.419 5.619q.871-.328 1.773-.474T12 5q3.256 0 5.956 1.79q2.7 1.789 3.967 4.71q-.536 1.206-1.358 2.266t-1.957 1.953m-3.914-3.869l-3.019-3q.623-.125 1.21.084q.588.208 1.013.639q.444.43.66 1.028q.217.597.136 1.249"/></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.723 21.139l-3.892-3.881q-.664.294-1.647.518Q13.2 18 12 18q-3.275 0-5.956-1.79q-2.68-1.789-3.967-4.71q.583-1.325 1.537-2.482q.953-1.157 2.036-1.941l-2.789-2.8l.708-.708l16.862 16.862zM12 15.154q.352 0 .772-.083q.42-.082.657-.215L8.644 10.07q-.133.275-.215.686q-.083.41-.083.743q0 1.529 1.063 2.591T12 15.154m6.608.565l-3.098-3.073q.06-.213.102-.506t.042-.64q0-1.529-1.063-2.591T12 7.846q-.346 0-.62.052t-.507.156L8.419 5.619q.871-.328 1.773-.474T12 5q3.256 0 5.956 1.79q2.7 1.789 3.967 4.71q-.536 1.206-1.358 2.266t-1.957 1.953m-3.914-3.869l-3.019-3q.623-.125 1.21.084q.588.208 1.013.639q.444.43.66 1.028q.217.597.136 1.249"/></svg>
</template>

CSS

.icon-visibility-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.723%2021.139l-3.892-3.881q-.664.294-1.647.518Q13.2%2018%2012%2018q-3.275%200-5.956-1.79q-2.68-1.789-3.967-4.71q.583-1.325%201.537-2.482q.953-1.157%202.036-1.941l-2.789-2.8l.708-.708l16.862%2016.862zM12%2015.154q.352%200%20.772-.083q.42-.082.657-.215L8.644%2010.07q-.133.275-.215.686q-.083.41-.083.743q0%201.529%201.063%202.591T12%2015.154m6.608.565l-3.098-3.073q.06-.213.102-.506t.042-.64q0-1.529-1.063-2.591T12%207.846q-.346%200-.62.052t-.507.156L8.419%205.619q.871-.328%201.773-.474T12%205q3.256%200%205.956%201.79q2.7%201.789%203.967%204.71q-.536%201.206-1.358%202.266t-1.957%201.953m-3.914-3.869l-3.019-3q.623-.125%201.21.084q.588.208%201.013.639q.444.43.66%201.028q.217.597.136%201.249%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.723%2021.139l-3.892-3.881q-.664.294-1.647.518Q13.2%2018%2012%2018q-3.275%200-5.956-1.79q-2.68-1.789-3.967-4.71q.583-1.325%201.537-2.482q.953-1.157%202.036-1.941l-2.789-2.8l.708-.708l16.862%2016.862zM12%2015.154q.352%200%20.772-.083q.42-.082.657-.215L8.644%2010.07q-.133.275-.215.686q-.083.41-.083.743q0%201.529%201.063%202.591T12%2015.154m6.608.565l-3.098-3.073q.06-.213.102-.506t.042-.64q0-1.529-1.063-2.591T12%207.846q-.346%200-.62.052t-.507.156L8.419%205.619q.871-.328%201.773-.474T12%205q3.256%200%205.956%201.79q2.7%201.789%203.967%204.71q-.536%201.206-1.358%202.266t-1.957%201.953m-3.914-3.869l-3.019-3q.623-.125%201.21.084q.588.208%201.013.639q.444.43.66%201.028q.217.597.136%201.249%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-symbols-light/visibility-off.svg?color=%231a73e8&size=48