The Phosphor eye slash icon visually indicates that content is hidden or private, commonly used to toggle password visibility or signify a disabled view.
Common uses
- Password field visibility toggle
- Hiding sensitive data by default
- Indicating a disabled or non-viewable state
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { EyeSlash } from '@phosphor-icons/react';
<EyeSlash size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<EyeSlash size={24} />thin
<EyeSlash size={24} weight="thin" />light
<EyeSlash size={24} weight="light" />bold
<EyeSlash size={24} weight="bold" />fill
<EyeSlash size={24} weight="fill" />duotone
<EyeSlash size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- design
- Keywords
- visiblehiddenshowhidevisibilityviewinvisibleeyelashesdisabledprivatedesigneditoreyeslashpassword hide
FAQ
- What does the eye slash icon represent?
- It represents something that is hidden, invisible, or disabled, often used to control the visibility of content like passwords.
- How do I use the eye slash icon in React?
- You can import and use it like this: import { EyeSlash } from '@phosphor-icons/react'; <EyeSlash />.
- What is the license for Phosphor icons?
- Phosphor icons are distributed under the MIT license, allowing for free use.
Related icons
The same idea in other libraries, and near matches in Phosphor.
Looking for something else? Search Phosphor 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 →