Stay Tuned!

Subscribe to our newsletter to get our newest articles instantly!


How to show and hide password using eye icon in Javascript

In modern web forms, providing users with the ability to toggle password visibility adds convenience and user-friendliness. Implementing an eye icon that allows users to show or hide their passwords enhances control and security while maintaining ease of use. Let’s explore how to achieve this functionality using JavaScript and an eye icon.

HTML Structure

Start by creating an input field for the password and an eye icon that toggles the password visibility.

<input type="password" id="passwordField">
<i class="fas fa-eye" id="togglePassword"></i>

JavaScript Implementation

1. Select Elements

Select the password input field and the eye icon using JavaScript.

const passwordField = document.getElementById('passwordField');
const togglePassword = document.getElementById('togglePassword');

2. Toggle Password Visibility

Create a function to toggle the password visibility when the eye icon is clicked.

togglePassword.addEventListener('click', function() {
    const type = passwordField.getAttribute('type') === 'password' ? 'text' : 'password';
    passwordField.setAttribute('type', type);
    // Change eye icon appearance based on password visibility

Styling and Icon Library

Ensure you have an icon library like Font Awesome linked in your HTML to use eye icons. Adjust the styling to show and hide the eye icon based on password visibility.

<link rel="stylesheet" href="">
/* Initially hide eye icon */
#togglePassword {
    display: none;

/* Show eye icon when password field is focused */
#passwordField:focus + #togglePassword {
    display: block;


Integrating the eye icon functionality to show and hide passwords enhances user experience and security in web forms. By implementing this feature using JavaScript, developers can provide users with the flexibility to view or mask their passwords conveniently.

You Might Also Like

  • Lorem ipsum dolarorit ametion consectetur
  • The Blues Kitchen woks Podcast
  • Chasing Dreams in Slow Motion
  • If you use this site regularly and would like to help keep the site on the Internet,
  • Dolarorit ametion consectetur elit.
  • Modern Office Must-Have in 2021
  • If you are going to use a passage of Lorem
  • Lorem ipsum consectetur elit.


About Author

Leave a comment

Your email address will not be published. Required fields are marked *

You may also like

Javascript Tech

How to change Lowercase to Uppercase in Javascript

There are many variations of passages of Lorem Ipsum available but the majority have suffered alteration in that some injected

How to refresh page after update in JavaScript

In JavaScript, refreshing a page after an update is a common requirement to ensure users view the latest content or