heart icon
heart from Font Awesome Solid by Dave Gandy · Solid · Charity · CC-BY-4.0 Attribution required.
- Name
- heart
- Set
- Font Awesome Solid
- Style
- Solid
- Category
- Charity
- Viewbox
- 640×640
- License
- CC BY 4.0
The same icon in other sets
heartAkar Iconsheart-filledAnt Design IconsheartBootstrap IconsheartBoxIcons v2heartBoxIcons v2 SolidheartCodiconsheart-fillEva IconsheartFramework7 IconsheartFont Awesome 6 RegularheartFont Awesome 6 SolidheartFont Awesome RegularheartFeather Iconsheart-outlineFlowbite Iconsheart-12-filledFluent UI System Iconsheart-16Fluent UI System Color Iconsheartcss.ggheartHealth IconsheartHeroIconsheartHuge IconsheartHumbleiconsheartIconParkheartIconPark OutlineheartIconoirheartIonIcons
More charity icons from Font Awesome Solid
dollar-signdonategifthand-holding-hearthand-holding-usdhand-holding-waterhands-helpinghandshakeleafparachute-boxpiggy-bankribbonseedlingheart-brokenheart-circle-boltheart-circle-checkheart-circle-exclamationheart-circle-minusheart-circle-plusheart-circle-xmarkheart-crackheart-music-camera-boltheart-pulse
Use the heart icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="m305 151.1l15 20.7l15-20.7C360 116.5 400.2 96 442.9 96C516.4 96 576 155.6 576 229.1v2.6c0 112.2-139.9 242.5-212.9 298.2c-12.4 9.4-27.6 14.1-43.1 14.1s-30.8-4.6-43.1-14.1C203.9 474.2 64 343.9 64 231.7v-2.6C64 155.6 123.6 96 197.1 96c42.7 0 82.9 20.5 107.9 55.1"/></svg>
React
import type { SVGProps } from "react";
export function Fa7SolidHeart(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="m305 151.1l15 20.7l15-20.7C360 116.5 400.2 96 442.9 96C516.4 96 576 155.6 576 229.1v2.6c0 112.2-139.9 242.5-212.9 298.2c-12.4 9.4-27.6 14.1-43.1 14.1s-30.8-4.6-43.1-14.1C203.9 474.2 64 343.9 64 231.7v-2.6C64 155.6 123.6 96 197.1 96c42.7 0 82.9 20.5 107.9 55.1"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="m305 151.1l15 20.7l15-20.7C360 116.5 400.2 96 442.9 96C516.4 96 576 155.6 576 229.1v2.6c0 112.2-139.9 242.5-212.9 298.2c-12.4 9.4-27.6 14.1-43.1 14.1s-30.8-4.6-43.1-14.1C203.9 474.2 64 343.9 64 231.7v-2.6C64 155.6 123.6 96 197.1 96c42.7 0 82.9 20.5 107.9 55.1"/></svg> </template>
CSS
.icon-heart {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m305%20151.1l15%2020.7l15-20.7C360%20116.5%20400.2%2096%20442.9%2096C516.4%2096%20576%20155.6%20576%20229.1v2.6c0%20112.2-139.9%20242.5-212.9%20298.2c-12.4%209.4-27.6%2014.1-43.1%2014.1s-30.8-4.6-43.1-14.1C203.9%20474.2%2064%20343.9%2064%20231.7v-2.6C64%20155.6%20123.6%2096%20197.1%2096c42.7%200%2082.9%2020.5%20107.9%2055.1%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m305%20151.1l15%2020.7l15-20.7C360%20116.5%20400.2%2096%20442.9%2096C516.4%2096%20576%20155.6%20576%20229.1v2.6c0%20112.2-139.9%20242.5-212.9%20298.2c-12.4%209.4-27.6%2014.1-43.1%2014.1s-30.8-4.6-43.1-14.1C203.9%20474.2%2064%20343.9%2064%20231.7v-2.6C64%20155.6%20123.6%2096%20197.1%2096c42.7%200%2082.9%2020.5%20107.9%2055.1%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fa7-solid/heart.svg?color=%231a73e8&size=48
