flame icon
flame-fill from Framework7 Icons by Vladimir Kharlampidi · Fill · MIT Free for personal and commercial use.
- Name
- flame-fill
- Set
- Framework7 Icons
- Style
- Fill
- Viewbox
- 56×56
- License
- MIT
1 other variant in Framework7 Icons
The same icon in other sets
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.125 37.398c0 9.516 7.781 16.243 18.75 16.243c12.445 0 21-8.04 21-21.258c0-20.625-18.094-30.024-31.289-30.024c-2.086 0-3.117 1.032-3.117 2.227c0 .96.515 1.758 1.289 2.86c1.875 2.577 5.062 6.327 5.062 11.038c0 .399-.023.797-.07 1.22c-1.312-2.462-3.633-4.196-6.445-4.196c-.797 0-1.219.469-1.219 1.148c0 .82.187 1.407.187 3.961c0 4.899-4.148 8.203-4.148 16.781m19.219 9.657c-4.688 0-7.805-2.836-7.805-7.055c0-4.43 3.14-6 3.563-8.86c.023-.234.187-.304.351-.14c1.172 1.008 1.899 2.273 2.461 3.727c.117.257.305.28.422.07c1.289-2.25 1.523-5.602 1.219-9.82c-.047-.235.117-.352.328-.258c5.555 2.531 8.39 8.039 8.39 12.984c0 4.969-2.93 9.352-8.93 9.352"/></svg>
React
import type { SVGProps } from "react";
export function F7FlameFill(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.125 37.398c0 9.516 7.781 16.243 18.75 16.243c12.445 0 21-8.04 21-21.258c0-20.625-18.094-30.024-31.289-30.024c-2.086 0-3.117 1.032-3.117 2.227c0 .96.515 1.758 1.289 2.86c1.875 2.577 5.062 6.327 5.062 11.038c0 .399-.023.797-.07 1.22c-1.312-2.462-3.633-4.196-6.445-4.196c-.797 0-1.219.469-1.219 1.148c0 .82.187 1.407.187 3.961c0 4.899-4.148 8.203-4.148 16.781m19.219 9.657c-4.688 0-7.805-2.836-7.805-7.055c0-4.43 3.14-6 3.563-8.86c.023-.234.187-.304.351-.14c1.172 1.008 1.899 2.273 2.461 3.727c.117.257.305.28.422.07c1.289-2.25 1.523-5.602 1.219-9.82c-.047-.235.117-.352.328-.258c5.555 2.531 8.39 8.039 8.39 12.984c0 4.969-2.93 9.352-8.93 9.352"/></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.125 37.398c0 9.516 7.781 16.243 18.75 16.243c12.445 0 21-8.04 21-21.258c0-20.625-18.094-30.024-31.289-30.024c-2.086 0-3.117 1.032-3.117 2.227c0 .96.515 1.758 1.289 2.86c1.875 2.577 5.062 6.327 5.062 11.038c0 .399-.023.797-.07 1.22c-1.312-2.462-3.633-4.196-6.445-4.196c-.797 0-1.219.469-1.219 1.148c0 .82.187 1.407.187 3.961c0 4.899-4.148 8.203-4.148 16.781m19.219 9.657c-4.688 0-7.805-2.836-7.805-7.055c0-4.43 3.14-6 3.563-8.86c.023-.234.187-.304.351-.14c1.172 1.008 1.899 2.273 2.461 3.727c.117.257.305.28.422.07c1.289-2.25 1.523-5.602 1.219-9.82c-.047-.235.117-.352.328-.258c5.555 2.531 8.39 8.039 8.39 12.984c0 4.969-2.93 9.352-8.93 9.352"/></svg> </template>
CSS
.icon-flame-fill {
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.125%2037.398c0%209.516%207.781%2016.243%2018.75%2016.243c12.445%200%2021-8.04%2021-21.258c0-20.625-18.094-30.024-31.289-30.024c-2.086%200-3.117%201.032-3.117%202.227c0%20.96.515%201.758%201.289%202.86c1.875%202.577%205.062%206.327%205.062%2011.038c0%20.399-.023.797-.07%201.22c-1.312-2.462-3.633-4.196-6.445-4.196c-.797%200-1.219.469-1.219%201.148c0%20.82.187%201.407.187%203.961c0%204.899-4.148%208.203-4.148%2016.781m19.219%209.657c-4.688%200-7.805-2.836-7.805-7.055c0-4.43%203.14-6%203.563-8.86c.023-.234.187-.304.351-.14c1.172%201.008%201.899%202.273%202.461%203.727c.117.257.305.28.422.07c1.289-2.25%201.523-5.602%201.219-9.82c-.047-.235.117-.352.328-.258c5.555%202.531%208.39%208.039%208.39%2012.984c0%204.969-2.93%209.352-8.93%209.352%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.125%2037.398c0%209.516%207.781%2016.243%2018.75%2016.243c12.445%200%2021-8.04%2021-21.258c0-20.625-18.094-30.024-31.289-30.024c-2.086%200-3.117%201.032-3.117%202.227c0%20.96.515%201.758%201.289%202.86c1.875%202.577%205.062%206.327%205.062%2011.038c0%20.399-.023.797-.07%201.22c-1.312-2.462-3.633-4.196-6.445-4.196c-.797%200-1.219.469-1.219%201.148c0%20.82.187%201.407.187%203.961c0%204.899-4.148%208.203-4.148%2016.781m19.219%209.657c-4.688%200-7.805-2.836-7.805-7.055c0-4.43%203.14-6%203.563-8.86c.023-.234.187-.304.351-.14c1.172%201.008%201.899%202.273%202.461%203.727c.117.257.305.28.422.07c1.289-2.25%201.523-5.602%201.219-9.82c-.047-.235.117-.352.328-.258c5.555%202.531%208.39%208.039%208.39%2012.984c0%204.969-2.93%209.352-8.93%209.352%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/f7/flame-fill.svg?color=%231a73e8&size=48
