Building Home icon

Use the Building Home 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 { BuildingHome24Regular, BuildingHome24Filled } from "@fluentui/react-icons";

export function Example() {
  return <BuildingHome24Regular aria-label="Building Home" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_building_home_24_regular.svg" width="24" height="24" alt="Building Home">

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.75 3.5C3.61193 3.5 3.5 3.61193 3.5 3.75V16.25C3.5 16.3881 3.61193 16.5 3.75 16.5H9V18H3.75C2.7835 18 2 17.2165 2 16.25V3.75C2 2.7835 2.7835 2 3.75 2H9.25C10.2165 2 11 2.7835 11 3.75V6.75C11 6.88807 11.1119 7 11.25 7H12.25C13.2165 7 14 7.7835 14 8.75V8.82178L12.5 10.2218V8.75C12.5 8.61193 12.3881 8.5 12.25 8.5H11.25C10.2835 8.5 9.5 7.7165 9.5 6.75V3.75C9.5 3.61193 9.38807 3.5 9.25 3.5H3.75ZM6 5.75C6 6.16421 5.66421 6.5 5.25 6.5C4.83579 6.5 4.5 6.16421 4.5 5.75C4.5 5.33579 4.83579 5 5.25 5C5.66421 5 6 5.33579 6 5.75ZM5.25 9.5C5.66421 9.5 6 9.16421 6 8.75C6 8.33579 5.66421 8 5.25 8C4.83579 8 4.5 8.33579 4.5 8.75C4.5 9.16421 4.83579 9.5 5.25 9.5ZM6 11.75C6 12.1642 5.66421 12.5 5.25 12.5C4.83579 12.5 4.5 12.1642 4.5 11.75C4.5 11.3358 4.83579 11 5.25 11C5.66421 11 6 11.3358 6 11.75ZM7.75 6.5C8.16421 6.5 8.5 6.16421 8.5 5.75C8.5 5.33579 8.16421 5 7.75 5C7.33579 5 7 5.33579 7 5.75C7 6.16421 7.33579 6.5 7.75 6.5ZM8.5 8.75C8.5 9.16421 8.16421 9.5 7.75 9.5C7.33579 9.5 7 9.16421 7 8.75C7 8.33579 7.33579 8 7.75 8C8.16421 8 8.5 8.33579 8.5 8.75ZM7.75 12.5C8.16421 12.5 8.5 12.1642 8.5 11.75C8.5 11.3358 8.16421 11 7.75 11C7.33579 11 7 11.3358 7 11.75C7 12.1642 7.33579 12.5 7.75 12.5ZM17.1941 9.43855C16.5217 8.81101 15.4783 8.81101 14.8059 9.43855L10.5559 13.4052C10.2013 13.7362 10 14.1995 10 14.6846V20.5C10 21.3284 10.6716 22 11.5 22H13.5C14.3284 22 15 21.3284 15 20.5V18.0004H17V20.5C17 21.3284 17.6716 22 18.5 22H20.5C21.3284 22 22 21.3284 22 20.5V14.6846C22 14.1995 21.7987 13.7362 21.4441 13.4052L17.1941 9.43855ZM15.8294 10.5351C15.9255 10.4455 16.0745 10.4455 16.1706 10.5351L20.4206 14.5018C20.4712 14.5491 20.5 14.6153 20.5 14.6846V20.5H18.5V18.0004C18.5 17.172 17.8284 16.5004 17 16.5004H15C14.1716 16.5004 13.5 17.172 13.5 18.0004V20.5H11.5V14.6846C11.5 14.6153 11.5288 14.5491 11.5794 14.5018L15.8294 10.5351Z" 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/building_home_24_regular.svg";

Details

Keywords

structureconstructionarchitectureskyscraper