heart icon

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

Name
heart
Set
Font Awesome Regular
Style
Regular
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 SolidheartFeather Iconsheart-outlineFlowbite Iconsheart-12-filledFluent UI System Iconsheart-16Fluent UI System Color Iconsheartcss.ggheartHealth IconsheartHeroIconsheartHuge IconsheartHumbleiconsheartIconParkheartIconPark OutlineheartIconoirheartIonIcons

More charity icons from Font Awesome Regular

handshake

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="M442.9 144c-27.3 0-53 13.1-69 35.2l-34.4 47.6c-4.5 6.2-11.7 9.9-19.4 9.9s-14.9-3.7-19.4-9.9l-34.4-47.6c-16-22.1-41.7-35.2-69-35.2c-47 0-85.1 38.1-85.1 85.1c0 49.9 32 98.4 68.1 142.3c41.1 50 91.4 94 125.9 120.3c3.2 2.4 7.9 4.2 14 4.2s10.8-1.8 14-4.2c34.5-26.3 84.8-70.4 125.9-120.3c36.2-43.9 68.1-92.4 68.1-142.3c0-47-38.1-85.1-85.1-85.1zM335 151.1C360 116.5 400.2 96 442.9 96C516.4 96 576 155.6 576 229.1c0 68.6-42.9 128.9-79.1 172.8c-44.1 53.6-97.3 100.1-133.8 127.9c-12.3 9.4-27.5 14.1-43.1 14.1s-30.8-4.7-43.1-14.1C240.4 502 187.2 455.5 143.1 402C106.9 358.1 64 297.7 64 229.1C64 155.6 123.6 96 197.1 96c42.7 0 82.9 20.5 107.9 55.1l15 20.7z"/></svg>

React

import type { SVGProps } from "react";

export function Fa7RegularHeart(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="M442.9 144c-27.3 0-53 13.1-69 35.2l-34.4 47.6c-4.5 6.2-11.7 9.9-19.4 9.9s-14.9-3.7-19.4-9.9l-34.4-47.6c-16-22.1-41.7-35.2-69-35.2c-47 0-85.1 38.1-85.1 85.1c0 49.9 32 98.4 68.1 142.3c41.1 50 91.4 94 125.9 120.3c3.2 2.4 7.9 4.2 14 4.2s10.8-1.8 14-4.2c34.5-26.3 84.8-70.4 125.9-120.3c36.2-43.9 68.1-92.4 68.1-142.3c0-47-38.1-85.1-85.1-85.1zM335 151.1C360 116.5 400.2 96 442.9 96C516.4 96 576 155.6 576 229.1c0 68.6-42.9 128.9-79.1 172.8c-44.1 53.6-97.3 100.1-133.8 127.9c-12.3 9.4-27.5 14.1-43.1 14.1s-30.8-4.7-43.1-14.1C240.4 502 187.2 455.5 143.1 402C106.9 358.1 64 297.7 64 229.1C64 155.6 123.6 96 197.1 96c42.7 0 82.9 20.5 107.9 55.1l15 20.7z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M442.9 144c-27.3 0-53 13.1-69 35.2l-34.4 47.6c-4.5 6.2-11.7 9.9-19.4 9.9s-14.9-3.7-19.4-9.9l-34.4-47.6c-16-22.1-41.7-35.2-69-35.2c-47 0-85.1 38.1-85.1 85.1c0 49.9 32 98.4 68.1 142.3c41.1 50 91.4 94 125.9 120.3c3.2 2.4 7.9 4.2 14 4.2s10.8-1.8 14-4.2c34.5-26.3 84.8-70.4 125.9-120.3c36.2-43.9 68.1-92.4 68.1-142.3c0-47-38.1-85.1-85.1-85.1zM335 151.1C360 116.5 400.2 96 442.9 96C516.4 96 576 155.6 576 229.1c0 68.6-42.9 128.9-79.1 172.8c-44.1 53.6-97.3 100.1-133.8 127.9c-12.3 9.4-27.5 14.1-43.1 14.1s-30.8-4.7-43.1-14.1C240.4 502 187.2 455.5 143.1 402C106.9 358.1 64 297.7 64 229.1C64 155.6 123.6 96 197.1 96c42.7 0 82.9 20.5 107.9 55.1l15 20.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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M442.9%20144c-27.3%200-53%2013.1-69%2035.2l-34.4%2047.6c-4.5%206.2-11.7%209.9-19.4%209.9s-14.9-3.7-19.4-9.9l-34.4-47.6c-16-22.1-41.7-35.2-69-35.2c-47%200-85.1%2038.1-85.1%2085.1c0%2049.9%2032%2098.4%2068.1%20142.3c41.1%2050%2091.4%2094%20125.9%20120.3c3.2%202.4%207.9%204.2%2014%204.2s10.8-1.8%2014-4.2c34.5-26.3%2084.8-70.4%20125.9-120.3c36.2-43.9%2068.1-92.4%2068.1-142.3c0-47-38.1-85.1-85.1-85.1zM335%20151.1C360%20116.5%20400.2%2096%20442.9%2096C516.4%2096%20576%20155.6%20576%20229.1c0%2068.6-42.9%20128.9-79.1%20172.8c-44.1%2053.6-97.3%20100.1-133.8%20127.9c-12.3%209.4-27.5%2014.1-43.1%2014.1s-30.8-4.7-43.1-14.1C240.4%20502%20187.2%20455.5%20143.1%20402C106.9%20358.1%2064%20297.7%2064%20229.1C64%20155.6%20123.6%2096%20197.1%2096c42.7%200%2082.9%2020.5%20107.9%2055.1l15%2020.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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M442.9%20144c-27.3%200-53%2013.1-69%2035.2l-34.4%2047.6c-4.5%206.2-11.7%209.9-19.4%209.9s-14.9-3.7-19.4-9.9l-34.4-47.6c-16-22.1-41.7-35.2-69-35.2c-47%200-85.1%2038.1-85.1%2085.1c0%2049.9%2032%2098.4%2068.1%20142.3c41.1%2050%2091.4%2094%20125.9%20120.3c3.2%202.4%207.9%204.2%2014%204.2s10.8-1.8%2014-4.2c34.5-26.3%2084.8-70.4%20125.9-120.3c36.2-43.9%2068.1-92.4%2068.1-142.3c0-47-38.1-85.1-85.1-85.1zM335%20151.1C360%20116.5%20400.2%2096%20442.9%2096C516.4%2096%20576%20155.6%20576%20229.1c0%2068.6-42.9%20128.9-79.1%20172.8c-44.1%2053.6-97.3%20100.1-133.8%20127.9c-12.3%209.4-27.5%2014.1-43.1%2014.1s-30.8-4.7-43.1-14.1C240.4%20502%20187.2%20455.5%20143.1%20402C106.9%20358.1%2064%20297.7%2064%20229.1C64%20155.6%20123.6%2096%20197.1%2096c42.7%200%2082.9%2020.5%20107.9%2055.1l15%2020.7z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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