Home Person icon

Use the Home Person 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 { HomePerson24Regular, HomePerson24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M20.2275 17C21.2063 17.0001 21.9997 17.7927 22 18.7715V18.875C21.9999 20.4315 20.7142 22 17.5 22C14.2858 22 13.0001 20.4373 13 18.875V18.7715C13.0003 17.7927 13.7937 17.0001 14.7725 17H20.2275ZM10.5488 2.53222C11.3869 1.82524 12.6131 1.82524 13.4512 2.53222L20.2012 8.22754C20.7077 8.65504 21 9.28442 21 9.94726V11.793C21 11.9069 20.9078 11.9997 20.7939 12C20.7142 12 20.6414 11.9535 20.6045 11.8828C20.3423 11.3807 19.9618 10.9501 19.5 10.6279V9.94726C19.5 9.72629 19.4023 9.51652 19.2334 9.37402L12.4834 3.67871C12.2042 3.44342 11.7958 3.44342 11.5166 3.67871L4.7666 9.37402C4.59772 9.51652 4.5 9.72629 4.5 9.94726V18.75C4.50005 19.1642 4.83582 19.5 5.25 19.5H12.0527C12.1408 20.0251 12.3413 20.5371 12.665 21H5.25C4.00739 21 3.00005 19.9926 3 18.75V9.94726C3 9.28442 3.29229 8.65504 3.79883 8.22754L10.5488 2.53222ZM17.5 11C18.8807 11 20 12.1193 20 13.5C19.9999 14.8807 18.8807 16 17.5 16C16.1193 16 15.0001 14.8807 15 13.5C15 12.1193 16.1193 11 17.5 11Z" 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_person_24_regular.svg";

Details

Keywords

housesafetylocationspacewfh