Skip to main content

Eye Visibility Toggle

  • Tags:

Examples

Heading
Smaller heading

Inline text 

Example link text 

Icon font

Use in web applications, on buttons, and anywhere you need more than a few icons.

<i class="modus-icons" aria-hidden="true">eye_visibility_toggle</i>

SVG sprite

Use for static sites when you only need a few icons.

<svg class="mi" width="1em" height="1em" fill="currentColor">
  <use xlink:href="/connect-icons.svg#eye-visibility-toggle" />
</svg>

SVG code

Use when you don't want any dependency.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="mi-connect mi-eye-visibility-toggle" viewBox="0 0 24 24">
  <path d="M12 7.29c4.767 0 8.839 2.966 10.488 7.151-1.65 4.186-5.721 7.15-10.488 7.15s-8.838-2.964-10.487-7.15C3.163 10.256 7.233 7.291 12 7.29m0 2.384a4.77 4.77 0 0 0-4.767 4.767A4.77 4.77 0 0 0 12 19.208a4.77 4.77 0 0 0 4.768-4.767A4.77 4.77 0 0 0 12 9.674m0 1.907a2.856 2.856 0 0 1 2.86 2.86 2.855 2.855 0 0 1-2.86 2.86 2.856 2.856 0 0 1-2.86-2.86 2.857 2.857 0 0 1 2.86-2.86M12 3c4.856 0 9.147 2.925 10.932 7.452l.068.175-.068.176a12 12 0 0 1-.854 1.731 12 12 0 0 0-.592-.893c.177-.33.344-.664.489-1.014A10.74 10.74 0 0 0 12 3.953c-4.399 0-8.293 2.614-9.974 6.674.145.35.312.685.489 1.013a12 12 0 0 0-.592.894 12 12 0 0 1-.855-1.732L1 10.627l.068-.174C2.853 5.926 7.144 3 12 3"/>
</svg>

SVG CSS code

Use for embedding your icons in CSS with no dependency.