Pixmora

Иконка ключа для доступа

Ключи Lucide для выдачи доступа и секретов в интерфейсе. Знак не хранит и не проверяет ключ: рядом нужен текст действия.

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

Сценарий страницы: Показ и копирование API-ключа. Основной вариант - lucide:key-round, набор Lucide, автор Lucide Contributors, лицензия ISC.

Круглый ключ (key-round): Круглая головка и ступенчатая бородка. API-ключ, токен, «получить доступ».

Классический ключ (key): Круглая головка и длинный стержень под углом. Общий знак ключа или лицензии.

Квадратный ключ (key-square): Угловатая головка и квадратные зубцы. Когда нужна более «техническая» форма ключа в плотном UI.

У поля секрета 16–20 px. В списке ключей доступа 24. Не рисуйте ключ размером баннера, если рядом реальный секрет мелким текстом.

Это пример разметки без обработчиков. Значение TEST демонстрационное. Логику копирования подключите сами. Замените путь к SVG; кнопка type=button не отправляет форму.

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

Файлы SVG

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

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

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

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

<div>
  <img src="lucide-key-round.svg" width="20" height="20" alt="">
  <label for="api-key">API-ключ</label>
  <input id="api-key" type="text" name="api_key" value="TEST" readonly>
  <button type="button">Копировать</button>
</div>

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

Можно ли показывать настоящий ключ в value?

В публичных примерах используйте TEST или маску. Боевой секрет не кладите в статическую вёрстку.

Чем ключ отличается от lock?

key - средство доступа. lock - состояние «закрыто». Часто их ставят рядом в одном сценарии.