Motion icon · Free

Siren icon — animated SVG

A free siren motion icon that acts out its meaning. The animation is pure CSS inside the SVG, so it works in any website or app without Lottie or JavaScript. 24px grid, 2px stroke, round caps. Free for personal and commercial use.

Copy hover SVGCopy looping SVG Copy SVG Download SVG Open in UAsset

Hover SVG code (plays when hovered)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="uah-siren" overflow="visible"><style>.uah-siren g.uam,.uah-siren [class^=p]{transform-box:fill-box;transform-origin:center}:is(.uah-siren:hover,:hover>.uah-siren,:focus-visible>.uah-siren) .pa{animation:uaLsiren 0.90s cubic-bezier(.65,0,.35,1) 0s 1 both}:is(.uah-siren:hover,:hover>.uah-siren,:focus-visible>.uah-siren) g.uam{animation:uaLshake 0.50s cubic-bezier(.65,0,.35,1) 0s 1 both}@keyframes uaLsiren{0%,100%{opacity:1;transform:none}25%{opacity:.1;transform:scale(.8)}50%{opacity:1;transform:scale(1.12)}75%{opacity:.2}}@keyframes uaLshake{0%,100%{transform:none}12%,36%,60%{transform:translateX(-1.8px)}24%,48%{transform:translateX(1.8px)}72%{transform:none}}@media (prefers-reduced-motion:reduce){.uah-siren *{animation:none!important}}</style><g class="uam"><path pathLength="1" d="M7 18v-6a5 5 0 1 1 10 0v6M5 21a1 1 0 0 1-1-1v-1a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v1a1 1 0 0 1-1 1zM12 12v4"/><g class="pa"><path pathLength="1" d="M21 12h1M18.5 4.5 18 5M2 12h1M12 2v1M4.9 4.9l.7.7"/></g></g></svg>

Looping SVG code

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="ual-siren" overflow="visible"><style>.ual-siren g.uam,.ual-siren [class^=p]{transform-box:fill-box;transform-origin:center}.ual-siren .pa{animation:uaLsirenL 2.34s cubic-bezier(.65,0,.35,1) 0s infinite}.ual-siren g.uam{animation:uaLshakeL 1.30s cubic-bezier(.65,0,.35,1) 0s infinite}@keyframes uaLsirenL{0.0%,38.0%{opacity:1;transform:none}9.5%{opacity:.1;transform:scale(.8)}19.0%{opacity:1;transform:scale(1.12)}28.5%{opacity:.2}}@keyframes uaLshakeL{0.0%,38.0%{transform:none}4.6%,13.7%,22.8%{transform:translateX(-1.8px)}9.1%,18.2%{transform:translateX(1.8px)}27.4%{transform:none}}@media (prefers-reduced-motion:reduce){.ual-siren *{animation:none!important}}</style><g class="uam"><path pathLength="1" d="M7 18v-6a5 5 0 1 1 10 0v6M5 21a1 1 0 0 1-1-1v-1a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v1a1 1 0 0 1-1 1zM12 12v4"/><g class="pa"><path pathLength="1" d="M21 12h1M18.5 4.5 18 5M2 12h1M12 2v1M4.9 4.9l.7.7"/></g></g></svg>

Static SVG code

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path pathLength="1" d="M7 18v-6a5 5 0 1 1 10 0v6M5 21a1 1 0 0 1-1-1v-1a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v1a1 1 0 0 1-1 1zM12 12v4"/><g class="pa"><path pathLength="1" d="M21 12h1M18.5 4.5 18 5M2 12h1M12 2v1M4.9 4.9l.7.7"/></g></svg>

Tags: line, outline, security, siren, stroke