fire icon

fire from Bootstrap Icons by The Bootstrap Authors · Outline · MIT Free for personal and commercial use.

Name
fire
Set
Bootstrap Icons
Style
Outline
Viewbox
16×16
License
MIT

The same icon in other sets

fireAkar Iconsfire-filledAnt Design IconsfireCarbonfireEmoji One (Colored)fireFont Awesome 6 SolidfireFont Awesome Solidfire-outlineFlowbite Iconsfire-16-filledFluent UI System IconsfireFluent EmojifireFluent Emoji FlatfireFluent Emoji High ContrastfireFirefox OS EmojifireHeroIconsfireHuge IconsfireIconParkfireIconPark OutlinefireIconPark SolidfireIconPark TwoTonefireLine AwesomefireMajesticonsfireMaterial Design Iconsfire-fillMingCute IconfireMyna UI IconsfireNoto Emoji

Use the fire icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M8 16c3.314 0 6-2 6-5.5c0-1.5-.5-4-2.5-6c.25 1.5-1.25 2-1.25 2C11 4 9 .5 6 0c.357 2 .5 4-2 6c-1.25 1-2 2.729-2 4.5C2 14 4.686 16 8 16m0-1c-1.657 0-3-1-3-2.75c0-.75.25-2 1.25-3C6.125 10 7 10.5 7 10.5c-.375-1.25.5-3.25 2-3.5c-.179 1-.25 2 1 3c.625.5 1 1.364 1 2.25C11 14 9.657 15 8 15"/></svg>

React

import type { SVGProps } from "react";

export function BiFire(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M8 16c3.314 0 6-2 6-5.5c0-1.5-.5-4-2.5-6c.25 1.5-1.25 2-1.25 2C11 4 9 .5 6 0c.357 2 .5 4-2 6c-1.25 1-2 2.729-2 4.5C2 14 4.686 16 8 16m0-1c-1.657 0-3-1-3-2.75c0-.75.25-2 1.25-3C6.125 10 7 10.5 7 10.5c-.375-1.25.5-3.25 2-3.5c-.179 1-.25 2 1 3c.625.5 1 1.364 1 2.25C11 14 9.657 15 8 15"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M8 16c3.314 0 6-2 6-5.5c0-1.5-.5-4-2.5-6c.25 1.5-1.25 2-1.25 2C11 4 9 .5 6 0c.357 2 .5 4-2 6c-1.25 1-2 2.729-2 4.5C2 14 4.686 16 8 16m0-1c-1.657 0-3-1-3-2.75c0-.75.25-2 1.25-3C6.125 10 7 10.5 7 10.5c-.375-1.25.5-3.25 2-3.5c-.179 1-.25 2 1 3c.625.5 1 1.364 1 2.25C11 14 9.657 15 8 15"/></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%2016%2016%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M8%2016c3.314%200%206-2%206-5.5c0-1.5-.5-4-2.5-6c.25%201.5-1.25%202-1.25%202C11%204%209%20.5%206%200c.357%202%20.5%204-2%206c-1.25%201-2%202.729-2%204.5C2%2014%204.686%2016%208%2016m0-1c-1.657%200-3-1-3-2.75c0-.75.25-2%201.25-3C6.125%2010%207%2010.5%207%2010.5c-.375-1.25.5-3.25%202-3.5c-.179%201-.25%202%201%203c.625.5%201%201.364%201%202.25C11%2014%209.657%2015%208%2015%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%2016%2016%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M8%2016c3.314%200%206-2%206-5.5c0-1.5-.5-4-2.5-6c.25%201.5-1.25%202-1.25%202C11%204%209%20.5%206%200c.357%202%20.5%204-2%206c-1.25%201-2%202.729-2%204.5C2%2014%204.686%2016%208%2016m0-1c-1.657%200-3-1-3-2.75c0-.75.25-2%201.25-3C6.125%2010%207%2010.5%207%2010.5c-.375-1.25.5-3.25%202-3.5c-.179%201-.25%202%201%203c.625.5%201%201.364%201%202.25C11%2014%209.657%2015%208%2015%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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