Home Split icon

Use the Home Split 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 { HomeSplit24Regular, HomeSplit24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M13.4505 2.5319C12.6126 1.82531 11.3874 1.82531 10.5495 2.53189L3.79952 8.224C3.29255 8.65152 3 9.2809 3 9.94406V19.2539C3 20.2204 3.7835 21.0039 4.75 21.0039H19.25C20.2165 21.0039 21 20.2204 21 19.2539L21 9.94406C21 9.2809 20.7074 8.65152 20.2005 8.224L13.4505 2.5319ZM11.5165 3.6786C11.7958 3.44307 12.2042 3.44307 12.4835 3.6786L19.2335 9.37071C19.4025 9.51321 19.5 9.72301 19.5 9.94406L19.5 19.2539C19.5 19.392 19.3881 19.5039 19.25 19.5039H4.75C4.61193 19.5039 4.5 19.392 4.5 19.2539L4.5 9.94406C4.5 9.72301 4.59752 9.51321 4.76651 9.37071L11.5165 3.6786ZM12.75 6.25C12.75 5.83579 12.4142 5.5 12 5.5C11.5858 5.5 11.25 5.83579 11.25 6.25V7.75C11.25 8.16421 11.5858 8.5 12 8.5C12.4142 8.5 12.75 8.16421 12.75 7.75V6.25ZM12 10.5C12.4142 10.5 12.75 10.8358 12.75 11.25V12.75C12.75 13.1642 12.4142 13.5 12 13.5C11.5858 13.5 11.25 13.1642 11.25 12.75V11.25C11.25 10.8358 11.5858 10.5 12 10.5ZM12.75 16.25C12.75 15.8358 12.4142 15.5 12 15.5C11.5858 15.5 11.25 15.8358 11.25 16.25V17.75C11.25 18.1642 11.5858 18.5 12 18.5C12.4142 18.5 12.75 18.1642 12.75 17.75V16.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/home_split_24_regular.svg";

Details

Keywords

housesafetylocationspacewfhduplexsharedapartment