flame icon

flame-light from Phosphor by Phosphor Icons · Light · MIT Free for personal and commercial use.

Name
flame-light
Set
Phosphor
Style
Light
Viewbox
256×256
License
MIT

5 other variants in Phosphor

flameflame-boldflame-duotoneflame-fillflame-thin

The same icon in other sets

flameBoxIcons v2 SolidflameFramework7 IconsflameHuge IconsflameIonIconsflameJam IconsflameLucideflame-fillMingCute IconflameOcticonsflame-boldSolarflameTabler Icons

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="M172.34 52.86a218.3 218.3 0 0 0-41.25-34a6 6 0 0 0-6.18 0a218.3 218.3 0 0 0-41.25 34C56.4 81.48 42 113 42 144a86 86 0 0 0 172 0c0-31-14.4-62.52-41.66-91.14M94 184c0-29.8 25.11-50.41 34-56.78c8.91 6.35 34 26.87 34 56.78a34.05 34.05 0 0 1-32.25 34h-3.5A34.05 34.05 0 0 1 94 184m74.42 21.94A45.7 45.7 0 0 0 174 184c0-42.9-41.16-68.09-42.91-69.14a6 6 0 0 0-6.18 0C123.16 115.91 82 141.1 82 184a45.7 45.7 0 0 0 5.58 21.94A74 74 0 0 1 54 144c0-59.83 59.62-103.26 74-112.86c14.39 9.6 74 53 74 112.86a74 74 0 0 1-33.58 61.94"/></svg>

React

import type { SVGProps } from "react";

export function PhFlameLight(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="M172.34 52.86a218.3 218.3 0 0 0-41.25-34a6 6 0 0 0-6.18 0a218.3 218.3 0 0 0-41.25 34C56.4 81.48 42 113 42 144a86 86 0 0 0 172 0c0-31-14.4-62.52-41.66-91.14M94 184c0-29.8 25.11-50.41 34-56.78c8.91 6.35 34 26.87 34 56.78a34.05 34.05 0 0 1-32.25 34h-3.5A34.05 34.05 0 0 1 94 184m74.42 21.94A45.7 45.7 0 0 0 174 184c0-42.9-41.16-68.09-42.91-69.14a6 6 0 0 0-6.18 0C123.16 115.91 82 141.1 82 184a45.7 45.7 0 0 0 5.58 21.94A74 74 0 0 1 54 144c0-59.83 59.62-103.26 74-112.86c14.39 9.6 74 53 74 112.86a74 74 0 0 1-33.58 61.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="M172.34 52.86a218.3 218.3 0 0 0-41.25-34a6 6 0 0 0-6.18 0a218.3 218.3 0 0 0-41.25 34C56.4 81.48 42 113 42 144a86 86 0 0 0 172 0c0-31-14.4-62.52-41.66-91.14M94 184c0-29.8 25.11-50.41 34-56.78c8.91 6.35 34 26.87 34 56.78a34.05 34.05 0 0 1-32.25 34h-3.5A34.05 34.05 0 0 1 94 184m74.42 21.94A45.7 45.7 0 0 0 174 184c0-42.9-41.16-68.09-42.91-69.14a6 6 0 0 0-6.18 0C123.16 115.91 82 141.1 82 184a45.7 45.7 0 0 0 5.58 21.94A74 74 0 0 1 54 144c0-59.83 59.62-103.26 74-112.86c14.39 9.6 74 53 74 112.86a74 74 0 0 1-33.58 61.94"/></svg>
</template>

CSS

.icon-flame-light {
  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%22M172.34%2052.86a218.3%20218.3%200%200%200-41.25-34a6%206%200%200%200-6.18%200a218.3%20218.3%200%200%200-41.25%2034C56.4%2081.48%2042%20113%2042%20144a86%2086%200%200%200%20172%200c0-31-14.4-62.52-41.66-91.14M94%20184c0-29.8%2025.11-50.41%2034-56.78c8.91%206.35%2034%2026.87%2034%2056.78a34.05%2034.05%200%200%201-32.25%2034h-3.5A34.05%2034.05%200%200%201%2094%20184m74.42%2021.94A45.7%2045.7%200%200%200%20174%20184c0-42.9-41.16-68.09-42.91-69.14a6%206%200%200%200-6.18%200C123.16%20115.91%2082%20141.1%2082%20184a45.7%2045.7%200%200%200%205.58%2021.94A74%2074%200%200%201%2054%20144c0-59.83%2059.62-103.26%2074-112.86c14.39%209.6%2074%2053%2074%20112.86a74%2074%200%200%201-33.58%2061.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%22M172.34%2052.86a218.3%20218.3%200%200%200-41.25-34a6%206%200%200%200-6.18%200a218.3%20218.3%200%200%200-41.25%2034C56.4%2081.48%2042%20113%2042%20144a86%2086%200%200%200%20172%200c0-31-14.4-62.52-41.66-91.14M94%20184c0-29.8%2025.11-50.41%2034-56.78c8.91%206.35%2034%2026.87%2034%2056.78a34.05%2034.05%200%200%201-32.25%2034h-3.5A34.05%2034.05%200%200%201%2094%20184m74.42%2021.94A45.7%2045.7%200%200%200%20174%20184c0-42.9-41.16-68.09-42.91-69.14a6%206%200%200%200-6.18%200C123.16%20115.91%2082%20141.1%2082%20184a45.7%2045.7%200%200%200%205.58%2021.94A74%2074%200%200%201%2054%20144c0-59.83%2059.62-103.26%2074-112.86c14.39%209.6%2074%2053%2074%20112.86a74%2074%200%200%201-33.58%2061.94%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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