explosion icon

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

Name: explosion
Set: Font Awesome Solid
Style: Solid
Viewbox: 640×640
License: CC BY 4.0

The same icon in other sets

explosionFont Awesome 6 Solid explosionMaterial Symbols explosionMaterial Symbols Light

Use the explosion icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M320 32c13.3 0 24 10.7 24 24v48c0 13.3-10.7 24-24 24s-24-10.7-24-24V56c0-13.3 10.7-24 24-24m0 160c12.4 0 22.7 9.4 23.9 21.7l13.5 141.9L531.6 75.3c6.7-10.7 20.5-14.5 31.7-8.5s15.8 19.5 10.6 31L436.8 402.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 64H150l-75.5-52.3c-9.9-6.6-13.3-19.5-8.1-30.1s17.4-15.9 28.7-12.4l97.2 30.4c3-3.9 6.1-7.6 9.4-11.3l-62.3-103.9c-6.1-10.1-3.9-23.1 5.1-30.7s22.2-7.5 31.1.1L278 357.6c1.5-.4 3-.8 4.5-1.1l13.6-142.7c1.2-12.3 11.5-21.7 23.9-21.7zM96 528h456c13.3 0 24 10.7 24 24s-10.7 24-24 24H88c-13.3 0-24-10.7-24-24s10.7-24 24-24z"/></svg>

React

import type { SVGProps } from "react";

export function Fa7SolidExplosion(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M320 32c13.3 0 24 10.7 24 24v48c0 13.3-10.7 24-24 24s-24-10.7-24-24V56c0-13.3 10.7-24 24-24m0 160c12.4 0 22.7 9.4 23.9 21.7l13.5 141.9L531.6 75.3c6.7-10.7 20.5-14.5 31.7-8.5s15.8 19.5 10.6 31L436.8 402.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 64H150l-75.5-52.3c-9.9-6.6-13.3-19.5-8.1-30.1s17.4-15.9 28.7-12.4l97.2 30.4c3-3.9 6.1-7.6 9.4-11.3l-62.3-103.9c-6.1-10.1-3.9-23.1 5.1-30.7s22.2-7.5 31.1.1L278 357.6c1.5-.4 3-.8 4.5-1.1l13.6-142.7c1.2-12.3 11.5-21.7 23.9-21.7zM96 528h456c13.3 0 24 10.7 24 24s-10.7 24-24 24H88c-13.3 0-24-10.7-24-24s10.7-24 24-24z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M320 32c13.3 0 24 10.7 24 24v48c0 13.3-10.7 24-24 24s-24-10.7-24-24V56c0-13.3 10.7-24 24-24m0 160c12.4 0 22.7 9.4 23.9 21.7l13.5 141.9L531.6 75.3c6.7-10.7 20.5-14.5 31.7-8.5s15.8 19.5 10.6 31L436.8 402.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 64H150l-75.5-52.3c-9.9-6.6-13.3-19.5-8.1-30.1s17.4-15.9 28.7-12.4l97.2 30.4c3-3.9 6.1-7.6 9.4-11.3l-62.3-103.9c-6.1-10.1-3.9-23.1 5.1-30.7s22.2-7.5 31.1.1L278 357.6c1.5-.4 3-.8 4.5-1.1l13.6-142.7c1.2-12.3 11.5-21.7 23.9-21.7zM96 528h456c13.3 0 24 10.7 24 24s-10.7 24-24 24H88c-13.3 0-24-10.7-24-24s10.7-24 24-24z"/></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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M320%2032c13.3%200%2024%2010.7%2024%2024v48c0%2013.3-10.7%2024-24%2024s-24-10.7-24-24V56c0-13.3%2010.7-24%2024-24m0%20160c12.4%200%2022.7%209.4%2023.9%2021.7l13.5%20141.9L531.6%2075.3c6.7-10.7%2020.5-14.5%2031.7-8.5s15.8%2019.5%2010.6%2031L436.8%20402.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%2064H150l-75.5-52.3c-9.9-6.6-13.3-19.5-8.1-30.1s17.4-15.9%2028.7-12.4l97.2%2030.4c3-3.9%206.1-7.6%209.4-11.3l-62.3-103.9c-6.1-10.1-3.9-23.1%205.1-30.7s22.2-7.5%2031.1.1L278%20357.6c1.5-.4%203-.8%204.5-1.1l13.6-142.7c1.2-12.3%2011.5-21.7%2023.9-21.7zM96%20528h456c13.3%200%2024%2010.7%2024%2024s-10.7%2024-24%2024H88c-13.3%200-24-10.7-24-24s10.7-24%2024-24z%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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M320%2032c13.3%200%2024%2010.7%2024%2024v48c0%2013.3-10.7%2024-24%2024s-24-10.7-24-24V56c0-13.3%2010.7-24%2024-24m0%20160c12.4%200%2022.7%209.4%2023.9%2021.7l13.5%20141.9L531.6%2075.3c6.7-10.7%2020.5-14.5%2031.7-8.5s15.8%2019.5%2010.6%2031L436.8%20402.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%2064H150l-75.5-52.3c-9.9-6.6-13.3-19.5-8.1-30.1s17.4-15.9%2028.7-12.4l97.2%2030.4c3-3.9%206.1-7.6%209.4-11.3l-62.3-103.9c-6.1-10.1-3.9-23.1%205.1-30.7s22.2-7.5%2031.1.1L278%20357.6c1.5-.4%203-.8%204.5-1.1l13.6-142.7c1.2-12.3%2011.5-21.7%2023.9-21.7zM96%20528h456c13.3%200%2024%2010.7%2024%2024s-10.7%2024-24%2024H88c-13.3%200-24-10.7-24-24s10.7-24%2024-24z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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