Using warning icons
Triangles and exclamation marks flag warnings and errors; pair the icon with text so the meaning doesn’t rely on color.
All icons here follow currentColor, so they take the text color of the element they sit in — one SVG works on light and dark backgrounds, in links and in buttons. Set an explicit width and height (or size them in CSS with 1em) so the layout doesn’t shift while the page loads.
Accessible icons
If the icon is decorative or sits next to visible text, add aria-hidden="true". If it is the only content of a button or link, give that element an aria-label such as “Warning”.
Licenses
These warning icons come from Lucide, Phosphor, Iconoir, Fluent UI, Material Symbols, Material Design Icons, Carbon — open-source sets under MIT, ISC or Apache 2.0 licenses, which allow personal and commercial use. Need something else? Search all 70,000+ icons in the SVG Icon Finder.