The Heroicons eye slash icon depicts an eye with a diagonal line through it, commonly used to indicate a hidden or disabled view state, such as for passwords or toggled visibility.
Common uses
- Password visibility toggle
- Toggled off state indicator
- Disabled view
Use it in React
Install
npm i @heroicons/reactImport & render
import { EyeSlashIcon } from '@heroicons/react/24/outline';
<EyeSlashIcon className="size-6" />Styles
Heroicons ships this icon in 4 styles — each its own import:
24/outline
<EyeSlashIcon className="size-6" />24/solid
<EyeSlashIcon className="size-6" />20/solid
<EyeSlashIcon className="size-6" />16/solid
<EyeSlashIcon className="size-6" />Details
- Library
- Heroicons (324 icons)
- License
- MIT
- viewBox
0 0 24 24- Keywords
- eyeslashhideinvisibleoffdisabled
FAQ
- What does the eye slash icon represent?
- It represents a hidden or disabled state, often used to obscure sensitive information like passwords or to show when a feature is turned off.
- How do I use the eye slash icon in React?
- You can import and use it like this: import { EyeSlashIcon } from '@heroicons/react/24/outline'.
- What is the license for Heroicons?
- Heroicons are released under the MIT license, allowing for free use in both personal and commercial projects.
Related icons
The same idea in other libraries, and near matches in Heroicons.
Looking for something else? Search Heroicons and 4 more libraries by description →
The search behind these pages runs as a Claude Code skill. What skills are and how I ship them →