Alert triangle icon

interfacealso known as warning, caution, danger, attention
Colors byColorchord

Tap an icon to copy its SVG · copies stay currentColor at 24px — the swatches only tint the preview.

When to use it

The warning triangle: something needs attention before it becomes a problem — destructive-action confirms, degraded states, risky settings. It outranks info and sits below the error circle in most severity ladders. Phosphor calls it simply warning, Remix alert. Reserve it for genuine warnings; a UI that triangles everything trains users to ignore the one that matters.

Reach for the triangle-with-a-bang to warn about a real problem or risky action — a validation error, a destructive-action confirmation, a degraded state. The triangle is the strongest 'caution' shape in the interface vocabulary, so reserve it for things that genuinely warrant attention. For neutral, non-urgent explanation use the info circle; for the ongoing notifications channel use the bell.

  • Reaching for Info? Reach for the info circle for neutral guidance or explanation rather than a warning.
  • Reaching for Bell? Reach for the bell for the notifications feed rather than a single caution.
Every set here is open-licensed for commercial use with no attribution required in your product — the notices their licenses do require live on our set pages. No accounts, no download walls.

Related icons