Pixmora

Иконка информации для пояснения

Буква i в круге Lucide открывает подсказку или справку к полю. Это не ошибка и не предупреждение: для аварии смотрите triangle-alert в каталоге.

Как применить иконку «i в круге»

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

i в круге (info): Круг, точка и вертикаль буквы i. Подсказка к полю, нейтральная справка, «что это значит».

i в значке (badge-info): Та же i внутри многоугольного бейджа. Статус «есть информация» в списке меток или бейджей.

У поля формы 14–16 px. В баннере-пояснении 20. Не раздувайте i до 48 рядом с коротким инпутом.

Это пример разметки без обработчиков. Показ #inn-hint сделайте в проекте (tooltip или раскрытие). Путь к SVG замените. Текст подсказки должен жить в DOM, а не только в title у картинки.

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

Файлы SVG

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

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

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

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

<label for="inn-field">ИНН</label>
<input id="inn-field" name="inn" inputmode="numeric">
<button type="button" aria-describedby="inn-hint" aria-label="Подсказка по ИНН">
  <img src="lucide-info.svg" width="16" height="16" alt="">
</button>
<p id="inn-hint" hidden>Укажите 10 или 12 цифр без пробелов.</p>

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

info или circle-alert?

info - нейтральное пояснение. circle-alert - внимание к риску или важному ограничению. Не красьте info в красный без смены смысла.

Достаточно ли title у img вместо текста подсказки?

Нет. title недоступен с клавиатуры стабильно. Держите текст в DOM и связывайте через aria-describedby или видимую подпись.