Pixmora

Иконка закрытия диалога

Крестик Lucide закрывает окно или сбрасывает поле. Это не удаление записи: для корзины есть отдельная тема. Ниже три формы креста и статическая кнопка.

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

Сценарий страницы: Закрытие диалога без удаления данных. Основной вариант - lucide:x, набор Lucide, автор Lucide Contributors, лицензия ISC.

Крестик (x): Две диагонали без рамки. Закрыть диалог, вкладку или очистить строку поиска.

Крест в круге (circle-x): Тот же крест внутри окружности: заметнее на цветном фоне. Крупная кнопка отмены или статус «отклонено».

Крест в квадрате (square-x): Крест в скруглённом квадрате, ближе к плитке действия. Панель инструментов, где соседние кнопки тоже в квадратах.

В углу модального окна 16–20 px. В чипе фильтра или поле поиска 14–16. Крупнее 32 для «закрыть» редко нужно: крест читается мелко.

Это пример разметки без обработчиков. Подключите закрытие диалога и возврат фокуса в своём коде. Путь к SVG замените на скачанный файл. Крестик декоративный, действие задаёт aria-label.

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

Файлы SVG

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

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

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

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

<div role="dialog" aria-labelledby="demo-title" aria-modal="true">
  <h2 id="demo-title">Параметры</h2>
  <button type="button" aria-label="Закрыть">
    <img src="lucide-x.svg" width="20" height="20" alt="">
  </button>
</div>

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

Можно ли ставить крестик на кнопку удаления?

Лучше нет. Закрытие окна и удаление сущности путают. Для удаления берите иконку корзины и явную подпись.

Что писать в aria-label: «Закрыть» или «Отмена»?

«Закрыть», если уходит оверлей. «Отмена», если отменяется черновик действия. Не оставляйте кнопку без имени.