fire icon

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

Name
fire
Set
Font Awesome 6 Solid
Style
Regular
Category
Camping
Viewbox
448×512
License
CC BY 4.0

The same icon in other sets

fireAkar IconsfireBootstrap IconsfireCarbonfireEmoji One (Colored)fire-16-filledFluent UI System IconsfireFluent EmojifireFluent Emoji FlatfireFluent Emoji High ContrastfireHeroIconsfireHuge IconsfireLine AwesomefireMajesticonsfireMaterial Design Iconsfire-fillMingCute IconfireNoto EmojifireOpenMojifirePhosphorfirePixelarticonsfire-fillRemix Iconfire-boldSolarfireStreamline EmojisfireTwitter EmojifireUnicons

More camping icons from Font Awesome 6 Solid

binocularsfaucetmaproutetoilet-paperfire-extinguisherfire-burnerfire-flame-curvedfire-flame-simple

Use the fire icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 448 512"><path fill="currentColor" d="M159.3 5.4c7.8-7.3 19.9-7.2 27.7.1c27.6 25.9 53.5 53.8 77.7 84c11-14.4 23.5-30.1 37-42.9c7.9-7.4 20.1-7.4 28 .1c34.6 33 63.9 76.6 84.5 118c20.3 40.8 33.8 82.5 33.8 111.9C448 404.2 348.2 512 224 512C98.4 512 0 404.1 0 276.5c0-38.4 17.8-85.3 45.4-131.7C73.3 97.7 112.7 48.6 159.3 5.4M225.7 416c25.3 0 47.7-7 68.8-21c42.1-29.4 53.4-88.2 28.1-134.4c-4.5-9-16-9.6-22.5-2l-25.2 29.3c-6.6 7.6-18.5 7.4-24.7-.5c-16.5-21-46-58.5-62.8-79.8c-6.3-8-18.3-8.1-24.7-.1c-33.8 42.5-50.8 69.3-50.8 99.4c.1 68.5 50.7 109.1 113.8 109.1"/></svg>

React

import type { SVGProps } from "react";

export function Fa6SolidFire(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 448 512"><path fill="currentColor" d="M159.3 5.4c7.8-7.3 19.9-7.2 27.7.1c27.6 25.9 53.5 53.8 77.7 84c11-14.4 23.5-30.1 37-42.9c7.9-7.4 20.1-7.4 28 .1c34.6 33 63.9 76.6 84.5 118c20.3 40.8 33.8 82.5 33.8 111.9C448 404.2 348.2 512 224 512C98.4 512 0 404.1 0 276.5c0-38.4 17.8-85.3 45.4-131.7C73.3 97.7 112.7 48.6 159.3 5.4M225.7 416c25.3 0 47.7-7 68.8-21c42.1-29.4 53.4-88.2 28.1-134.4c-4.5-9-16-9.6-22.5-2l-25.2 29.3c-6.6 7.6-18.5 7.4-24.7-.5c-16.5-21-46-58.5-62.8-79.8c-6.3-8-18.3-8.1-24.7-.1c-33.8 42.5-50.8 69.3-50.8 99.4c.1 68.5 50.7 109.1 113.8 109.1"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 448 512"><path fill="currentColor" d="M159.3 5.4c7.8-7.3 19.9-7.2 27.7.1c27.6 25.9 53.5 53.8 77.7 84c11-14.4 23.5-30.1 37-42.9c7.9-7.4 20.1-7.4 28 .1c34.6 33 63.9 76.6 84.5 118c20.3 40.8 33.8 82.5 33.8 111.9C448 404.2 348.2 512 224 512C98.4 512 0 404.1 0 276.5c0-38.4 17.8-85.3 45.4-131.7C73.3 97.7 112.7 48.6 159.3 5.4M225.7 416c25.3 0 47.7-7 68.8-21c42.1-29.4 53.4-88.2 28.1-134.4c-4.5-9-16-9.6-22.5-2l-25.2 29.3c-6.6 7.6-18.5 7.4-24.7-.5c-16.5-21-46-58.5-62.8-79.8c-6.3-8-18.3-8.1-24.7-.1c-33.8 42.5-50.8 69.3-50.8 99.4c.1 68.5 50.7 109.1 113.8 109.1"/></svg>
</template>

CSS

.icon-fire {
  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%20448%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M159.3%205.4c7.8-7.3%2019.9-7.2%2027.7.1c27.6%2025.9%2053.5%2053.8%2077.7%2084c11-14.4%2023.5-30.1%2037-42.9c7.9-7.4%2020.1-7.4%2028%20.1c34.6%2033%2063.9%2076.6%2084.5%20118c20.3%2040.8%2033.8%2082.5%2033.8%20111.9C448%20404.2%20348.2%20512%20224%20512C98.4%20512%200%20404.1%200%20276.5c0-38.4%2017.8-85.3%2045.4-131.7C73.3%2097.7%20112.7%2048.6%20159.3%205.4M225.7%20416c25.3%200%2047.7-7%2068.8-21c42.1-29.4%2053.4-88.2%2028.1-134.4c-4.5-9-16-9.6-22.5-2l-25.2%2029.3c-6.6%207.6-18.5%207.4-24.7-.5c-16.5-21-46-58.5-62.8-79.8c-6.3-8-18.3-8.1-24.7-.1c-33.8%2042.5-50.8%2069.3-50.8%2099.4c.1%2068.5%2050.7%20109.1%20113.8%20109.1%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%20448%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M159.3%205.4c7.8-7.3%2019.9-7.2%2027.7.1c27.6%2025.9%2053.5%2053.8%2077.7%2084c11-14.4%2023.5-30.1%2037-42.9c7.9-7.4%2020.1-7.4%2028%20.1c34.6%2033%2063.9%2076.6%2084.5%20118c20.3%2040.8%2033.8%2082.5%2033.8%20111.9C448%20404.2%20348.2%20512%20224%20512C98.4%20512%200%20404.1%200%20276.5c0-38.4%2017.8-85.3%2045.4-131.7C73.3%2097.7%20112.7%2048.6%20159.3%205.4M225.7%20416c25.3%200%2047.7-7%2068.8-21c42.1-29.4%2053.4-88.2%2028.1-134.4c-4.5-9-16-9.6-22.5-2l-25.2%2029.3c-6.6%207.6-18.5%207.4-24.7-.5c-16.5-21-46-58.5-62.8-79.8c-6.3-8-18.3-8.1-24.7-.1c-33.8%2042.5-50.8%2069.3-50.8%2099.4c.1%2068.5%2050.7%20109.1%20113.8%20109.1%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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