Person Heart icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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.1092 15.4992C10.1572 14.9841 10.2943 14.4758 10.5207 13.9992H4.25278C3.01076 13.9992 2.00391 15.0061 2.00391 16.2481V16.8258C2.00391 17.7185 2.32242 18.582 2.90219 19.2609C4.46849 21.0952 6.8545 22.0004 10.0004 22.0004C11.4131 22.0004 12.6729 21.8178 13.7743 21.4506L12.5593 20.2356C11.7962 20.4118 10.9441 20.5004 10.0004 20.5004C7.26206 20.5004 5.29618 19.7546 4.04287 18.2869C3.69502 17.8795 3.50391 17.3614 3.50391 16.8258V16.2481C3.50391 15.8345 3.83919 15.4992 4.25278 15.4992H10.1092ZM10.0004 2.00391C12.7618 2.00391 15.0004 4.24248 15.0004 7.00391C15.0004 9.76533 12.7618 12.0039 10.0004 12.0039C7.23894 12.0039 5.00036 9.76533 5.00036 7.00391C5.00036 4.24248 7.23894 2.00391 10.0004 2.00391ZM10.0004 3.50391C8.06737 3.50391 6.50036 5.07091 6.50036 7.00391C6.50036 8.9369 8.06737 10.5039 10.0004 10.5039C11.9334 10.5039 13.5004 8.9369 13.5004 7.00391C13.5004 5.07091 11.9334 3.50391 10.0004 3.50391ZM17.0439 22.996C16.8519 22.9961 16.6599 22.9228 16.5135 22.7764L12.1052 18.3681C10.7514 17.0142 10.7514 14.8192 12.1052 13.4654C13.4591 12.1116 15.6541 12.1116 17.0079 13.4654L17.0439 13.5014L17.0799 13.4654C18.4337 12.1116 20.6287 12.1116 21.9826 13.4654C23.3364 14.8192 23.3364 17.0142 21.9826 18.3681L17.5743 22.7764C17.4279 22.9228 17.2359 22.9961 17.0439 22.996Z" 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_heart_24_regular.svg";

Details

Keywords

peopleavatarheartinsider