explosion icon

explosion from Font Awesome 6 Solid by Dave Gandy · Regular · CC-BY-4.0 Attribution required.

Name
explosion
Set
Font Awesome 6 Solid
Style
Regular
Viewbox
576×512
License
CC BY 4.0

The same icon in other sets

explosionFont Awesome SolidexplosionMaterial SymbolsexplosionMaterial Symbols Light

Use the explosion icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 576 512"><path fill="currentColor" d="M499.6 11.3c6.7-10.7 20.5-14.5 31.7-8.5s15.8 19.5 10.6 31L404.8 338.6c2.2 2.3 4.3 4.7 6.3 7.1l97.2-54.7c10.5-5.9 23.6-3.1 30.9 6.4s6.3 23-2.2 31.5l-87 87h-71.4c-13.2-37.3-48.7-64-90.5-64s-77.4 26.7-90.5 64H118l-75.7-52.2c-9.7-6.7-13.1-19.6-7.9-30.3s17.4-15.9 28.7-12.4l97.2 30.4c3-3.9 6.1-7.7 9.4-11.3l-62.3-103.8c-6.1-10.1-3.9-23.1 5.1-30.7s22.2-7.5 31.1.1L246 293.6c1.5-.4 3-.8 4.5-1.1l13.6-142.7c1.2-12.3 11.5-21.7 23.9-21.7s22.7 9.4 23.9 21.7l13.5 141.9zM64 448h480c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32zM288 0c13.3 0 24 10.7 24 24v48c0 13.3-10.7 24-24 24s-24-10.7-24-24V24c0-13.3 10.7-24 24-24"/></svg>

React

import type { SVGProps } from "react";

export function Fa6SolidExplosion(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 576 512"><path fill="currentColor" d="M499.6 11.3c6.7-10.7 20.5-14.5 31.7-8.5s15.8 19.5 10.6 31L404.8 338.6c2.2 2.3 4.3 4.7 6.3 7.1l97.2-54.7c10.5-5.9 23.6-3.1 30.9 6.4s6.3 23-2.2 31.5l-87 87h-71.4c-13.2-37.3-48.7-64-90.5-64s-77.4 26.7-90.5 64H118l-75.7-52.2c-9.7-6.7-13.1-19.6-7.9-30.3s17.4-15.9 28.7-12.4l97.2 30.4c3-3.9 6.1-7.7 9.4-11.3l-62.3-103.8c-6.1-10.1-3.9-23.1 5.1-30.7s22.2-7.5 31.1.1L246 293.6c1.5-.4 3-.8 4.5-1.1l13.6-142.7c1.2-12.3 11.5-21.7 23.9-21.7s22.7 9.4 23.9 21.7l13.5 141.9zM64 448h480c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32zM288 0c13.3 0 24 10.7 24 24v48c0 13.3-10.7 24-24 24s-24-10.7-24-24V24c0-13.3 10.7-24 24-24"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 576 512"><path fill="currentColor" d="M499.6 11.3c6.7-10.7 20.5-14.5 31.7-8.5s15.8 19.5 10.6 31L404.8 338.6c2.2 2.3 4.3 4.7 6.3 7.1l97.2-54.7c10.5-5.9 23.6-3.1 30.9 6.4s6.3 23-2.2 31.5l-87 87h-71.4c-13.2-37.3-48.7-64-90.5-64s-77.4 26.7-90.5 64H118l-75.7-52.2c-9.7-6.7-13.1-19.6-7.9-30.3s17.4-15.9 28.7-12.4l97.2 30.4c3-3.9 6.1-7.7 9.4-11.3l-62.3-103.8c-6.1-10.1-3.9-23.1 5.1-30.7s22.2-7.5 31.1.1L246 293.6c1.5-.4 3-.8 4.5-1.1l13.6-142.7c1.2-12.3 11.5-21.7 23.9-21.7s22.7 9.4 23.9 21.7l13.5 141.9zM64 448h480c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32zM288 0c13.3 0 24 10.7 24 24v48c0 13.3-10.7 24-24 24s-24-10.7-24-24V24c0-13.3 10.7-24 24-24"/></svg>
</template>

CSS

.icon-explosion {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M499.6%2011.3c6.7-10.7%2020.5-14.5%2031.7-8.5s15.8%2019.5%2010.6%2031L404.8%20338.6c2.2%202.3%204.3%204.7%206.3%207.1l97.2-54.7c10.5-5.9%2023.6-3.1%2030.9%206.4s6.3%2023-2.2%2031.5l-87%2087h-71.4c-13.2-37.3-48.7-64-90.5-64s-77.4%2026.7-90.5%2064H118l-75.7-52.2c-9.7-6.7-13.1-19.6-7.9-30.3s17.4-15.9%2028.7-12.4l97.2%2030.4c3-3.9%206.1-7.7%209.4-11.3l-62.3-103.8c-6.1-10.1-3.9-23.1%205.1-30.7s22.2-7.5%2031.1.1L246%20293.6c1.5-.4%203-.8%204.5-1.1l13.6-142.7c1.2-12.3%2011.5-21.7%2023.9-21.7s22.7%209.4%2023.9%2021.7l13.5%20141.9zM64%20448h480c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032H32c-17.7%200-32-14.3-32-32s14.3-32%2032-32zM288%200c13.3%200%2024%2010.7%2024%2024v48c0%2013.3-10.7%2024-24%2024s-24-10.7-24-24V24c0-13.3%2010.7-24%2024-24%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M499.6%2011.3c6.7-10.7%2020.5-14.5%2031.7-8.5s15.8%2019.5%2010.6%2031L404.8%20338.6c2.2%202.3%204.3%204.7%206.3%207.1l97.2-54.7c10.5-5.9%2023.6-3.1%2030.9%206.4s6.3%2023-2.2%2031.5l-87%2087h-71.4c-13.2-37.3-48.7-64-90.5-64s-77.4%2026.7-90.5%2064H118l-75.7-52.2c-9.7-6.7-13.1-19.6-7.9-30.3s17.4-15.9%2028.7-12.4l97.2%2030.4c3-3.9%206.1-7.7%209.4-11.3l-62.3-103.8c-6.1-10.1-3.9-23.1%205.1-30.7s22.2-7.5%2031.1.1L246%20293.6c1.5-.4%203-.8%204.5-1.1l13.6-142.7c1.2-12.3%2011.5-21.7%2023.9-21.7s22.7%209.4%2023.9%2021.7l13.5%20141.9zM64%20448h480c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032H32c-17.7%200-32-14.3-32-32s14.3-32%2032-32zM288%200c13.3%200%2024%2010.7%2024%2024v48c0%2013.3-10.7%2024-24%2024s-24-10.7-24-24V24c0-13.3%2010.7-24%2024-24%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fa6-solid/explosion.svg?color=%231a73e8&size=48