Pixmora

Иконка галочки для успеха и выбора

Три состояния подтверждения Lucide: простая галочка, успех в круге и отметка в квадрате. Подходят для форм и списков.

Как применить иконку «Галочка»

Сценарий страницы: Успех, выбор и подтверждение. Основной вариант - lucide:check, набор Lucide, автор Lucide Contributors, лицензия ISC.

Галочка (check): Только штрих без рамки. Компактный список «что входит» или инлайн-подтверждение.

Успех в круге (circle-check): Галочка в круге: завершённый статус. Успешная отправка, оплата, шаг мастера выполнен.

Отметка в квадрате (square-check): Квадрат с галочкой ближе к чекбоксу. Выбранный пункт настроек или фильтр.

В чекбоксе и списке преимуществ 16–20 px. Для экрана успешной оплаты уместны 32–48. Очень крупный растр редко нужен: галочка читается уже на 16.

Это пример разметки без обработчиков. Имя файла в примере совпадает с выбранным вариантом на странице; замените путь при подключении. Состояние выбора передавайте через aria-checked или видимый текст статуса, а не только сменой картинки без имени.

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

Файлы SVG

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

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

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

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

<button type="button" role="checkbox" aria-checked="true" aria-label="Согласие на рассылку">
  <img src="lucide-check.svg" width="20" height="20" alt="">
</button>

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

Подойдёт ли circle-check вместо toast «Готово»?

Да, если рядом есть текст статуса. Одна иконка без текста не объясняет, что именно готово.

Есть ли версия с ошибкой на этой странице?

Нет. Здесь только подтверждение. Иконки ошибки ищите отдельно в каталоге /icons.