Pixmora

Иконка замка для закрытого доступа

Навесной замок Lucide для приватного раздела. Файл не блокирует контент: закрытие реализует ваш код, иконка только подписывает действие.

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

Сценарий страницы: Кнопка «Сделать приватным». Основной вариант - lucide:lock, набор Lucide, автор Lucide Contributors, лицензия ISC.

Закрытый замок (lock): Дуга скобы замкнута над корпусом. Приватный объект, закрытый раздел, поле пароля.

Открытый замок (lock-open): Скоба разомкнута: доступ открыт. Состояние «публичный» или «разблокировано» после действия пользователя.

Замок со скважиной (lock-keyhole): В корпусе круглая скважина: акцент на ключевом доступе. Экран ввода ключа или смена пароля.

Рядом с полем пароля 16–20 px. В карточке «приватный документ» 24. Не маскируйте отсутствие доступа одной иконкой без текста.

Это пример разметки без обработчиков. Подключите смену aria-pressed и реальное ограничение доступа в своём коде. Замените путь к SVG. Замок на кнопке сам по себе ничего не шифрует.

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

Файлы SVG

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

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

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

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

<button type="button" aria-pressed="true" aria-label="Доступ закрыт">
  <img src="lucide-lock.svg" width="20" height="20" alt="">
  Приватный
</button>

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

Достаточно ли иконки, чтобы скрыть данные?

Нет. Нужна серверная проверка прав. Иконка только сообщает состояние в интерфейсе.

Почему не shield?

shield про политику и защиту как тему. lock про закрыто или открыто для доступа.