Gentleface › Notifications & status › siren

siren icon

Siren: siren, emergency light, incident, emergency. 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="M7.856 3.856C7.759 3.952 7.641 4 7.5 4C7.359 4 7.241 3.952 7.144 3.856C7.048 3.759 7 3.641 7 3.5L7 1.5C7 1.359 7.048 1.241 7.144 1.144C7.241 1.048 7.359 1 7.5 1C7.641 1 7.759 1.048 7.856 1.144C7.952 1.241 8 1.359 8 1.5L8 3.5C8 3.641 7.952 3.759 7.856 3.856ZM1 3.5C1 3.362 1.049 3.244 1.146 3.146C1.246 3.047 1.364 2.997 1.5 2.997C1.636 2.997 1.754 3.047 1.854 3.146L3.854 5.146C3.953 5.246 4.003 5.364 4.003 5.5C4.003 5.636 3.953 5.754 3.854 5.854C3.756 5.951 3.638 6 3.5 6C3.362 6 3.244 5.951 3.146 5.854L1.146 3.854C1.049 3.756 1 3.638 1 3.5ZM11.854 5.854C11.754 5.953 11.636 6.003 11.5 6.003C11.364 6.003 11.246 5.953 11.146 5.854C11.049 5.756 11 5.638 11 5.5C11 5.362 11.049 5.244 11.146 5.146L13.146 3.146C13.246 3.047 13.364 2.997 13.5 2.997C13.636 2.997 13.754 3.047 13.854 3.146C13.951 3.244 14 3.362 14 3.5C14 3.638 13.951 3.756 13.854 3.854L11.854 5.854ZM4.246 8.212C4.424 7.762 4.683 7.367 5.025 7.025C5.367 6.683 5.762 6.424 6.212 6.246C6.625 6.082 7.055 6 7.5 6C7.945 6 8.375 6.082 8.788 6.246C9.238 6.424 9.633 6.683 9.975 7.025C10.317 7.367 10.576 7.762 10.754 8.212C10.918 8.625 11 9.055 11 9.5L11 12L11.5 12C11.641 12 11.759 12.048 11.856 12.144C11.952 12.241 12 12.359 12 12.5L12 14.5C12 14.641 11.952 14.759 11.856 14.856C11.759 14.952 11.641 15 11.5 15L3.5 15C3.359 15 3.241 14.952 3.144 14.856C3.048 14.759 3 14.641 3 14.5L3 12.5C3 12.359 3.048 12.241 3.144 12.144C3.241 12.048 3.359 12 3.5 12L4 12L4 9.5C4 9.055 4.082 8.625 4.246 8.212ZM10 9.5C10 9.182 9.941 8.875 9.824 8.58C9.697 8.259 9.512 7.976 9.268 7.732C9.024 7.488 8.741 7.303 8.42 7.176C8.125 7.059 7.818 7 7.5 7C7.182 7 6.875 7.059 6.58 7.176C6.259 7.303 5.976 7.488 5.732 7.732C5.488 7.976 5.303 8.259 5.176 8.58C5.059 8.875 5 9.182 5 9.5L5 12L10 12L10 9.5ZM11 13L4 13L4 14L11 14L11 13Z"/></svg>

React

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

export function SirenIcon(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="M7.856 3.856C7.759 3.952 7.641 4 7.5 4C7.359 4 7.241 3.952 7.144 3.856C7.048 3.759 7 3.641 7 3.5L7 1.5C7 1.359 7.048 1.241 7.144 1.144C7.241 1.048 7.359 1 7.5 1C7.641 1 7.759 1.048 7.856 1.144C7.952 1.241 8 1.359 8 1.5L8 3.5C8 3.641 7.952 3.759 7.856 3.856ZM1 3.5C1 3.362 1.049 3.244 1.146 3.146C1.246 3.047 1.364 2.997 1.5 2.997C1.636 2.997 1.754 3.047 1.854 3.146L3.854 5.146C3.953 5.246 4.003 5.364 4.003 5.5C4.003 5.636 3.953 5.754 3.854 5.854C3.756 5.951 3.638 6 3.5 6C3.362 6 3.244 5.951 3.146 5.854L1.146 3.854C1.049 3.756 1 3.638 1 3.5ZM11.854 5.854C11.754 5.953 11.636 6.003 11.5 6.003C11.364 6.003 11.246 5.953 11.146 5.854C11.049 5.756 11 5.638 11 5.5C11 5.362 11.049 5.244 11.146 5.146L13.146 3.146C13.246 3.047 13.364 2.997 13.5 2.997C13.636 2.997 13.754 3.047 13.854 3.146C13.951 3.244 14 3.362 14 3.5C14 3.638 13.951 3.756 13.854 3.854L11.854 5.854ZM4.246 8.212C4.424 7.762 4.683 7.367 5.025 7.025C5.367 6.683 5.762 6.424 6.212 6.246C6.625 6.082 7.055 6 7.5 6C7.945 6 8.375 6.082 8.788 6.246C9.238 6.424 9.633 6.683 9.975 7.025C10.317 7.367 10.576 7.762 10.754 8.212C10.918 8.625 11 9.055 11 9.5L11 12L11.5 12C11.641 12 11.759 12.048 11.856 12.144C11.952 12.241 12 12.359 12 12.5L12 14.5C12 14.641 11.952 14.759 11.856 14.856C11.759 14.952 11.641 15 11.5 15L3.5 15C3.359 15 3.241 14.952 3.144 14.856C3.048 14.759 3 14.641 3 14.5L3 12.5C3 12.359 3.048 12.241 3.144 12.144C3.241 12.048 3.359 12 3.5 12L4 12L4 9.5C4 9.055 4.082 8.625 4.246 8.212ZM10 9.5C10 9.182 9.941 8.875 9.824 8.58C9.697 8.259 9.512 7.976 9.268 7.732C9.024 7.488 8.741 7.303 8.42 7.176C8.125 7.059 7.818 7 7.5 7C7.182 7 6.875 7.059 6.58 7.176C6.259 7.303 5.976 7.488 5.732 7.732C5.488 7.976 5.303 8.259 5.176 8.58C5.059 8.875 5 9.182 5 9.5L5 12L10 12L10 9.5ZM11 13L4 13L4 14L11 14L11 13Z" />
    </svg>
  );
}

Vue

Vue: see /icons/siren.md

Svelte

Svelte: see /icons/siren.md

HTML img

HTML img: see /icons/siren.md

CSS

CSS: see /icons/siren.md

Data URL

Data URL: see /icons/siren.md

Sprite

Sprite: see /icons/siren.md

SwiftUI

SwiftUI: see /icons/siren.md

Compose

Compose: see /icons/siren.md

Android XML

Android XML: see /icons/siren.md

Flutter

Flutter: see /icons/siren.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

siren, emergency light, incident, emergency

Alternatives

alert-octagon: a critical error, not an ongoing incident
bell-alert: a critical-alert rule

Also fits

smoke detector: an alarm going off, or an incident
critical: an incident or emergency in progress
critical alert: an incident or emergency

Tags

siren, emergency, alarm, beacon, police, incident, alert, outage

Category

Notifications & status

Component name

SirenIcon

History

2026-10-15 added

More notifications & status icons

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

For agents

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

siren icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp

Code line-round

Meaning

More notifications & status icons

For agents

siren icon