How to use image as checkbox html

So basically what I need to do is a login page, with an eye on the password field, so the user can click on the eye icon, and see the password.

What I have so far is a simple checkbox:

<input type="checkbox" id="box" onclick="reveal()">

and the function to show and hide the password:

  function reveal() {
    if (document.getElementById('box').checked) { document.getElementById("id_password").type = 'text'; }
    else
      document.getElementById("id_password").type = 'password';
  }

It works with this solution, but I need to have an Eye-Icon, instead of a simple checkbox. How can I make an Image as the checkbox?

Back to Top