Gentleface › Notifications & status › alert-triangle

alert-triangle icon

Alert triangle: warning, caution, warn. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M13.635 10.762C13.771 10.984 13.844 11.225 13.855 11.485C13.866 11.745 13.814 11.991 13.697 12.224C13.578 12.462 13.406 12.65 13.179 12.79C12.953 12.93 12.707 13 12.441 13L2.559 13C2.293 13 2.047 12.93 1.821 12.79C1.594 12.65 1.422 12.462 1.303 12.224C1.186 11.991 1.134 11.745 1.145 11.485C1.156 11.225 1.229 10.984 1.365 10.762L6.313 2.666C6.439 2.459 6.608 2.296 6.819 2.178C7.031 2.059 7.258 2 7.5 2C7.742 2 7.969 2.059 8.181 2.178C8.392 2.296 8.561 2.459 8.687 2.666L13.635 10.762ZM2.144 11.527C2.14 11.615 2.158 11.698 2.197 11.776C2.231 11.845 2.281 11.899 2.346 11.94C2.412 11.98 2.482 12 2.559 12L12.441 12C12.518 12 12.588 11.98 12.654 11.94C12.719 11.899 12.769 11.845 12.803 11.776C12.842 11.698 12.86 11.615 12.856 11.527C12.852 11.44 12.828 11.359 12.782 11.284L7.834 3.187C7.796 3.125 7.749 3.078 7.693 3.047C7.638 3.016 7.573 3 7.5 3C7.427 3 7.362 3.016 7.307 3.047C7.251 3.078 7.204 3.125 7.166 3.187L2.218 11.284C2.172 11.359 2.148 11.44 2.144 11.527ZM7.856 8.856C7.759 8.952 7.641 9 7.5 9C7.359 9 7.241 8.952 7.144 8.856C7.048 8.759 7 8.641 7 8.5L7 5.5C7 5.359 7.048 5.241 7.144 5.144C7.241 5.048 7.359 5 7.5 5C7.641 5 7.759 5.048 7.856 5.144C7.952 5.241 8 5.359 8 5.5L8 8.5C8 8.641 7.952 8.759 7.856 8.856ZM6.97 9.97C7.116 9.823 7.293 9.75 7.5 9.75C7.707 9.75 7.884 9.823 8.03 9.97C8.177 10.116 8.25 10.293 8.25 10.5C8.25 10.707 8.177 10.884 8.03 11.03C7.884 11.177 7.707 11.25 7.5 11.25C7.293 11.25 7.116 11.177 6.97 11.03C6.823 10.884 6.75 10.707 6.75 10.5C6.75 10.293 6.823 10.116 6.97 9.97Z"/></svg>

React

// Gentleface "alert-triangle" (line-round), MIT. https://gentleface.com/icons/alert-triangle
import type { SVGProps } from 'react';

export function AlertTriangleIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M13.635 10.762C13.771 10.984 13.844 11.225 13.855 11.485C13.866 11.745 13.814 11.991 13.697 12.224C13.578 12.462 13.406 12.65 13.179 12.79C12.953 12.93 12.707 13 12.441 13L2.559 13C2.293 13 2.047 12.93 1.821 12.79C1.594 12.65 1.422 12.462 1.303 12.224C1.186 11.991 1.134 11.745 1.145 11.485C1.156 11.225 1.229 10.984 1.365 10.762L6.313 2.666C6.439 2.459 6.608 2.296 6.819 2.178C7.031 2.059 7.258 2 7.5 2C7.742 2 7.969 2.059 8.181 2.178C8.392 2.296 8.561 2.459 8.687 2.666L13.635 10.762ZM2.144 11.527C2.14 11.615 2.158 11.698 2.197 11.776C2.231 11.845 2.281 11.899 2.346 11.94C2.412 11.98 2.482 12 2.559 12L12.441 12C12.518 12 12.588 11.98 12.654 11.94C12.719 11.899 12.769 11.845 12.803 11.776C12.842 11.698 12.86 11.615 12.856 11.527C12.852 11.44 12.828 11.359 12.782 11.284L7.834 3.187C7.796 3.125 7.749 3.078 7.693 3.047C7.638 3.016 7.573 3 7.5 3C7.427 3 7.362 3.016 7.307 3.047C7.251 3.078 7.204 3.125 7.166 3.187L2.218 11.284C2.172 11.359 2.148 11.44 2.144 11.527ZM7.856 8.856C7.759 8.952 7.641 9 7.5 9C7.359 9 7.241 8.952 7.144 8.856C7.048 8.759 7 8.641 7 8.5L7 5.5C7 5.359 7.048 5.241 7.144 5.144C7.241 5.048 7.359 5 7.5 5C7.641 5 7.759 5.048 7.856 5.144C7.952 5.241 8 5.359 8 5.5L8 8.5C8 8.641 7.952 8.759 7.856 8.856ZM6.97 9.97C7.116 9.823 7.293 9.75 7.5 9.75C7.707 9.75 7.884 9.823 8.03 9.97C8.177 10.116 8.25 10.293 8.25 10.5C8.25 10.707 8.177 10.884 8.03 11.03C7.884 11.177 7.707 11.25 7.5 11.25C7.293 11.25 7.116 11.177 6.97 11.03C6.823 10.884 6.75 10.707 6.75 10.5C6.75 10.293 6.823 10.116 6.97 9.97Z" />
    </svg>
  );
}

Vue

Vue: see /icons/alert-triangle.md

Svelte

Svelte: see /icons/alert-triangle.md

HTML img

HTML img: see /icons/alert-triangle.md

CSS

CSS: see /icons/alert-triangle.md

Data URL

Data URL: see /icons/alert-triangle.md

Sprite

Sprite: see /icons/alert-triangle.md

SwiftUI

SwiftUI: see /icons/alert-triangle.md

Compose

Compose: see /icons/alert-triangle.md

Android XML

Android XML: see /icons/alert-triangle.md

Flutter

Flutter: see /icons/alert-triangle.md

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

Meaning

Use it for

warning, caution, warn

Alternatives

alert-octagon: critical, worse than a warning

Don’t confuse with

alert-circle: ! in a circle means error, not warning

Also fits

attention: a warning
biohazard: a generic hazard warning

Not for

report (use flag): a warning state, not the report action
error (use alert-circle): the triangle means warning, not error
triangle (use triangle): a triangle with ! means warning (alert-triangle)

Tags

alert, warning, exclamation, triangle, danger

Category

Notifications & status

Component name

AlertTriangleIcon

History

2026-10-14 added

Family 7

alert-circle alert-octagon check-circle help-circle help-mark info x-circle

More notifications & status icons

alert-mark bell bell-alert bell-check bell-clock bell-dot bell-gear bell-off bell-pencil bell-plus bell-ring bell-snooze bell-sparkle bell-x circle-dashed circle-progress · all notifications & status icons

For agents

Metadata: /icons/alert-triangle.json · Markdown: /icons/alert-triangle.md · SVG: https://gentleface.com/svg/{style}/16/alert-triangle.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/alert-triangle.png

alert-triangle icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp