devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt

Бесплатные иконки предупреждения (SVG)

48 бесплатных иконок предупреждения из наборов с открытым кодом. Нажмите на любую, чтобы изменить размер, цвет и толщину обводки, и скопируйте её как SVG, JSX, data URI или CSS.

Обновлено

mail-warning
Lucidewarning
Phosphorpc-warning
Iconoirwarning-12-filled
Fluent UIwarning
Material Symbolswarning
Material Design Iconswarning
Carbonwarning-bold
Phosphortv-warning
Iconoirwarning-12-regular
Fluent UIwarning-outline
Material Symbolswarning-outline
Material Design Iconswarning-filled
Carbonwarning-duotone
Phosphorcpu-warning
Iconoirwarning-16-filled
Fluent UIwarning-outline-rounded
Material Symbolswarning-box
Material Design Iconswarning-alt
Carbonwarning-fill
Phosphorwifi-warning
Iconoirwarning-16-regular
Fluent UIwarning-rounded
Material Symbolswarning-box-outline
Material Design Iconswarning-alt-filled
Carbonwarning-light
Phosphorwifi-warning-solid
Iconoirwarning-20-filled
Fluent UIwarning-off
Material Symbolsbus-warning
Material Design Iconswarning-hex
Carbonwarning-thin
Phosphorwarning-20-regular
Fluent UIwarning-off-outline
Material Symbolssim-warning
Material Design Iconswarning-hex-filled
Carbonseal-warning
Phosphorwarning-24-filled
Fluent UIwarning-off-outline-rounded
Material Symbolsbell-warning
Material Design Iconsseal-warning-bold
Phosphorwarning-24-regular
Fluent UIwarning-off-rounded
Material Symbolschat-warning
Material Design Iconsseal-warning-duotone
Phosphorwarning-28-filled
Fluent UIcast-warning
Material Symbolsdisc-warning
Material Design Icons

Использование иконок предупреждения

Треугольники и восклицательные знаки обозначают предупреждения и ошибки. Сочетайте иконку с текстом, чтобы смысл не зависел только от цвета.

Все иконки здесь наследуют currentColor, поэтому принимают цвет текста элемента, в котором находятся: одна SVG работает на светлом и тёмном фоне, в ссылках и кнопках. Задайте явно width и height (или задайте размер в CSS через 1em), чтобы верстка не смещалась при загрузке страницы.

Доступные иконки

Если иконка декоративная или стоит рядом с видимым текстом, добавьте aria-hidden="true". Если она является единственным содержимым кнопки или ссылки, укажите этому элементу aria-label, например «Предупреждение».

Лицензии

Эти иконки предупреждения взяты из наборов Lucide, Phosphor, Iconoir, Fluent UI, Material Symbols, Material Design Icons и Carbon. Это открытые наборы под лицензиями MIT, ISC или Apache 2.0, которые разрешают личное и коммерческое использование. Нужно что-то другое? Ищите среди более 70 000 иконок в SVG Icon Finder.

Часто задаваемые вопросы

Можно ли использовать эти иконки предупреждения в коммерческих проектах бесплатно?
Да. Они взяты из наборов иконок с открытым кодом под лицензиями MIT, ISC или Apache 2.0, которые разрешают коммерческое использование. Если вы распространяете сами файлы иконок, сохраняйте уведомление о лицензии.
Как изменить цвет иконки предупреждения?
SVG используют currentColor, поэтому задайте CSS-свойство color у родительского элемента. Также можно открыть иконку в поиске и выбрать фиксированный цвет перед копированием.
Можно ли использовать эти иконки в Webflow или React?
Да. Откройте иконку и используйте Copy to Webflow (вставит Code Embed) или Copy JSX для компонента React.