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

Kostenlose Warnsymbole (SVG)

48 kostenlose Warnsymbole aus Open-Source-Sets. Klick auf ein Symbol, um Größe, Farbe und Strichstärke anzupassen und es als SVG, JSX, Data-URI oder CSS zu kopieren.

Aktualisiert am

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

Warnsymbole verwenden

Dreiecke und Ausrufezeichen kennzeichnen Warnungen und Fehler. Kombiniere das Symbol mit Text, damit die Bedeutung nicht nur über die Farbe vermittelt wird.

Alle Symbole folgen currentColor, übernehmen also die Textfarbe des Elements, in dem sie stehen. Ein SVG funktioniert so auf hellen und dunklen Hintergründen, in Links und in Buttons. Setze eine explizite width und height (oder definiere die Größe per CSS mit 1em), damit das Layout beim Laden der Seite nicht springt.

Barrierefreie Symbole

Wenn das Symbol dekorativ ist oder neben sichtbarem Text steht, füge aria-hidden="true" hinzu. Ist es der einzige Inhalt eines Buttons oder Links, gib diesem Element ein aria-label wie „Warnung“.

Lizenzen

Diese Warnsymbole stammen von Lucide, Phosphor, Iconoir, Fluent UI, Material Symbols, Material Design Icons und Carbon. Es sind Open-Source-Sets unter MIT-, ISC- oder Apache-2.0-Lizenz, die persönliche und kommerzielle Nutzung erlauben. Brauchst du etwas anderes? Durchsuche alle über 70.000 Symbole im SVG Icon Finder.

Häufige Fragen

Sind diese Warnsymbole kostenlos für die kommerzielle Nutzung?
Ja. Sie stammen aus Open-Source-Icon-Sets unter MIT-, ISC- oder Apache-2.0-Lizenz, die kommerzielle Nutzung erlauben. Behalte den Lizenzhinweis bei, wenn du die Symbol-Dateien selbst weitergibst.
Wie ändere ich die Farbe eines Warnsymbols?
Die SVGs verwenden currentColor. Setze also die CSS-color des übergeordneten Elements, oder öffne das Symbol im Finder und wähle vor dem Kopieren eine feste Farbe.
Kann ich diese Symbole in Webflow oder React verwenden?
Ja. Öffne ein Symbol und nutze „Copy to Webflow“ (fügt ein Code Embed ein) oder „Copy JSX“ für eine React-Komponente.