Heart Broken icon
Used to represent really liking an idea in chat, following in comments, or content to save for later. The Heart Broken icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Heart Broken 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 { HeartBroken24Regular, HeartBroken24Filled } from "@fluentui/react-icons";
export function Example() {
return <HeartBroken24Regular aria-label="Heart Broken" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_heart_broken_24_regular.svg" width="24" height="24" alt="Heart Broken"> 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="M11.9992 5.75319L12.8199 4.93068C14.9228 2.8278 18.3277 2.82779 20.4306 4.93068C22.53 7.03013 22.5264 10.4238 20.432 12.5299L12.5306 20.4267C12.2377 20.7196 11.7628 20.7196 11.4699 20.4267L3.57455 12.5313C1.47548 10.4323 1.47548 7.02901 3.57455 4.92994C5.67361 2.83087 9.07688 2.83087 11.1759 4.92994L11.9992 5.75319ZM12.0002 18.8357L19.3684 11.4722C20.881 9.95122 20.8836 7.50499 19.3699 5.99134C17.9197 4.5411 15.6123 4.47719 14.0865 5.79959C14.0831 5.80307 14.0797 5.80653 14.0762 5.80996L13.0686 6.80891L12.5459 7.33519C12.5185 7.364 12.4893 7.39013 12.4587 7.4136L11.2223 8.63937L14.018 11.3101C14.1639 11.4495 14.2475 11.6419 14.2498 11.8438C14.2521 12.0457 14.173 12.2399 14.0302 12.3827L11.5302 14.8827C11.2373 15.1756 10.7624 15.1756 10.4695 14.8827C10.1767 14.5898 10.1767 14.1149 10.4696 13.822L12.427 11.8646L9.6289 9.19166C9.48252 9.05182 9.39888 8.85873 9.39701 8.6563C9.39513 8.45386 9.47517 8.25926 9.61893 8.11673L10.9358 6.81114L10.1153 5.9906C8.602 4.47732 6.14849 4.47732 4.63521 5.9906C3.12192 7.50388 3.12192 9.95739 4.63521 11.4707L12.0002 18.8357Z" 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_broken_24_regular.svg";Details
| Name | Heart Broken |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_heart_broken_24_regular.svg |
| Filled file | ic_fluent_heart_broken_24_filled.svg |
| React components | HeartBroken24Regular, HeartBroken24Filled |
| License | MIT (© Microsoft Corporation) |