Menu

Beta
Sign in
Eye Visibility SVG icon, rounded

Eye Visibility SVG icon, rounded

An eye symbol indicates whether content is visible or hidden. Place it beside a password field on a website or in a mobile app sign-in form to toggle password visibility.

Free · from Rounded Interface Icons

Similar SVGs

More from Rounded Interface Icons

Whole pack

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/a0a4dju6eySd/amnt.svg" alt="Eye Visibility" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><g id="layer-1" data-name="Group 1"><path d="M8 32C13 23 22 17 32 17C42 17 51 23 56 32C51 41 42 47 32 47C22 47 13 41 8 32Z" fill="#a8dadc" stroke="#264653" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M41 32C41 36.97 36.97 41 32 41C27.03 41 23 36.97 23 32C23 27.03 27.03 23 32 23C36.97 23 41 27.03 41 32Z" fill="#a8dadc" stroke="#264653" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M35 32C35 33.66 33.66 35 32 35C30.34 35 29 33.66 29 32C29 30.34 30.34 29 32 29C33.66 29 35 30.34 35 32Z" fill="#264653" stroke="#264653" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
CSS background-image
.eye-visibility {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/a0a4dju6eySd/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.eye-visibility {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/a0a4dju6eySd/amnt.svg") center / contain no-repeat;
}
React
import EyeVisibilitySvg from "./eye-visibility.jsx"; // from the React tab above

<EyeVisibilitySvg width={48} height={48} />

Tags

eyevisibilityshowpassword

Made with AMNT

AMNT SVG Pro 1.1 drew this from the words Eye visibility. Flat, rounded icons in a consistent set. Use two colours and clean 2 px lines with rounded ends and corners. Keep the shapes simple, balanced, and easy to recognise at small sizes. Use the same proportions, line weight, and colour placement for every icon. as part of the pack Rounded Interface Icons. Want one like it? Make your own in the SVG studio.

Licence: free. A Free account may use it for personal work; Pro and Max download it with a commercial licence, fixed at download, forever. No credit needed. Read the licence

Settings