Document Heart icon

Use the Document 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 { DocumentHeart24Regular, DocumentHeart24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_document_heart_24_regular.svg" width="24" height="24" alt="Document 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="M18 20.5C18.276 20.5 18.5 20.275 18.5 20V10H14C12.896 10 12 9.104 12 8V3.5H6C5.724 3.5 5.5 3.725 5.5 4V11.3107C5.00728 11.2012 4.49961 11.176 4 11.235V4C4 2.896 4.896 2 6 2H12.172C12.6865 2 13.2194 2.22035 13.585 2.586L19.414 8.414C19.789 8.789 20 9.298 20 9.828V20C20 21.104 19.104 22 18 22H9.4893L10.9893 20.5H18ZM17.378 8.5L13.5 4.621V8C13.5 8.275 13.724 8.5 14 8.5H17.378ZM6.48398 22.5303C6.6304 22.6768 6.82237 22.75 7.01436 22.75C7.20636 22.75 7.39832 22.6768 7.54475 22.5303L11.953 18.122C13.3069 16.7682 13.3069 14.5732 11.953 13.2194C10.5992 11.8655 8.4042 11.8655 7.05036 13.2194L7.01436 13.2554L6.97837 13.2194C5.62453 11.8655 3.42952 11.8655 2.07568 13.2194C0.721843 14.5732 0.721843 16.7682 2.07568 18.122L6.48398 22.5303Z" 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/document_heart_24_regular.svg";

Details

Keywords

paperworkfileanaloglovefavoritevertical