heartbeat icon

heartbeat from Font Awesome Solid by Dave Gandy · Solid · Fitness · CC-BY-4.0 Attribution required.

Name
heartbeat
Set
Font Awesome Solid
Style
Solid
Category
Fitness
Viewbox
640×640
License
CC BY 4.0

The same icon in other sets

heartbeatHealth IconsheartbeatIconParkheartbeatIconPark OutlineheartbeatLine Awesomeheartbeat-fillMingCute IconheartbeatPhosphorheartbeatTabler IconsheartbeatUnicons

More fitness icons from Font Awesome Solid

bicyclerunningskatingskiingskiing-nordicsnowboardingspaswimmerwalking

Use the heartbeat icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="m320 171.9l-15-20.8C280 116.5 239.9 96 197.1 96C123.6 96 64 155.6 64 229.1v2.6c0 23.6 6.2 48 16.6 72.3h106c3.2 0 6.1-1.9 7.4-4.9l31.8-76.3c3.7-8.8 12.3-14.6 21.8-14.8s18.3 5.4 22.2 14.1L321.1 336l41.4-82.8c4.1-8.1 12.4-13.3 21.5-13.3s17.4 5.1 21.5 13.3l23.2 46.3c1.4 2.7 4.1 4.4 7.2 4.4h123.6c10.5-24.3 16.6-48.7 16.6-72.3V229c-.1-73.4-59.7-133-133.2-133c-42.7 0-82.9 20.5-107.9 55.1l-15 20.7zM533.6 352h-97.8c-21.2 0-40.6-12-50.1-31l-1.7-3.4l-42.5 85.1c-4.1 8.3-12.7 13.5-22 13.3s-17.6-5.7-21.4-14.1l-49.3-109.5l-10.5 25.2c-8.7 20.9-29.1 34.5-51.7 34.5h-80.2c47.2 73.8 123 141.7 170.4 177.9c12.4 9.4 27.6 14.1 43.1 14.1s30.8-4.6 43.1-14.1c47.6-36.3 123.4-104.2 170.6-178"/></svg>

React

import type { SVGProps } from "react";

export function Fa7SolidHeartbeat(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="m320 171.9l-15-20.8C280 116.5 239.9 96 197.1 96C123.6 96 64 155.6 64 229.1v2.6c0 23.6 6.2 48 16.6 72.3h106c3.2 0 6.1-1.9 7.4-4.9l31.8-76.3c3.7-8.8 12.3-14.6 21.8-14.8s18.3 5.4 22.2 14.1L321.1 336l41.4-82.8c4.1-8.1 12.4-13.3 21.5-13.3s17.4 5.1 21.5 13.3l23.2 46.3c1.4 2.7 4.1 4.4 7.2 4.4h123.6c10.5-24.3 16.6-48.7 16.6-72.3V229c-.1-73.4-59.7-133-133.2-133c-42.7 0-82.9 20.5-107.9 55.1l-15 20.7zM533.6 352h-97.8c-21.2 0-40.6-12-50.1-31l-1.7-3.4l-42.5 85.1c-4.1 8.3-12.7 13.5-22 13.3s-17.6-5.7-21.4-14.1l-49.3-109.5l-10.5 25.2c-8.7 20.9-29.1 34.5-51.7 34.5h-80.2c47.2 73.8 123 141.7 170.4 177.9c12.4 9.4 27.6 14.1 43.1 14.1s30.8-4.6 43.1-14.1c47.6-36.3 123.4-104.2 170.6-178"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="m320 171.9l-15-20.8C280 116.5 239.9 96 197.1 96C123.6 96 64 155.6 64 229.1v2.6c0 23.6 6.2 48 16.6 72.3h106c3.2 0 6.1-1.9 7.4-4.9l31.8-76.3c3.7-8.8 12.3-14.6 21.8-14.8s18.3 5.4 22.2 14.1L321.1 336l41.4-82.8c4.1-8.1 12.4-13.3 21.5-13.3s17.4 5.1 21.5 13.3l23.2 46.3c1.4 2.7 4.1 4.4 7.2 4.4h123.6c10.5-24.3 16.6-48.7 16.6-72.3V229c-.1-73.4-59.7-133-133.2-133c-42.7 0-82.9 20.5-107.9 55.1l-15 20.7zM533.6 352h-97.8c-21.2 0-40.6-12-50.1-31l-1.7-3.4l-42.5 85.1c-4.1 8.3-12.7 13.5-22 13.3s-17.6-5.7-21.4-14.1l-49.3-109.5l-10.5 25.2c-8.7 20.9-29.1 34.5-51.7 34.5h-80.2c47.2 73.8 123 141.7 170.4 177.9c12.4 9.4 27.6 14.1 43.1 14.1s30.8-4.6 43.1-14.1c47.6-36.3 123.4-104.2 170.6-178"/></svg>
</template>

CSS

.icon-heartbeat {
  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%22m320%20171.9l-15-20.8C280%20116.5%20239.9%2096%20197.1%2096C123.6%2096%2064%20155.6%2064%20229.1v2.6c0%2023.6%206.2%2048%2016.6%2072.3h106c3.2%200%206.1-1.9%207.4-4.9l31.8-76.3c3.7-8.8%2012.3-14.6%2021.8-14.8s18.3%205.4%2022.2%2014.1L321.1%20336l41.4-82.8c4.1-8.1%2012.4-13.3%2021.5-13.3s17.4%205.1%2021.5%2013.3l23.2%2046.3c1.4%202.7%204.1%204.4%207.2%204.4h123.6c10.5-24.3%2016.6-48.7%2016.6-72.3V229c-.1-73.4-59.7-133-133.2-133c-42.7%200-82.9%2020.5-107.9%2055.1l-15%2020.7zM533.6%20352h-97.8c-21.2%200-40.6-12-50.1-31l-1.7-3.4l-42.5%2085.1c-4.1%208.3-12.7%2013.5-22%2013.3s-17.6-5.7-21.4-14.1l-49.3-109.5l-10.5%2025.2c-8.7%2020.9-29.1%2034.5-51.7%2034.5h-80.2c47.2%2073.8%20123%20141.7%20170.4%20177.9c12.4%209.4%2027.6%2014.1%2043.1%2014.1s30.8-4.6%2043.1-14.1c47.6-36.3%20123.4-104.2%20170.6-178%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%22m320%20171.9l-15-20.8C280%20116.5%20239.9%2096%20197.1%2096C123.6%2096%2064%20155.6%2064%20229.1v2.6c0%2023.6%206.2%2048%2016.6%2072.3h106c3.2%200%206.1-1.9%207.4-4.9l31.8-76.3c3.7-8.8%2012.3-14.6%2021.8-14.8s18.3%205.4%2022.2%2014.1L321.1%20336l41.4-82.8c4.1-8.1%2012.4-13.3%2021.5-13.3s17.4%205.1%2021.5%2013.3l23.2%2046.3c1.4%202.7%204.1%204.4%207.2%204.4h123.6c10.5-24.3%2016.6-48.7%2016.6-72.3V229c-.1-73.4-59.7-133-133.2-133c-42.7%200-82.9%2020.5-107.9%2055.1l-15%2020.7zM533.6%20352h-97.8c-21.2%200-40.6-12-50.1-31l-1.7-3.4l-42.5%2085.1c-4.1%208.3-12.7%2013.5-22%2013.3s-17.6-5.7-21.4-14.1l-49.3-109.5l-10.5%2025.2c-8.7%2020.9-29.1%2034.5-51.7%2034.5h-80.2c47.2%2073.8%20123%20141.7%20170.4%20177.9c12.4%209.4%2027.6%2014.1%2043.1%2014.1s30.8-4.6%2043.1-14.1c47.6-36.3%20123.4-104.2%20170.6-178%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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