Pixmora

Иконка ошибки для неудачного действия

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

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

Сценарий страницы: Сообщение о неудачной отправке формы. Основной вариант - lucide:circle-x, набор Lucide, автор Lucide Contributors, лицензия ISC.

Крест в круге (circle-x): Круг и диагональный крест: ошибка или отклонение. Неудачный запрос, невалидное поле, статус «отклонено».

Крест в восьмиугольнике (octagon-x): Восьмиугольник усиливает запрет. Блокировка действия или отказ по правилу доступа.

Крест в бейдже (badge-x): Фигурный бейдж с крестом: метка в карточке. Статус элемента списка «не прошёл» без полноэкранного алерта.

В алерт-строке 20–24 px. В пустом состоянии списка ошибок 32–48. Для inline у поля хватит 16.

Это пример разметки без обработчиков. role=alert объявит текст скринридеру. Замените сообщение и путь к SVG. Повторную отправку подключите своей кнопкой type=button в коде проекта.

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

Файлы SVG

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

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

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

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

<div role="alert">
  <img src="lucide-circle-x.svg" width="24" height="24" alt="">
  <p>Не удалось отправить форму. Проверьте сеть и попробуйте снова.</p>
</div>

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

Это то же самое, что кнопка закрытия x?

Нет. Простой x в шапке модалки - «закрыть». circle-x сообщает о результате «не удалось» или «отклонено».

Нужно ли дублировать цвет ошибкой в CSS?

Через img цвет родителя не наследуется: скачайте SVG нужного цвета или вставьте inline и задайте color у svg. Смысл ошибки всё равно держите в тексте.