Person Home icon

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

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_person_home_24_regular.svg" width="24" height="24" alt="Person 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="M16.5244 12.3604C17.0859 11.8796 17.9141 11.8796 18.4756 12.3604L22.4756 15.7871C22.8081 16.072 22.9999 16.4879 23 16.9258V22C22.9999 22.5522 22.5522 23 22 23H20.333C19.7809 22.9998 19.3331 22.5521 19.333 22V19C19.333 18.4477 18.8853 18 18.333 18H16.667C16.1147 18 15.667 18.4477 15.667 19V22C15.6669 22.5521 15.2191 22.9998 14.667 23H13C12.4478 23 12.0001 22.5522 12 22V16.9258C12.0001 16.4879 12.1918 16.072 12.5244 15.7871L16.5244 12.3604ZM11.874 15.0273C11.7112 15.1668 11.5713 15.3274 11.4512 15.5H6.25293C5.83934 15.5 5.50391 15.8354 5.50391 16.249V16.8262C5.50391 17.3617 5.69524 17.8798 6.04297 18.2871C7.13803 19.5695 8.77703 20.3006 11 20.4648V21.9668C8.34481 21.7909 6.2981 20.8962 4.90234 19.2617C4.32258 18.5828 4.00391 17.719 4.00391 16.8262V16.249C4.00391 15.007 5.01091 14 6.25293 14H13.0732L11.874 15.0273ZM12 2.00488C14.7614 2.00488 17 4.24346 17 7.00488C16.9999 9.76619 14.7613 12.0049 12 12.0049C9.23882 12.0047 7.00013 9.76607 7 7.00488C7 4.24358 9.23874 2.00508 12 2.00488ZM12 3.50488C10.0672 3.50508 8.5 5.07201 8.5 7.00488C8.50013 8.93765 10.0673 10.5047 12 10.5049C13.9329 10.5049 15.4999 8.93777 15.5 7.00488C15.5 5.07189 13.933 3.50488 12 3.50488Z" 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/person_home_24_regular.svg";

Details

Keywords

humanpatientcontactguestaccountrollup