heart icon

heart from Font Awesome 6 Regular by Dave Gandy · Regular · Charity · CC-BY-4.0 Attribution required.

Name
heart
Set
Font Awesome 6 Regular
Style
Regular
Category
Charity
Viewbox
512×512
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 SolidheartFont Awesome RegularheartFont Awesome SolidheartFeather Iconsheart-outlineFlowbite Iconsheart-12-filledFluent UI System Iconsheart-16Fluent UI System Color Iconsheartcss.ggheartHealth IconsheartHeroIconsheartHuge IconsheartHumbleiconsheartIconParkheartIconPark OutlineheartIconoirheartIonIcons

More charity icons from Font Awesome 6 Regular

handshake

Use the heart icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="m225.8 468.2l-2.5-2.3L48.1 303.2C17.4 274.7 0 234.7 0 192.8v-3.3c0-70.4 50-130.8 119.2-144c39.4-7.6 79.7 1.5 111.8 24.1c9 6.4 17.4 13.8 25 22.3c4.2-4.8 8.7-9.2 13.5-13.3c3.7-3.2 7.5-6.2 11.5-9c32.1-22.6 72.4-31.7 111.8-24.2C462 58.6 512 119.1 512 189.5v3.3c0 41.9-17.4 81.9-48.1 110.4L288.7 465.9l-2.5 2.3c-8.2 7.6-19 11.9-30.2 11.9s-22-4.2-30.2-11.9M239.1 145c-.4-.3-.7-.7-1-1.1l-17.8-20l-.1-.1c-23.1-25.9-58-37.7-92-31.2c-46.6 8.9-80.2 49.5-80.2 96.9v3.3c0 28.5 11.9 55.8 32.8 75.2L256 430.7L431.2 268a102.7 102.7 0 0 0 32.8-75.2v-3.3c0-47.3-33.6-88-80.1-96.9c-34-6.5-69 5.4-92 31.2l-.1.1l-.1.1l-17.8 20c-.3.4-.7.7-1 1.1c-4.5 4.5-10.6 7-16.9 7s-12.4-2.5-16.9-7z"/></svg>

React

import type { SVGProps } from "react";

export function Fa6RegularHeart(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="m225.8 468.2l-2.5-2.3L48.1 303.2C17.4 274.7 0 234.7 0 192.8v-3.3c0-70.4 50-130.8 119.2-144c39.4-7.6 79.7 1.5 111.8 24.1c9 6.4 17.4 13.8 25 22.3c4.2-4.8 8.7-9.2 13.5-13.3c3.7-3.2 7.5-6.2 11.5-9c32.1-22.6 72.4-31.7 111.8-24.2C462 58.6 512 119.1 512 189.5v3.3c0 41.9-17.4 81.9-48.1 110.4L288.7 465.9l-2.5 2.3c-8.2 7.6-19 11.9-30.2 11.9s-22-4.2-30.2-11.9M239.1 145c-.4-.3-.7-.7-1-1.1l-17.8-20l-.1-.1c-23.1-25.9-58-37.7-92-31.2c-46.6 8.9-80.2 49.5-80.2 96.9v3.3c0 28.5 11.9 55.8 32.8 75.2L256 430.7L431.2 268a102.7 102.7 0 0 0 32.8-75.2v-3.3c0-47.3-33.6-88-80.1-96.9c-34-6.5-69 5.4-92 31.2l-.1.1l-.1.1l-17.8 20c-.3.4-.7.7-1 1.1c-4.5 4.5-10.6 7-16.9 7s-12.4-2.5-16.9-7z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="m225.8 468.2l-2.5-2.3L48.1 303.2C17.4 274.7 0 234.7 0 192.8v-3.3c0-70.4 50-130.8 119.2-144c39.4-7.6 79.7 1.5 111.8 24.1c9 6.4 17.4 13.8 25 22.3c4.2-4.8 8.7-9.2 13.5-13.3c3.7-3.2 7.5-6.2 11.5-9c32.1-22.6 72.4-31.7 111.8-24.2C462 58.6 512 119.1 512 189.5v3.3c0 41.9-17.4 81.9-48.1 110.4L288.7 465.9l-2.5 2.3c-8.2 7.6-19 11.9-30.2 11.9s-22-4.2-30.2-11.9M239.1 145c-.4-.3-.7-.7-1-1.1l-17.8-20l-.1-.1c-23.1-25.9-58-37.7-92-31.2c-46.6 8.9-80.2 49.5-80.2 96.9v3.3c0 28.5 11.9 55.8 32.8 75.2L256 430.7L431.2 268a102.7 102.7 0 0 0 32.8-75.2v-3.3c0-47.3-33.6-88-80.1-96.9c-34-6.5-69 5.4-92 31.2l-.1.1l-.1.1l-17.8 20c-.3.4-.7.7-1 1.1c-4.5 4.5-10.6 7-16.9 7s-12.4-2.5-16.9-7z"/></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%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m225.8%20468.2l-2.5-2.3L48.1%20303.2C17.4%20274.7%200%20234.7%200%20192.8v-3.3c0-70.4%2050-130.8%20119.2-144c39.4-7.6%2079.7%201.5%20111.8%2024.1c9%206.4%2017.4%2013.8%2025%2022.3c4.2-4.8%208.7-9.2%2013.5-13.3c3.7-3.2%207.5-6.2%2011.5-9c32.1-22.6%2072.4-31.7%20111.8-24.2C462%2058.6%20512%20119.1%20512%20189.5v3.3c0%2041.9-17.4%2081.9-48.1%20110.4L288.7%20465.9l-2.5%202.3c-8.2%207.6-19%2011.9-30.2%2011.9s-22-4.2-30.2-11.9M239.1%20145c-.4-.3-.7-.7-1-1.1l-17.8-20l-.1-.1c-23.1-25.9-58-37.7-92-31.2c-46.6%208.9-80.2%2049.5-80.2%2096.9v3.3c0%2028.5%2011.9%2055.8%2032.8%2075.2L256%20430.7L431.2%20268a102.7%20102.7%200%200%200%2032.8-75.2v-3.3c0-47.3-33.6-88-80.1-96.9c-34-6.5-69%205.4-92%2031.2l-.1.1l-.1.1l-17.8%2020c-.3.4-.7.7-1%201.1c-4.5%204.5-10.6%207-16.9%207s-12.4-2.5-16.9-7z%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%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m225.8%20468.2l-2.5-2.3L48.1%20303.2C17.4%20274.7%200%20234.7%200%20192.8v-3.3c0-70.4%2050-130.8%20119.2-144c39.4-7.6%2079.7%201.5%20111.8%2024.1c9%206.4%2017.4%2013.8%2025%2022.3c4.2-4.8%208.7-9.2%2013.5-13.3c3.7-3.2%207.5-6.2%2011.5-9c32.1-22.6%2072.4-31.7%20111.8-24.2C462%2058.6%20512%20119.1%20512%20189.5v3.3c0%2041.9-17.4%2081.9-48.1%20110.4L288.7%20465.9l-2.5%202.3c-8.2%207.6-19%2011.9-30.2%2011.9s-22-4.2-30.2-11.9M239.1%20145c-.4-.3-.7-.7-1-1.1l-17.8-20l-.1-.1c-23.1-25.9-58-37.7-92-31.2c-46.6%208.9-80.2%2049.5-80.2%2096.9v3.3c0%2028.5%2011.9%2055.8%2032.8%2075.2L256%20430.7L431.2%20268a102.7%20102.7%200%200%200%2032.8-75.2v-3.3c0-47.3-33.6-88-80.1-96.9c-34-6.5-69%205.4-92%2031.2l-.1.1l-.1.1l-17.8%2020c-.3.4-.7.7-1%201.1c-4.5%204.5-10.6%207-16.9%207s-12.4-2.5-16.9-7z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fa6-regular/heart.svg?color=%231a73e8&size=48