fireball icon

fireball from IonIcons by Ben Sperry · Regular · MIT Free for personal and commercial use.

Name
fireball
Set
IonIcons
Style
Regular
Viewbox
512×512
License
MIT

Use the fireball icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M393.267 238.088l-.231 10.404c-.814 11.65-3.797 31.912-14.102 54.736a225.395 225.395 0 0 0 4.978-47.164c0-12.096-.958-23.968-2.799-35.544-15.091-94.901-89.626-169.923-184.138-185.518C185.706 32.285 179.048 32 179.048 32c.238.281.465.562.7.844 39.458 47.181 44.1 96.656 37.744 131.85-2.281 12.629-5.978 23.421-9.991 31.605 0 0 3.359-13.911 3.035-29.72-.293-14.234-3.572-30.006-14.986-38.552 3.497 18.378-.752 33.501-9.121 47.729C161.69 217.808 101 249.386 96 327.408v3.836c0 53.692 25.624 98.979 68.719 125.012-6.85-12.344-14.964-35.207-8.733-60.151 3.998 23.669 9.951 36.045 20.879 51.756 8.153 11.721 19.104 19.269 33.095 24.934S238.995 480 255.889 480c55.809 0 105.228-28.567 133.845-71.952l.267.061v-.007c16-25.254 26.1-55.5 26.1-88.019-.001-29.971-8.505-58.012-22.834-81.995z" fill="currentColor"/></svg>

React

import type { SVGProps } from "react";

export function IonFireball(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M393.267 238.088l-.231 10.404c-.814 11.65-3.797 31.912-14.102 54.736a225.395 225.395 0 0 0 4.978-47.164c0-12.096-.958-23.968-2.799-35.544-15.091-94.901-89.626-169.923-184.138-185.518C185.706 32.285 179.048 32 179.048 32c.238.281.465.562.7.844 39.458 47.181 44.1 96.656 37.744 131.85-2.281 12.629-5.978 23.421-9.991 31.605 0 0 3.359-13.911 3.035-29.72-.293-14.234-3.572-30.006-14.986-38.552 3.497 18.378-.752 33.501-9.121 47.729C161.69 217.808 101 249.386 96 327.408v3.836c0 53.692 25.624 98.979 68.719 125.012-6.85-12.344-14.964-35.207-8.733-60.151 3.998 23.669 9.951 36.045 20.879 51.756 8.153 11.721 19.104 19.269 33.095 24.934S238.995 480 255.889 480c55.809 0 105.228-28.567 133.845-71.952l.267.061v-.007c16-25.254 26.1-55.5 26.1-88.019-.001-29.971-8.505-58.012-22.834-81.995z" fill="currentColor"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M393.267 238.088l-.231 10.404c-.814 11.65-3.797 31.912-14.102 54.736a225.395 225.395 0 0 0 4.978-47.164c0-12.096-.958-23.968-2.799-35.544-15.091-94.901-89.626-169.923-184.138-185.518C185.706 32.285 179.048 32 179.048 32c.238.281.465.562.7.844 39.458 47.181 44.1 96.656 37.744 131.85-2.281 12.629-5.978 23.421-9.991 31.605 0 0 3.359-13.911 3.035-29.72-.293-14.234-3.572-30.006-14.986-38.552 3.497 18.378-.752 33.501-9.121 47.729C161.69 217.808 101 249.386 96 327.408v3.836c0 53.692 25.624 98.979 68.719 125.012-6.85-12.344-14.964-35.207-8.733-60.151 3.998 23.669 9.951 36.045 20.879 51.756 8.153 11.721 19.104 19.269 33.095 24.934S238.995 480 255.889 480c55.809 0 105.228-28.567 133.845-71.952l.267.061v-.007c16-25.254 26.1-55.5 26.1-88.019-.001-29.971-8.505-58.012-22.834-81.995z" fill="currentColor"/></svg>
</template>

CSS

.icon-fireball {
  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%20512%20512%22%3E%3Cpath%20d%3D%22M393.267%20238.088l-.231%2010.404c-.814%2011.65-3.797%2031.912-14.102%2054.736a225.395%20225.395%200%200%200%204.978-47.164c0-12.096-.958-23.968-2.799-35.544-15.091-94.901-89.626-169.923-184.138-185.518C185.706%2032.285%20179.048%2032%20179.048%2032c.238.281.465.562.7.844%2039.458%2047.181%2044.1%2096.656%2037.744%20131.85-2.281%2012.629-5.978%2023.421-9.991%2031.605%200%200%203.359-13.911%203.035-29.72-.293-14.234-3.572-30.006-14.986-38.552%203.497%2018.378-.752%2033.501-9.121%2047.729C161.69%20217.808%20101%20249.386%2096%20327.408v3.836c0%2053.692%2025.624%2098.979%2068.719%20125.012-6.85-12.344-14.964-35.207-8.733-60.151%203.998%2023.669%209.951%2036.045%2020.879%2051.756%208.153%2011.721%2019.104%2019.269%2033.095%2024.934S238.995%20480%20255.889%20480c55.809%200%20105.228-28.567%20133.845-71.952l.267.061v-.007c16-25.254%2026.1-55.5%2026.1-88.019-.001-29.971-8.505-58.012-22.834-81.995z%22%20fill%3D%22currentColor%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%20512%20512%22%3E%3Cpath%20d%3D%22M393.267%20238.088l-.231%2010.404c-.814%2011.65-3.797%2031.912-14.102%2054.736a225.395%20225.395%200%200%200%204.978-47.164c0-12.096-.958-23.968-2.799-35.544-15.091-94.901-89.626-169.923-184.138-185.518C185.706%2032.285%20179.048%2032%20179.048%2032c.238.281.465.562.7.844%2039.458%2047.181%2044.1%2096.656%2037.744%20131.85-2.281%2012.629-5.978%2023.421-9.991%2031.605%200%200%203.359-13.911%203.035-29.72-.293-14.234-3.572-30.006-14.986-38.552%203.497%2018.378-.752%2033.501-9.121%2047.729C161.69%20217.808%20101%20249.386%2096%20327.408v3.836c0%2053.692%2025.624%2098.979%2068.719%20125.012-6.85-12.344-14.964-35.207-8.733-60.151%203.998%2023.669%209.951%2036.045%2020.879%2051.756%208.153%2011.721%2019.104%2019.269%2033.095%2024.934S238.995%20480%20255.889%20480c55.809%200%20105.228-28.567%20133.845-71.952l.267.061v-.007c16-25.254%2026.1-55.5%2026.1-88.019-.001-29.971-8.505-58.012-22.834-81.995z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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