Pixmora

Иконка глаза для показа содержимого

Открытый глаз Lucide делает скрытое видимым: пароль, слой, колонку. Сам знак ничего не шифрует и не защищает: это только переключатель отображения.

Как применить иконку «Открытый глаз»

Сценарий страницы: Показ скрытого содержимого. Основной вариант - lucide:eye, набор Lucide, автор Lucide Contributors, лицензия ISC.

Открытый глаз (eye): Контур глаза и зрачок: содержимое видно. Показать пароль, включить слой, режим просмотра.

Глаз с перечёркиванием (eye-off): Глаз и диагональ: скрыто. Состояние «пароль скрыт» или выключенная видимость.

Закрытые веки (eye-closed): Линии закрытого глаза без зрачка: мягче, чем перечёркивание. Когда нужен «сон» или закрытость без акцента запрета.

В поле пароля 18–20 px. В тулбаре слоёв макета 16–18. Для «просмотра» карточки как отдельной страницы иногда берут тот же eye с подписью «Просмотр».

Это пример разметки без обработчиков. Переключение type у поля и aria-pressed сделайте в коде. Путь к SVG замените. Иконка не заменяет политику хранения паролей на сервере.

Лицензия ISC: https://github.com/lucide-icons/lucide/blob/main/LICENSE. Полный текст лицензии добавляется в metadata скачиваемого SVG.

Файлы SVG

Стандартные SVG с полным текстом лицензии ISC в metadata. Отдельных страниц под размер и цвет нет. PNG с выбранным размером и цветом готовится в браузере и требует JavaScript.

Полный текст лицензии ISC

Пример разметки

Доступная подпись: Показать. Имя файла в примере совпадает с основным вариантом; при смене варианта замените путь на скачанный файл.

<label for="password-field">Пароль</label>
<input id="password-field" type="password" name="password" autocomplete="current-password">
<button type="button" aria-controls="password-field" aria-pressed="false" aria-label="Показать пароль">
  <img src="lucide-eye.svg" width="20" height="20" alt="">
</button>

Частые вопросы

Делает ли иконка глаза форму безопаснее?

Нет. Это только UI-переключатель видимости. Защита данных - на сервере, в HTTPS и правилах доступа.

Какой aria-label в каждом состоянии?

При скрытом пароле «Показать пароль», при видимом «Скрыть пароль». Обновляйте вместе с aria-pressed.