Document Heart Pulse icon

Use the Document Heart Pulse 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 { DocumentHeartPulse24Regular, DocumentHeartPulse24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_document_heart_pulse_24_regular.svg" width="24" height="24" alt="Document Heart Pulse">

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="M5.5 4.25C5.5 3.83579 5.83579 3.5 6.25 3.5H12V8C12 9.10457 12.8954 10 14 10H18.5V19.75C18.5 20.1642 18.1642 20.5 17.75 20.5H11.2302L9.73017 22H17.75C18.9926 22 20 20.9926 20 19.75V9.66421C20 9.20009 19.8156 8.75497 19.4874 8.42678L13.5732 2.51256C13.245 2.18437 12.7999 2 12.3358 2H6.25C5.00736 2 4 3.00736 4 4.25V11.2004C4.49842 11.1341 5.00562 11.1494 5.5 11.2463V4.25ZM17.4393 8.5H14C13.7239 8.5 13.5 8.27614 13.5 8V4.56066L17.4393 8.5ZM3.12228 14.2764C3.94418 13.4545 5.27673 13.4545 6.09863 14.2764L6.50158 14.6794C6.79448 14.9723 7.26935 14.9723 7.56224 14.6794L7.92929 14.3123C8.75118 13.4904 10.0837 13.4904 10.9056 14.3123C11.3674 14.7741 11.5697 15.397 11.5126 16H13.0166C13.071 15.0122 12.7209 14.0063 11.9663 13.2517C10.6125 11.8979 8.44972 11.8461 7.03399 13.0962C5.61928 11.8093 3.42827 11.8491 2.06162 13.2158C1.29788 13.9795 0.948506 15.0007 1.01351 16H2.51899C2.45027 15.3859 2.65136 14.7473 3.12228 14.2764ZM5.36916 19.5H3.24784L6.50141 22.7536C6.65761 22.9098 6.86559 22.9827 7.07012 22.9723C7.2492 22.9632 7.42565 22.8903 7.5624 22.7536L10.816 19.5H8.69463L7.0319 21.1627L5.36916 19.5ZM5.62404 15.334C5.47574 15.1115 5.22023 14.9848 4.9534 15.0014C4.68656 15.0181 4.44874 15.1755 4.32918 15.4146L3.53647 17H1.75C1.33579 17 1 17.3358 1 17.75C1 18.1642 1.33579 18.5 1.75 18.5H4C4.28408 18.5 4.54378 18.3395 4.67082 18.0854L5.09285 17.2414L6.37596 19.166C6.50489 19.3594 6.71619 19.4821 6.94805 19.4982C7.17992 19.5143 7.40614 19.422 7.56056 19.2483L9.02257 17.6035L9.71029 18.3162C9.85574 18.467 10.0576 18.55 10.267 18.5453L12.267 18.4998C12.6811 18.4904 13.0092 18.1471 12.9998 17.733C12.9904 17.3189 12.6471 16.9908 12.233 17.0002L10.5615 17.0382L9.53971 15.9792C9.39467 15.8289 9.19351 15.7459 8.98466 15.7502C8.77582 15.7544 8.57822 15.8456 8.43944 16.0017L7.08502 17.5255L5.62404 15.334Z" 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_pulse_24_regular.svg";

Details

Keywords

paperworkfileanalogmedicalfavoritelovehospitalvertical