Heart Pulse icon

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

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_heart_pulse_24_regular.svg" width="24" height="24" alt="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="M12.8199 5.57912L11.9992 6.40163L11.1759 5.57838C9.07688 3.47931 5.67361 3.47931 3.57455 5.57838C2.10768 7.04524 1.66588 9.14901 2.24917 10.9995H3.85417C3.19569 9.56827 3.45603 7.81821 4.63521 6.63904C6.14849 5.12575 8.602 5.12575 10.1153 6.63904L11.4727 7.99648C11.7706 8.29435 12.2553 8.28854 12.5459 7.98363L13.8806 6.63978C15.3977 5.12268 17.8528 5.12268 19.3699 6.63978C20.5498 7.81969 20.8084 9.56628 20.1486 10.9995H21.7539C22.3385 9.14845 21.8988 7.04731 20.4306 5.57912C18.3277 3.47623 14.9228 3.47623 12.8199 5.57912ZM11.4699 21.0751L4.8943 14.4995H6.85723C6.90822 14.4995 6.95886 14.4973 7.00904 14.493L12.0002 19.4842L16.988 14.4995H19.1101L12.5306 21.0751C12.2377 21.368 11.7628 21.368 11.4699 21.0751ZM9.42082 8.4141C9.29247 8.15739 9.02887 7.99645 8.74188 7.99956C8.45489 8.00266 8.19484 8.16928 8.07207 8.42871L6.38232 11.9995H2.75C2.33579 11.9995 2 12.3353 2 12.7495C2 13.1637 2.33579 13.4995 2.75 13.4995H6.85714C7.14708 13.4995 7.41105 13.3324 7.53507 13.0703L8.76856 10.4637L11.3292 15.5849C11.4465 15.8196 11.6779 15.9759 11.9394 15.9971C12.2009 16.0183 12.4544 15.9013 12.608 15.6886L15.3062 11.9527L16.4356 13.2434C16.578 13.4062 16.7837 13.4995 17 13.4995H21.25C21.6642 13.4995 22 13.1637 22 12.7495C22 12.3353 21.6642 11.9995 21.25 11.9995H17.3403L15.8144 10.2556C15.664 10.0837 15.4433 9.98967 15.215 10.0003C14.9867 10.011 14.7758 10.1251 14.642 10.3104L12.117 13.8065L9.42082 8.4141Z" 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/heart_pulse_24_regular.svg";

Details

Keywords

lovelikefollowsavepulsemedical