eye slash icon

eye-slash-solid from HeroIcons by Refactoring UI Inc · Solid 24x24 · MIT Free for personal and commercial use.

Name: eye-slash-solid
Set: HeroIcons
Style: Solid 24x24
Viewbox: 24×24
License: MIT

3 other variants in HeroIcons

eye-slash eye-slash-16-solid eye-slash-20-solid

The same icon in other sets

eye-slashBootstrap Icons eye-slashFramework7 Icons eye-slashFont Awesome 6 Regular eye-slashFont Awesome 6 Solid eye-slashFont Awesome Regular eye-slashFont Awesome Solid eye-slash-outlineFlowbite Icons eye-slashLine Awesome eye-slashPhosphor eye-slashPrime Icons eye-slashUnicons

Related icons in HeroIcons

eye-dropper

Use the eye slash icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor"><path d="M3.53 2.47a.75.75 0 0 0-1.06 1.06l18 18a.75.75 0 1 0 1.06-1.06zm19.146 10.083a11.25 11.25 0 0 1-2.631 4.31l-3.099-3.099a5.25 5.25 0 0 0-6.71-6.71L7.759 4.577a11.2 11.2 0 0 1 4.242-.827c4.97 0 9.185 3.223 10.675 7.69c.12.362.12.752 0 1.113"/><path d="M15.75 12q0 .27-.037.53l-4.244-4.243q.26-.037.531-.037A3.75 3.75 0 0 1 15.75 12m-3.22 3.713l-4.243-4.244q-.037.26-.037.531a3.75 3.75 0 0 0 4.28 3.713"/><path d="M6.75 12c0-.619.107-1.213.304-1.764l-3.1-3.1a11.25 11.25 0 0 0-2.63 4.31c-.12.362-.12.752 0 1.114c1.489 4.467 5.704 7.69 10.675 7.69c1.5 0 2.933-.294 4.242-.827l-2.477-2.477A5.25 5.25 0 0 1 6.75 12"/></g></svg>

React

import type { SVGProps } from "react";

export function HeroiconsEyeSlashSolid(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor"><path d="M3.53 2.47a.75.75 0 0 0-1.06 1.06l18 18a.75.75 0 1 0 1.06-1.06zm19.146 10.083a11.25 11.25 0 0 1-2.631 4.31l-3.099-3.099a5.25 5.25 0 0 0-6.71-6.71L7.759 4.577a11.2 11.2 0 0 1 4.242-.827c4.97 0 9.185 3.223 10.675 7.69c.12.362.12.752 0 1.113"/><path d="M15.75 12q0 .27-.037.53l-4.244-4.243q.26-.037.531-.037A3.75 3.75 0 0 1 15.75 12m-3.22 3.713l-4.243-4.244q-.037.26-.037.531a3.75 3.75 0 0 0 4.28 3.713"/><path d="M6.75 12c0-.619.107-1.213.304-1.764l-3.1-3.1a11.25 11.25 0 0 0-2.63 4.31c-.12.362-.12.752 0 1.114c1.489 4.467 5.704 7.69 10.675 7.69c1.5 0 2.933-.294 4.242-.827l-2.477-2.477A5.25 5.25 0 0 1 6.75 12"/></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor"><path d="M3.53 2.47a.75.75 0 0 0-1.06 1.06l18 18a.75.75 0 1 0 1.06-1.06zm19.146 10.083a11.25 11.25 0 0 1-2.631 4.31l-3.099-3.099a5.25 5.25 0 0 0-6.71-6.71L7.759 4.577a11.2 11.2 0 0 1 4.242-.827c4.97 0 9.185 3.223 10.675 7.69c.12.362.12.752 0 1.113"/><path d="M15.75 12q0 .27-.037.53l-4.244-4.243q.26-.037.531-.037A3.75 3.75 0 0 1 15.75 12m-3.22 3.713l-4.243-4.244q-.037.26-.037.531a3.75 3.75 0 0 0 4.28 3.713"/><path d="M6.75 12c0-.619.107-1.213.304-1.764l-3.1-3.1a11.25 11.25 0 0 0-2.63 4.31c-.12.362-.12.752 0 1.114c1.489 4.467 5.704 7.69 10.675 7.69c1.5 0 2.933-.294 4.242-.827l-2.477-2.477A5.25 5.25 0 0 1 6.75 12"/></g></svg>
</template>

CSS

.icon-eye-slash-solid {
  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%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M3.53%202.47a.75.75%200%200%200-1.06%201.06l18%2018a.75.75%200%201%200%201.06-1.06zm19.146%2010.083a11.25%2011.25%200%200%201-2.631%204.31l-3.099-3.099a5.25%205.25%200%200%200-6.71-6.71L7.759%204.577a11.2%2011.2%200%200%201%204.242-.827c4.97%200%209.185%203.223%2010.675%207.69c.12.362.12.752%200%201.113%22%2F%3E%3Cpath%20d%3D%22M15.75%2012q0%20.27-.037.53l-4.244-4.243q.26-.037.531-.037A3.75%203.75%200%200%201%2015.75%2012m-3.22%203.713l-4.243-4.244q-.037.26-.037.531a3.75%203.75%200%200%200%204.28%203.713%22%2F%3E%3Cpath%20d%3D%22M6.75%2012c0-.619.107-1.213.304-1.764l-3.1-3.1a11.25%2011.25%200%200%200-2.63%204.31c-.12.362-.12.752%200%201.114c1.489%204.467%205.704%207.69%2010.675%207.69c1.5%200%202.933-.294%204.242-.827l-2.477-2.477A5.25%205.25%200%200%201%206.75%2012%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%2024%2024%22%3E%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M3.53%202.47a.75.75%200%200%200-1.06%201.06l18%2018a.75.75%200%201%200%201.06-1.06zm19.146%2010.083a11.25%2011.25%200%200%201-2.631%204.31l-3.099-3.099a5.25%205.25%200%200%200-6.71-6.71L7.759%204.577a11.2%2011.2%200%200%201%204.242-.827c4.97%200%209.185%203.223%2010.675%207.69c.12.362.12.752%200%201.113%22%2F%3E%3Cpath%20d%3D%22M15.75%2012q0%20.27-.037.53l-4.244-4.243q.26-.037.531-.037A3.75%203.75%200%200%201%2015.75%2012m-3.22%203.713l-4.243-4.244q-.037.26-.037.531a3.75%203.75%200%200%200%204.28%203.713%22%2F%3E%3Cpath%20d%3D%22M6.75%2012c0-.619.107-1.213.304-1.764l-3.1-3.1a11.25%2011.25%200%200%200-2.63%204.31c-.12.362-.12.752%200%201.114c1.489%204.467%205.704%207.69%2010.675%207.69c1.5%200%202.933-.294%204.242-.827l-2.477-2.477A5.25%205.25%200%200%201%206.75%2012%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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