Skip to content

Eye Blink Toggle

A copy-paste animated icons component in pure HTML, CSS & vanilla JS. Zero dependencies, framework-agnostic, MIT-licensed.

Animated IconsHTMLJavaScriptCSSany framework

Copy into your project

HTML
<button class="nuda-ai2-eye-blink" type="button" aria-label="Hide password" aria-pressed="false">
  <svg class="nuda-ai2-eye-blink__svg" viewBox="0 0 24 24" aria-hidden="true">
    <g class="nuda-ai2-eye-blink__eye">
      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
      <circle cx="12" cy="12" r="3" />
    </g>
    <line class="nuda-ai2-eye-blink__lid" x1="2" y1="12" x2="22" y2="12" />
  </svg>
</button>
JavaScript
/* Eye Blink Toggle — vanilla JS
   Flips aria-pressed/label; CSS blinks the eye shut. */

(function () {
  document.querySelectorAll(".nuda-ai2-eye-blink").forEach(function (btn) {
    btn.addEventListener("click", function () {
      var hidden = btn.getAttribute("aria-pressed") !== "true";
      btn.setAttribute("aria-pressed", String(hidden));
      btn.setAttribute("aria-label", hidden ? "Show password" : "Hide password");
    });
  });
})();
CSS
.nuda-ai2-eye-blink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: #09090b;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  color: #fafafa;
  cursor: pointer;
  transition: border-color .25s,color .25s;
}

.nuda-ai2-eye-blink:hover,.nuda-ai2-eye-blink:focus-visible {
  border-color: rgba(228,255,84,.4);
  outline: none;
}

.nuda-ai2-eye-blink:focus-visible {
  box-shadow: 0 0 0 2px rgba(228,255,84,.5);
}

.nuda-ai2-eye-blink[aria-pressed="true"] {
  color: #e4ff54;
}

.nuda-ai2-eye-blink__svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.nuda-ai2-eye-blink__eye {
  transform-origin: 12px 12px;
  transition: transform .3s cubic-bezier(.4,.2,.2,1);
}

.nuda-ai2-eye-blink__lid {
  opacity: 0;
  transition: opacity .25s;
}

.nuda-ai2-eye-blink[aria-pressed="true"] .nuda-ai2-eye-blink__eye {
  transform: scaleY(.08);
}

.nuda-ai2-eye-blink[aria-pressed="true"] .nuda-ai2-eye-blink__lid {
  opacity: 1;
}

@media (prefers-reduced-motion:reduce) {
  .nuda-ai2-eye-blink__eye {
    transition: none;
  }
}

How to use Eye Blink Toggle

Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.

Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.

More animated icons components

← Browse all NudaUI components