Home Empty icon

Use the Home Empty 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 { HomeEmpty24Regular, HomeEmpty24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M10.5491 2.53261C11.3872 1.8256 12.6128 1.82559 13.4509 2.53261L20.2009 8.22729C20.7076 8.65481 21 9.28404 21 9.94703V18.75C21 19.9926 19.9926 21 18.75 21H5.25C4.00736 21 3 19.9926 3 18.75V9.94703C3 9.28404 3.2924 8.65481 3.79913 8.22729L10.5491 2.53261ZM12.4836 3.6791C12.2043 3.44343 11.7957 3.44343 11.5164 3.67911L4.76638 9.37379C4.59747 9.51629 4.5 9.72603 4.5 9.94703V18.75C4.5 19.1642 4.83579 19.5 5.25 19.5H18.75C19.1642 19.5 19.5 19.1642 19.5 18.75V9.94703C19.5 9.72603 19.4025 9.51629 19.2336 9.37378L12.4836 3.6791Z" 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/home_empty_24_regular.svg";

Details