Heart Off icon
Used to represent really liking an idea in chat, following in comments, or content to save for later. The Heart Off 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 Off 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 { HeartOff24Regular, HeartOff24Filled } from "@fluentui/react-icons";
export function Example() {
return <HeartOff24Regular aria-label="Heart Off" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_heart_off_24_regular.svg" width="24" height="24" alt="Heart Off"> 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="M3.28034 2.21968C2.98745 1.92678 2.51257 1.92677 2.21968 2.21966C1.92678 2.51255 1.92677 2.98743 2.21966 3.28032L4.07525 5.13594C3.90147 5.27142 3.73411 5.41906 3.5743 5.57886C1.47523 7.67793 1.47523 11.0812 3.5743 13.1803L11.4697 21.0756C11.7626 21.3685 12.2374 21.3685 12.5303 21.0756L16.2736 17.3345L20.7194 21.7805C21.0123 22.0734 21.4872 22.0734 21.7801 21.7805C22.073 21.4876 22.073 21.0127 21.7801 20.7198L3.28034 2.21968ZM15.2129 16.2738L12 19.4846L4.63496 12.1196C3.12168 10.6063 3.12168 8.15281 4.63496 6.63952C4.79589 6.4786 4.96744 6.33479 5.14737 6.20809L15.2129 16.2738ZM19.3682 12.1211L17.3349 14.1531L18.3956 15.2138L20.4318 13.1788C22.5262 11.0728 22.5298 7.67906 20.4303 5.57961C18.3274 3.47672 14.9226 3.47672 12.8197 5.57961L11.999 6.40211L11.1757 5.57886C10.0791 4.48222 8.62644 3.95851 7.18981 4.00773L9.08133 5.8993C9.45464 6.08237 9.80462 6.32911 10.115 6.63952L11.4725 7.99697C11.7703 8.29483 12.255 8.28903 12.5457 7.98412L13.8803 6.64027C15.3974 5.12317 17.8526 5.12316 19.3697 6.64027C20.8833 8.15391 20.8807 10.6001 19.3682 12.1211Z" 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_off_24_regular.svg";Details
| Name | Heart Off |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_heart_off_24_regular.svg |
| Filled file | ic_fluent_heart_off_24_filled.svg |
| React components | HeartOff24Regular, HeartOff24Filled |
| License | MIT (© Microsoft Corporation) |