flame icon

flame-bold from Phosphor by Phosphor Icons · Bold · MIT Free for personal and commercial use.

Name: flame-bold
Set: Phosphor
Style: Bold
Viewbox: 256×256
License: MIT

5 other variants in Phosphor

flame flame-duotone flame-fill flame-light flame-thin

The same icon in other sets

flameBoxIcons v2 Solid flameCodicons flameFramework7 Icons flameHuge Icons flameIonIcons flameJam Icons flameLucide flame-fillMingCute Icon flameMyna UI Icons flameOcticons flame-boldSolar flameTabler Icons flameWeb3 Icons flameWeb3 Icons Branded

Use the flame icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M176.69 48.72a225 225 0 0 0-42.52-35a12 12 0 0 0-12.34 0a225 225 0 0 0-42.52 35C51 78.47 36 111.42 36 144a92 92 0 0 0 184 0c0-32.58-15-65.53-43.31-95.28M100 184c0-13.33 5.53-26.26 16.45-38.45A93 93 0 0 1 128 134.72a93 93 0 0 1 11.55 10.83C150.47 157.74 156 170.67 156 184a28 28 0 0 1-56 0m79.84 3.94c.09-1.3.16-2.61.16-3.94c0-46.26-44-73.17-45.83-74.29a12 12 0 0 0-12.34 0C120 110.83 76 137.74 76 184c0 1.33.07 2.64.16 3.94A67.68 67.68 0 0 1 60 144c0-26.52 12.21-52.86 36.28-78.3A213 213 0 0 1 128 38.39c17.82 12.47 68 52.32 68 105.61a67.68 67.68 0 0 1-16.16 43.94"/></svg>

React

import type { SVGProps } from "react";

export function PhFlameBold(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M176.69 48.72a225 225 0 0 0-42.52-35a12 12 0 0 0-12.34 0a225 225 0 0 0-42.52 35C51 78.47 36 111.42 36 144a92 92 0 0 0 184 0c0-32.58-15-65.53-43.31-95.28M100 184c0-13.33 5.53-26.26 16.45-38.45A93 93 0 0 1 128 134.72a93 93 0 0 1 11.55 10.83C150.47 157.74 156 170.67 156 184a28 28 0 0 1-56 0m79.84 3.94c.09-1.3.16-2.61.16-3.94c0-46.26-44-73.17-45.83-74.29a12 12 0 0 0-12.34 0C120 110.83 76 137.74 76 184c0 1.33.07 2.64.16 3.94A67.68 67.68 0 0 1 60 144c0-26.52 12.21-52.86 36.28-78.3A213 213 0 0 1 128 38.39c17.82 12.47 68 52.32 68 105.61a67.68 67.68 0 0 1-16.16 43.94"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M176.69 48.72a225 225 0 0 0-42.52-35a12 12 0 0 0-12.34 0a225 225 0 0 0-42.52 35C51 78.47 36 111.42 36 144a92 92 0 0 0 184 0c0-32.58-15-65.53-43.31-95.28M100 184c0-13.33 5.53-26.26 16.45-38.45A93 93 0 0 1 128 134.72a93 93 0 0 1 11.55 10.83C150.47 157.74 156 170.67 156 184a28 28 0 0 1-56 0m79.84 3.94c.09-1.3.16-2.61.16-3.94c0-46.26-44-73.17-45.83-74.29a12 12 0 0 0-12.34 0C120 110.83 76 137.74 76 184c0 1.33.07 2.64.16 3.94A67.68 67.68 0 0 1 60 144c0-26.52 12.21-52.86 36.28-78.3A213 213 0 0 1 128 38.39c17.82 12.47 68 52.32 68 105.61a67.68 67.68 0 0 1-16.16 43.94"/></svg>
</template>

CSS

.icon-flame-bold {
  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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M176.69%2048.72a225%20225%200%200%200-42.52-35a12%2012%200%200%200-12.34%200a225%20225%200%200%200-42.52%2035C51%2078.47%2036%20111.42%2036%20144a92%2092%200%200%200%20184%200c0-32.58-15-65.53-43.31-95.28M100%20184c0-13.33%205.53-26.26%2016.45-38.45A93%2093%200%200%201%20128%20134.72a93%2093%200%200%201%2011.55%2010.83C150.47%20157.74%20156%20170.67%20156%20184a28%2028%200%200%201-56%200m79.84%203.94c.09-1.3.16-2.61.16-3.94c0-46.26-44-73.17-45.83-74.29a12%2012%200%200%200-12.34%200C120%20110.83%2076%20137.74%2076%20184c0%201.33.07%202.64.16%203.94A67.68%2067.68%200%200%201%2060%20144c0-26.52%2012.21-52.86%2036.28-78.3A213%20213%200%200%201%20128%2038.39c17.82%2012.47%2068%2052.32%2068%20105.61a67.68%2067.68%200%200%201-16.16%2043.94%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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M176.69%2048.72a225%20225%200%200%200-42.52-35a12%2012%200%200%200-12.34%200a225%20225%200%200%200-42.52%2035C51%2078.47%2036%20111.42%2036%20144a92%2092%200%200%200%20184%200c0-32.58-15-65.53-43.31-95.28M100%20184c0-13.33%205.53-26.26%2016.45-38.45A93%2093%200%200%201%20128%20134.72a93%2093%200%200%201%2011.55%2010.83C150.47%20157.74%20156%20170.67%20156%20184a28%2028%200%200%201-56%200m79.84%203.94c.09-1.3.16-2.61.16-3.94c0-46.26-44-73.17-45.83-74.29a12%2012%200%200%200-12.34%200C120%20110.83%2076%20137.74%2076%20184c0%201.33.07%202.64.16%203.94A67.68%2067.68%200%200%201%2060%20144c0-26.52%2012.21-52.86%2036.28-78.3A213%20213%200%200%201%20128%2038.39c17.82%2012.47%2068%2052.32%2068%20105.61a67.68%2067.68%200%200%201-16.16%2043.94%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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