flame icon

flame from Framework7 Icons by Vladimir Kharlampidi · Outline · MIT Free for personal and commercial use.

Name: flame
Set: Framework7 Icons
Style: Outline
Viewbox: 56×56
License: MIT

1 other variant in Framework7 Icons

The same icon in other sets

flameBoxIcons v2 Solid flameHuge Icons flameIonIcons flameJam Icons flameLucide flame-fillMingCute Icon flameOcticons flamePhosphor flame-boldSolar flameTabler Icons

Use the flame icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M8.184 37.398c0 9.75 7.453 16.243 18.632 16.243c12.586 0 21-8.485 21-21.258c0-21.211-18.093-30.024-30.398-30.024c-2.461 0-4.055.868-4.055 2.579c0 .656.282 1.359.797 1.945c2.742 3.305 5.531 7.125 5.602 11.601c0 .422 0 .82-.047 1.243c-1.313-2.461-3.516-4.22-5.766-4.22c-1.125 0-1.922.821-1.922 2.063c0 .586.188 2.04.188 3.047c0 4.899-4.031 8.203-4.031 16.781m3.89 0c0-7.265 4.008-10.289 4.196-17.015c1.335 1.687 2.296 3.726 2.625 6.656c.046.469.328.656.75.656c2.226 0 3.515-5.648 3.515-9.21c0-4.571-1.945-9.352-4.969-12.422C34.223 7.352 43.785 18.25 43.785 32.219c0 10.547-6.68 17.554-16.664 17.554c-9.047 0-15.047-4.945-15.047-12.375m15.375 9.657c5.742 0 8.555-4.22 8.555-9c0-4.735-2.719-10.008-8.063-12.47c-.21-.093-.351.024-.328.259c.305 4.054.07 7.289-1.148 9.422c-.14.21-.305.187-.399-.047c-.562-1.407-1.265-2.602-2.367-3.586c-.187-.164-.328-.094-.351.14c-.399 2.72-3.422 4.243-3.422 8.508c0 4.055 3 6.774 7.523 6.774"/></svg>

React

import type { SVGProps } from "react";

export function F7Flame(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M8.184 37.398c0 9.75 7.453 16.243 18.632 16.243c12.586 0 21-8.485 21-21.258c0-21.211-18.093-30.024-30.398-30.024c-2.461 0-4.055.868-4.055 2.579c0 .656.282 1.359.797 1.945c2.742 3.305 5.531 7.125 5.602 11.601c0 .422 0 .82-.047 1.243c-1.313-2.461-3.516-4.22-5.766-4.22c-1.125 0-1.922.821-1.922 2.063c0 .586.188 2.04.188 3.047c0 4.899-4.031 8.203-4.031 16.781m3.89 0c0-7.265 4.008-10.289 4.196-17.015c1.335 1.687 2.296 3.726 2.625 6.656c.046.469.328.656.75.656c2.226 0 3.515-5.648 3.515-9.21c0-4.571-1.945-9.352-4.969-12.422C34.223 7.352 43.785 18.25 43.785 32.219c0 10.547-6.68 17.554-16.664 17.554c-9.047 0-15.047-4.945-15.047-12.375m15.375 9.657c5.742 0 8.555-4.22 8.555-9c0-4.735-2.719-10.008-8.063-12.47c-.21-.093-.351.024-.328.259c.305 4.054.07 7.289-1.148 9.422c-.14.21-.305.187-.399-.047c-.562-1.407-1.265-2.602-2.367-3.586c-.187-.164-.328-.094-.351.14c-.399 2.72-3.422 4.243-3.422 8.508c0 4.055 3 6.774 7.523 6.774"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M8.184 37.398c0 9.75 7.453 16.243 18.632 16.243c12.586 0 21-8.485 21-21.258c0-21.211-18.093-30.024-30.398-30.024c-2.461 0-4.055.868-4.055 2.579c0 .656.282 1.359.797 1.945c2.742 3.305 5.531 7.125 5.602 11.601c0 .422 0 .82-.047 1.243c-1.313-2.461-3.516-4.22-5.766-4.22c-1.125 0-1.922.821-1.922 2.063c0 .586.188 2.04.188 3.047c0 4.899-4.031 8.203-4.031 16.781m3.89 0c0-7.265 4.008-10.289 4.196-17.015c1.335 1.687 2.296 3.726 2.625 6.656c.046.469.328.656.75.656c2.226 0 3.515-5.648 3.515-9.21c0-4.571-1.945-9.352-4.969-12.422C34.223 7.352 43.785 18.25 43.785 32.219c0 10.547-6.68 17.554-16.664 17.554c-9.047 0-15.047-4.945-15.047-12.375m15.375 9.657c5.742 0 8.555-4.22 8.555-9c0-4.735-2.719-10.008-8.063-12.47c-.21-.093-.351.024-.328.259c.305 4.054.07 7.289-1.148 9.422c-.14.21-.305.187-.399-.047c-.562-1.407-1.265-2.602-2.367-3.586c-.187-.164-.328-.094-.351.14c-.399 2.72-3.422 4.243-3.422 8.508c0 4.055 3 6.774 7.523 6.774"/></svg>
</template>

CSS

.icon-flame {
  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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M8.184%2037.398c0%209.75%207.453%2016.243%2018.632%2016.243c12.586%200%2021-8.485%2021-21.258c0-21.211-18.093-30.024-30.398-30.024c-2.461%200-4.055.868-4.055%202.579c0%20.656.282%201.359.797%201.945c2.742%203.305%205.531%207.125%205.602%2011.601c0%20.422%200%20.82-.047%201.243c-1.313-2.461-3.516-4.22-5.766-4.22c-1.125%200-1.922.821-1.922%202.063c0%20.586.188%202.04.188%203.047c0%204.899-4.031%208.203-4.031%2016.781m3.89%200c0-7.265%204.008-10.289%204.196-17.015c1.335%201.687%202.296%203.726%202.625%206.656c.046.469.328.656.75.656c2.226%200%203.515-5.648%203.515-9.21c0-4.571-1.945-9.352-4.969-12.422C34.223%207.352%2043.785%2018.25%2043.785%2032.219c0%2010.547-6.68%2017.554-16.664%2017.554c-9.047%200-15.047-4.945-15.047-12.375m15.375%209.657c5.742%200%208.555-4.22%208.555-9c0-4.735-2.719-10.008-8.063-12.47c-.21-.093-.351.024-.328.259c.305%204.054.07%207.289-1.148%209.422c-.14.21-.305.187-.399-.047c-.562-1.407-1.265-2.602-2.367-3.586c-.187-.164-.328-.094-.351.14c-.399%202.72-3.422%204.243-3.422%208.508c0%204.055%203%206.774%207.523%206.774%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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M8.184%2037.398c0%209.75%207.453%2016.243%2018.632%2016.243c12.586%200%2021-8.485%2021-21.258c0-21.211-18.093-30.024-30.398-30.024c-2.461%200-4.055.868-4.055%202.579c0%20.656.282%201.359.797%201.945c2.742%203.305%205.531%207.125%205.602%2011.601c0%20.422%200%20.82-.047%201.243c-1.313-2.461-3.516-4.22-5.766-4.22c-1.125%200-1.922.821-1.922%202.063c0%20.586.188%202.04.188%203.047c0%204.899-4.031%208.203-4.031%2016.781m3.89%200c0-7.265%204.008-10.289%204.196-17.015c1.335%201.687%202.296%203.726%202.625%206.656c.046.469.328.656.75.656c2.226%200%203.515-5.648%203.515-9.21c0-4.571-1.945-9.352-4.969-12.422C34.223%207.352%2043.785%2018.25%2043.785%2032.219c0%2010.547-6.68%2017.554-16.664%2017.554c-9.047%200-15.047-4.945-15.047-12.375m15.375%209.657c5.742%200%208.555-4.22%208.555-9c0-4.735-2.719-10.008-8.063-12.47c-.21-.093-.351.024-.328.259c.305%204.054.07%207.289-1.148%209.422c-.14.21-.305.187-.399-.047c-.562-1.407-1.265-2.602-2.367-3.586c-.187-.164-.328-.094-.351.14c-.399%202.72-3.422%204.243-3.422%208.508c0%204.055%203%206.774%207.523%206.774%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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