fire icon
fire-16-filled from Fluent UI System Icons by Microsoft Corporation · 16 Filled · MIT Free for personal and commercial use.
- Name
- fire-16-filled
- Set
- Fluent UI System Icons
- Style
- 16 Filled
- Viewbox
- 16×16
- License
- MIT
5 other variants in Fluent UI System Icons
The same icon in other sets
fireAkar Iconsfire-filledAnt Design IconsfireBootstrap IconsfireCarbonfireEmoji One (Colored)fireFont Awesome 6 SolidfireFont Awesome Solidfire-outlineFlowbite 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="m4.111 6.19l-.002.003l-.005.006l-.015.02l-.052.071q-.066.091-.169.256a6 6 0 0 0-.462.926c-.31.78-.56 1.885-.281 3.137c.264 1.19.774 2.294 1.658 3.104C5.675 14.529 6.9 15 8.504 15c1.617 0 2.884-.543 3.743-1.473c.852-.924 1.257-2.18 1.257-3.527c0-.859-.286-1.689-.67-2.464c-.365-.738-.839-1.464-1.284-2.147l-.066-.1c-.473-.725-.903-1.395-1.19-2.033c-.285-.637-.397-1.18-.301-1.658A.5.5 0 0 0 9.503 1c-.422 0-1.126.148-1.793.493c-.673.349-1.376.933-1.682 1.849c-.39 1.17.06 2.49.443 3.323c.171.37.023.78-.26.922a.54.54 0 0 1-.727-.242L4.95 6.276a.5.5 0 0 0-.839-.087"/></svg>
React
import type { SVGProps } from "react";
export function FluentFire16Filled(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="m4.111 6.19l-.002.003l-.005.006l-.015.02l-.052.071q-.066.091-.169.256a6 6 0 0 0-.462.926c-.31.78-.56 1.885-.281 3.137c.264 1.19.774 2.294 1.658 3.104C5.675 14.529 6.9 15 8.504 15c1.617 0 2.884-.543 3.743-1.473c.852-.924 1.257-2.18 1.257-3.527c0-.859-.286-1.689-.67-2.464c-.365-.738-.839-1.464-1.284-2.147l-.066-.1c-.473-.725-.903-1.395-1.19-2.033c-.285-.637-.397-1.18-.301-1.658A.5.5 0 0 0 9.503 1c-.422 0-1.126.148-1.793.493c-.673.349-1.376.933-1.682 1.849c-.39 1.17.06 2.49.443 3.323c.171.37.023.78-.26.922a.54.54 0 0 1-.727-.242L4.95 6.276a.5.5 0 0 0-.839-.087"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="m4.111 6.19l-.002.003l-.005.006l-.015.02l-.052.071q-.066.091-.169.256a6 6 0 0 0-.462.926c-.31.78-.56 1.885-.281 3.137c.264 1.19.774 2.294 1.658 3.104C5.675 14.529 6.9 15 8.504 15c1.617 0 2.884-.543 3.743-1.473c.852-.924 1.257-2.18 1.257-3.527c0-.859-.286-1.689-.67-2.464c-.365-.738-.839-1.464-1.284-2.147l-.066-.1c-.473-.725-.903-1.395-1.19-2.033c-.285-.637-.397-1.18-.301-1.658A.5.5 0 0 0 9.503 1c-.422 0-1.126.148-1.793.493c-.673.349-1.376.933-1.682 1.849c-.39 1.17.06 2.49.443 3.323c.171.37.023.78-.26.922a.54.54 0 0 1-.727-.242L4.95 6.276a.5.5 0 0 0-.839-.087"/></svg> </template>
CSS
.icon-fire-16-filled {
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%22m4.111%206.19l-.002.003l-.005.006l-.015.02l-.052.071q-.066.091-.169.256a6%206%200%200%200-.462.926c-.31.78-.56%201.885-.281%203.137c.264%201.19.774%202.294%201.658%203.104C5.675%2014.529%206.9%2015%208.504%2015c1.617%200%202.884-.543%203.743-1.473c.852-.924%201.257-2.18%201.257-3.527c0-.859-.286-1.689-.67-2.464c-.365-.738-.839-1.464-1.284-2.147l-.066-.1c-.473-.725-.903-1.395-1.19-2.033c-.285-.637-.397-1.18-.301-1.658A.5.5%200%200%200%209.503%201c-.422%200-1.126.148-1.793.493c-.673.349-1.376.933-1.682%201.849c-.39%201.17.06%202.49.443%203.323c.171.37.023.78-.26.922a.54.54%200%200%201-.727-.242L4.95%206.276a.5.5%200%200%200-.839-.087%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%22m4.111%206.19l-.002.003l-.005.006l-.015.02l-.052.071q-.066.091-.169.256a6%206%200%200%200-.462.926c-.31.78-.56%201.885-.281%203.137c.264%201.19.774%202.294%201.658%203.104C5.675%2014.529%206.9%2015%208.504%2015c1.617%200%202.884-.543%203.743-1.473c.852-.924%201.257-2.18%201.257-3.527c0-.859-.286-1.689-.67-2.464c-.365-.738-.839-1.464-1.284-2.147l-.066-.1c-.473-.725-.903-1.395-1.19-2.033c-.285-.637-.397-1.18-.301-1.658A.5.5%200%200%200%209.503%201c-.422%200-1.126.148-1.793.493c-.673.349-1.376.933-1.682%201.849c-.39%201.17.06%202.49.443%203.323c.171.37.023.78-.26.922a.54.54%200%200%201-.727-.242L4.95%206.276a.5.5%200%200%200-.839-.087%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/fire-16-filled.svg?color=%231a73e8&size=48
