Pixmora

Иконка предупреждения для статуса

Восклицательный знак Lucide в разных рамках: треугольник для риска, круг для мягкого внимания, восьмиугольник для жёсткого стопа.

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

Сценарий страницы: Предупреждение перед необратимым действием. Основной вариант - lucide:triangle-alert, набор Lucide, автор Lucide Contributors, лицензия ISC.

Треугольник (triangle-alert): Классический знак риска: треугольник и «!». Предупреждение о потере данных, лимитах, несовместимости.

Круг с «!» (circle-alert): Восклицание в круге, мягче треугольника. Замечание или напоминание без аварийного тона.

Восьмиугольник (octagon-alert): «!» в восьмиугольнике ближе к стоп-сигналу. Критичный блокер: действие нельзя продолжать без решения.

В строке статуса 20–24 px. В модальном подтверждении 32. Не делайте предупреждение мельче 16: угол треугольника теряется.

Это пример разметки без обработчиков. Текст рядом обязателен: одна пиктограмма не объясняет риск. Замените путь к SVG. role=status уместен для неблокирующего предупреждения; для блокирующего диалога используйте диалог в своём коде.

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

Файлы SVG

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

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

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

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

<div role="status" aria-live="polite">
  <img src="lucide-triangle-alert.svg" width="24" height="24" alt="">
  <p>Файл перезапишет текущую версию. Сохраните копию, если она нужна.</p>
</div>

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

Когда брать circle-x вместо предупреждения?

circle-x - отказ или ошибка уже случились. triangle-alert - риск до или во время действия, пока исход ещё можно изменить.

Достаточно ли только иконки в тосте?

Нет. Нужен короткий текст: что не так и что сделать. Иконка задаёт тон, не заменяет формулировку.