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

Icônes d'avertissement SVG gratuites

48 icônes d'avertissement gratuites issues de jeux open source. Cliquez sur l'une d'elles pour modifier sa taille, sa couleur et son trait, puis copiez-la en SVG, JSX, data URI ou CSS.

Mis à jour le

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

Utiliser les icônes d'avertissement

Triangles et points d'exclamation signalent avertissements et erreurs ; associez l'icône à du texte afin que le sens ne repose pas uniquement sur la couleur.

Toutes les icônes ici suivent currentColor, elles prennent donc la couleur de texte de l'élément dans lequel elles se trouvent : un seul SVG fonctionne sur fonds clairs et sombres, dans les liens comme dans les boutons. Définissez explicitement width et height (ou dimensionnez-les en CSS avec 1em) pour que la mise en page ne bouge pas pendant le chargement de la page.

Icônes accessibles

Si l'icône est décorative ou placée à côté d'un texte visible, ajoutez aria-hidden="true". Si elle est le seul contenu d'un bouton ou d'un lien, donnez à cet élément un aria-label tel que « Avertissement ».

Licences

Ces icônes d'avertissement proviennent de Lucide, Phosphor, Iconoir, Fluent UI, Material Symbols, Material Design Icons et Carbon : des jeux open source sous licences MIT, ISC ou Apache 2.0, qui autorisent l'usage personnel et commercial. Besoin d'autre chose ? Recherchez parmi plus de 70 000 icônes dans le SVG Icon Finder.

Questions fréquentes

Ces icônes d'avertissement sont-elles gratuites pour un usage commercial ?
Oui. Elles proviennent de jeux d'icônes open source sous licences MIT, ISC ou Apache 2.0, qui autorisent l'usage commercial. Conservez la mention de licence si vous redistribuez les fichiers d'icônes eux-mêmes.
Comment changer la couleur d'une icône d'avertissement ?
Les SVG utilisent currentColor : définissez donc la couleur CSS de l'élément parent, ou ouvrez l'icône dans l'outil de recherche et choisissez une couleur fixe avant de la copier.
Puis-je utiliser ces icônes dans Webflow ou React ?
Oui. Ouvrez une icône et utilisez Copier pour Webflow (colle un Code Embed) ou Copier le JSX pour un composant React.