Fireplace icon

Use the Fireplace icon in React

Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.

npm install @fluentui/react-icons

import { Fireplace24Regular, Fireplace24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Fireplace24Regular aria-label="Fireplace" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_fireplace_24_regular.svg" width="24" height="24" alt="Fireplace">

Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 11C3 6.02944 7.02944 2 12 2C16.9706 2 21 6.02944 21 11V17.25C21 17.6642 20.6642 18 20.25 18H3.75C3.33579 18 3 17.6642 3 17.25V11ZM12 3.5C7.85786 3.5 4.5 6.85786 4.5 11V16.5H8.79374C7.98887 15.7303 7.5 14.6667 7.5 13.4865C7.5 12.29 7.86003 11.354 8.22326 10.7161C8.40453 10.3978 8.58725 10.1523 8.72837 9.98288C8.79905 9.898 8.85971 9.8317 8.90514 9.78436C8.92787 9.76068 8.94683 9.74169 8.96139 9.72744L8.97986 9.70962L8.98648 9.70337L8.98911 9.70091L8.99026 9.69985L8.99128 9.6989C9.27494 9.43706 9.71103 9.4333 9.99915 9.69023C10.0161 9.7053 10.0325 9.7198 10.0485 9.73374L10.0534 9.6819C10.0582 9.63112 10.0635 9.57637 10.0691 9.51884C10.1204 8.99651 10.2048 8.25099 10.542 7.58042C10.9025 6.86339 11.5361 6.26042 12.5814 6.01921C12.8041 5.96781 13.038 6.02078 13.2169 6.16307C13.3958 6.30536 13.5 6.52144 13.5 6.75C13.5 8.08682 14.0889 8.84774 14.828 9.74168L14.9035 9.83277C15.6268 10.7055 16.5 11.759 16.5 13.4865C16.5 14.6566 16.008 15.7253 15.197 16.5H19.5V11C19.5 6.85786 16.1421 3.5 12 3.5ZM9.52674 11.4584C9.26497 11.9181 9 12.6004 9 13.4865C9 14.9598 10.2275 16.25 12.0017 16.25C13.7711 16.25 15 14.9366 15 13.4865C15 12.3037 14.4374 11.6233 13.6761 10.7025L13.672 10.6975C13.0792 9.98055 12.3952 9.14185 12.122 7.90476C12.0221 8.01086 11.9451 8.12898 11.8821 8.25425C11.6841 8.64808 11.6139 9.13609 11.562 9.66529C11.5578 9.70797 11.5536 9.75211 11.5493 9.79703C11.5298 10.0035 11.5086 10.2279 11.4762 10.417C11.4432 10.6098 11.3712 10.978 11.11 11.2451C10.9517 11.4069 10.7404 11.5165 10.495 11.5406C10.2703 11.5626 10.0701 11.508 9.916 11.4443C9.82051 11.4048 9.72392 11.3538 9.62626 11.2933C9.59357 11.3446 9.5602 11.3996 9.52674 11.4584ZM2 20.25C2 19.8358 2.33579 19.5 2.75 19.5H21.25C21.6642 19.5 22 19.8358 22 20.25C22 20.6642 21.6642 21 21.25 21H2.75C2.33579 21 2 20.6642 2 20.25Z" fill="currentColor"/></svg>

Use it from the SVG package

Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/fireplace_24_regular.svg";

Details

Keywords

firehomehouseheatwarmth