eye hide icon

eye-hide-20-regular from Fluent UI System Icons by Microsoft Corporation · 20 Regular · MIT Free for personal and commercial use.

Name
eye-hide-20-regular
Set
Fluent UI System Icons
Style
20 Regular
Viewbox
20×20
License
MIT

1 other variant in Fluent UI System Icons

eye-hide-20-filled

Related icons in Fluent UI System Icons

eye-circle-16-filledeye-lines-20-filledeye-off-16-filledeye-show-12-filledeye-tracking-16-filledeye-tracking-off-16-filledeye-tracking-on-16-filled

Use the eye hide icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><g fill="none"><path d="M2.854 2.146a.5.5 0 1 0-.708.708l3.5 3.498a8.097 8.097 0 0 0-3.366 5.046a.5.5 0 1 0 .98.204a7.09 7.09 0 0 1 3.107-4.528L7.953 8.66a3.5 3.5 0 1 0 4.886 4.886l4.307 4.308a.5.5 0 0 0 .708-.708l-15-15zm9.265 10.68A2.5 2.5 0 1 1 8.673 9.38l3.446 3.447z" fill="currentColor"/><path d="M10.123 8.002l3.375 3.374a3.5 3.5 0 0 0-3.374-3.374z" fill="currentColor"/><path d="M10 6c-.57 0-1.129.074-1.666.213l-.803-.803A7.648 7.648 0 0 1 10 5c3.693 0 6.942 2.673 7.72 6.398a.5.5 0 0 1-.98.204C16.058 8.327 13.207 6 10 6z" fill="currentColor"/></g></svg>

React

import type { SVGProps } from "react";

export function FluentEyeHide20Regular(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><g fill="none"><path d="M2.854 2.146a.5.5 0 1 0-.708.708l3.5 3.498a8.097 8.097 0 0 0-3.366 5.046a.5.5 0 1 0 .98.204a7.09 7.09 0 0 1 3.107-4.528L7.953 8.66a3.5 3.5 0 1 0 4.886 4.886l4.307 4.308a.5.5 0 0 0 .708-.708l-15-15zm9.265 10.68A2.5 2.5 0 1 1 8.673 9.38l3.446 3.447z" fill="currentColor"/><path d="M10.123 8.002l3.375 3.374a3.5 3.5 0 0 0-3.374-3.374z" fill="currentColor"/><path d="M10 6c-.57 0-1.129.074-1.666.213l-.803-.803A7.648 7.648 0 0 1 10 5c3.693 0 6.942 2.673 7.72 6.398a.5.5 0 0 1-.98.204C16.058 8.327 13.207 6 10 6z" fill="currentColor"/></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><g fill="none"><path d="M2.854 2.146a.5.5 0 1 0-.708.708l3.5 3.498a8.097 8.097 0 0 0-3.366 5.046a.5.5 0 1 0 .98.204a7.09 7.09 0 0 1 3.107-4.528L7.953 8.66a3.5 3.5 0 1 0 4.886 4.886l4.307 4.308a.5.5 0 0 0 .708-.708l-15-15zm9.265 10.68A2.5 2.5 0 1 1 8.673 9.38l3.446 3.447z" fill="currentColor"/><path d="M10.123 8.002l3.375 3.374a3.5 3.5 0 0 0-3.374-3.374z" fill="currentColor"/><path d="M10 6c-.57 0-1.129.074-1.666.213l-.803-.803A7.648 7.648 0 0 1 10 5c3.693 0 6.942 2.673 7.72 6.398a.5.5 0 0 1-.98.204C16.058 8.327 13.207 6 10 6z" fill="currentColor"/></g></svg>
</template>

CSS

.icon-eye-hide-20-regular {
  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%2020%2020%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M2.854%202.146a.5.5%200%201%200-.708.708l3.5%203.498a8.097%208.097%200%200%200-3.366%205.046a.5.5%200%201%200%20.98.204a7.09%207.09%200%200%201%203.107-4.528L7.953%208.66a3.5%203.5%200%201%200%204.886%204.886l4.307%204.308a.5.5%200%200%200%20.708-.708l-15-15zm9.265%2010.68A2.5%202.5%200%201%201%208.673%209.38l3.446%203.447z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M10.123%208.002l3.375%203.374a3.5%203.5%200%200%200-3.374-3.374z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M10%206c-.57%200-1.129.074-1.666.213l-.803-.803A7.648%207.648%200%200%201%2010%205c3.693%200%206.942%202.673%207.72%206.398a.5.5%200%200%201-.98.204C16.058%208.327%2013.207%206%2010%206z%22%20fill%3D%22currentColor%22%2F%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%2020%2020%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M2.854%202.146a.5.5%200%201%200-.708.708l3.5%203.498a8.097%208.097%200%200%200-3.366%205.046a.5.5%200%201%200%20.98.204a7.09%207.09%200%200%201%203.107-4.528L7.953%208.66a3.5%203.5%200%201%200%204.886%204.886l4.307%204.308a.5.5%200%200%200%20.708-.708l-15-15zm9.265%2010.68A2.5%202.5%200%201%201%208.673%209.38l3.446%203.447z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M10.123%208.002l3.375%203.374a3.5%203.5%200%200%200-3.374-3.374z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M10%206c-.57%200-1.129.074-1.666.213l-.803-.803A7.648%207.648%200%200%201%2010%205c3.693%200%206.942%202.673%207.72%206.398a.5.5%200%200%201-.98.204C16.058%208.327%2013.207%206%2010%206z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/eye-hide-20-regular.svg?color=%231a73e8&size=48