Home/Libraries/Cuida Icons (Iconify)/visibility-off-outline

Cuida Icons (Iconify)

VisibilityOffOutline

License: Apache-2.0Commercial Safe

ICON SIZE

COLOR PICKER

Download SVG without fill color (CSS-styleable)

<svg style="color: #818cf8" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24"><path fill="#818cf8" fill-rule="evenodd" d="M3.293 3.293a1 1 0 0 1 1.414 0l16 16a1 1 0 0 1-1.414 1.414l-16-16a1 1 0 0 1 0-1.414" clip-rule="evenodd"/><path fill="#818cf8" fill-rule="evenodd" d="M19.737 11.364c-1.55-3.999-5.46-5.831-9.084-5.27a1 1 0 0 1-.306-1.976c4.47-.693 9.337 1.573 11.255 6.524c.339.873.338 1.842.002 2.715q-.11.28-.23.552c-.224.5-.587 1.006-.85 1.374q-.114.158-.196.277a1 1 0 1 1-1.656-1.12q.176-.258.326-.466c.23-.323.416-.582.55-.883q.1-.222.19-.454c.158-.41.157-.865 0-1.273ZM6.747 6.562a1 1 0 0 1-.082 1.412a8 8 0 0 0-.892.93a9.5 9.5 0 0 0-1.47 2.412c-.18.434-.182.933 0 1.384c2.1 5.242 7.312 6.513 11.255 4.571q.46-.225.893-.51a1 1 0 0 1 1.098 1.672q-.538.352-1.107.633c-4.895 2.41-11.425.795-13.996-5.622a3.83 3.83 0 0 1 .01-2.897a11.5 11.5 0 0 1 1.77-2.91a10 10 0 0 1 1.11-1.157a1 1 0 0 1 1.41.082Z" clip-rule="evenodd"/><path fill="#818cf8" fill-rule="evenodd" d="M10.195 9.739a.79.79 0 0 1 .168 1.104a1.96 1.96 0 0 0-.376 1.327a1.96 1.96 0 0 0 .995 1.555c.33.186.718.28 1.126.246a1.96 1.96 0 0 0 1.201-.54a.79.79 0 0 1 1.094 1.139a3.54 3.54 0 0 1-2.167.976a3.54 3.54 0 0 1-3.101-1.374a3.54 3.54 0 0 1-.723-1.873a3.54 3.54 0 0 1 .679-2.393a.79.79 0 0 1 1.104-.167m4.865 2.567a.75.75 0 0 1-.865-.613a2 2 0 0 0-.814-1.294a2 2 0 0 0-.712-.321a.75.75 0 1 1 .337-1.462a3.52 3.52 0 0 1 2.667 2.824a.75.75 0 0 1-.613.865Z" clip-rule="evenodd"/></svg>

Icons in Action

WEB APPLICATION HEADER & NAVIGATION

my-app.com/dashboard

Overview Dashboard

PROGRESS STEPPER

BUTTON UI ACTIONS

SCALABILITY & CLARITY

12px

16px

24px

32px

48px

“

Highly adaptable, clean vectors that scale perfectly across modern UI components, navigation bars, and mobile actions. Perfectly pre-vetted for production deployment.

IconSearch Presets

Frequently Asked Questions

Q.How do I use this icon in my React/Next.js project?

You have two choices: install the official package listed under the "REACT IMPORT" tab (e.g. npm install @iconify/react) and import the icon directly, or copy the complete React Component code from the "STANDALONE JSX" tab and paste it directly into a local file (e.g. VisibilityOffOutlineIcon.tsx) to avoid installing any npm packages.

Q.Is this icon free for commercial use?

Yes. This icon is published under the open-source **Apache-2.0** license. The license grants full permissions for personal and commercial usage (e.g., in SaaS platforms, client projects, or business landing pages). Attributing the icon creator is generally not required for MIT/ISC licenses, but check details on our dedicated License Guide.

Q.What is the "Download SVG without fill color" toggle?

Many SVGs ship with inline fill="..." attributes. By checking this toggle, we strip these attributes and enforce fill="none", making the SVG fully styleable via CSS classes or Tailwind utility classes like fill-current.