heartbeat icon

heartbeat-thin from Phosphor by Phosphor Icons · Thin · MIT Free for personal and commercial use.

Name
heartbeat-thin
Set
Phosphor
Style
Thin
Viewbox
256×256
License
MIT

5 other variants in Phosphor

heartbeatheartbeat-boldheartbeat-duotoneheartbeat-fillheartbeat-light

The same icon in other sets

heartbeatFont Awesome SolidheartbeatHealth IconsheartbeatIconParkheartbeatIconPark OutlineheartbeatLine Awesomeheartbeat-fillMingCute IconheartbeatTabler IconsheartbeatUnicons

Use the heartbeat icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M72 140H32a4 4 0 0 1 0-8h37.86l14.81-22.22a4 4 0 0 1 6.66 0l28.67 43l12.67-19A4 4 0 0 1 136 132h24a4 4 0 0 1 0 8h-21.86l-14.81 22.22a4 4 0 0 1-6.66 0L88 119.21l-12.67 19A4 4 0 0 1 72 140m106-96c-21.44 0-39.92 10.19-50 27.07C117.92 54.19 99.44 44 78 44a58.07 58.07 0 0 0-58 58v2.13a4 4 0 1 0 8-.26V102a50.06 50.06 0 0 1 50-50c21.11 0 38.85 11.31 46.3 29.51a4 4 0 0 0 7.4 0C139.15 63.31 156.89 52 178 52a50.06 50.06 0 0 1 50 50c0 58-86 109.46-100 117.42c-8.47-4.82-43.5-25.61-69.63-54.12a4 4 0 0 0-5.9 5.4c30.72 33.52 71.9 55.89 73.63 56.82a4 4 0 0 0 3.8 0a334 334 0 0 0 52.7-36.73C218 160.47 236 130.59 236 102a58.07 58.07 0 0 0-58-58"/></svg>

React

import type { SVGProps } from "react";

export function PhHeartbeatThin(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M72 140H32a4 4 0 0 1 0-8h37.86l14.81-22.22a4 4 0 0 1 6.66 0l28.67 43l12.67-19A4 4 0 0 1 136 132h24a4 4 0 0 1 0 8h-21.86l-14.81 22.22a4 4 0 0 1-6.66 0L88 119.21l-12.67 19A4 4 0 0 1 72 140m106-96c-21.44 0-39.92 10.19-50 27.07C117.92 54.19 99.44 44 78 44a58.07 58.07 0 0 0-58 58v2.13a4 4 0 1 0 8-.26V102a50.06 50.06 0 0 1 50-50c21.11 0 38.85 11.31 46.3 29.51a4 4 0 0 0 7.4 0C139.15 63.31 156.89 52 178 52a50.06 50.06 0 0 1 50 50c0 58-86 109.46-100 117.42c-8.47-4.82-43.5-25.61-69.63-54.12a4 4 0 0 0-5.9 5.4c30.72 33.52 71.9 55.89 73.63 56.82a4 4 0 0 0 3.8 0a334 334 0 0 0 52.7-36.73C218 160.47 236 130.59 236 102a58.07 58.07 0 0 0-58-58"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M72 140H32a4 4 0 0 1 0-8h37.86l14.81-22.22a4 4 0 0 1 6.66 0l28.67 43l12.67-19A4 4 0 0 1 136 132h24a4 4 0 0 1 0 8h-21.86l-14.81 22.22a4 4 0 0 1-6.66 0L88 119.21l-12.67 19A4 4 0 0 1 72 140m106-96c-21.44 0-39.92 10.19-50 27.07C117.92 54.19 99.44 44 78 44a58.07 58.07 0 0 0-58 58v2.13a4 4 0 1 0 8-.26V102a50.06 50.06 0 0 1 50-50c21.11 0 38.85 11.31 46.3 29.51a4 4 0 0 0 7.4 0C139.15 63.31 156.89 52 178 52a50.06 50.06 0 0 1 50 50c0 58-86 109.46-100 117.42c-8.47-4.82-43.5-25.61-69.63-54.12a4 4 0 0 0-5.9 5.4c30.72 33.52 71.9 55.89 73.63 56.82a4 4 0 0 0 3.8 0a334 334 0 0 0 52.7-36.73C218 160.47 236 130.59 236 102a58.07 58.07 0 0 0-58-58"/></svg>
</template>

CSS

.icon-heartbeat-thin {
  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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M72%20140H32a4%204%200%200%201%200-8h37.86l14.81-22.22a4%204%200%200%201%206.66%200l28.67%2043l12.67-19A4%204%200%200%201%20136%20132h24a4%204%200%200%201%200%208h-21.86l-14.81%2022.22a4%204%200%200%201-6.66%200L88%20119.21l-12.67%2019A4%204%200%200%201%2072%20140m106-96c-21.44%200-39.92%2010.19-50%2027.07C117.92%2054.19%2099.44%2044%2078%2044a58.07%2058.07%200%200%200-58%2058v2.13a4%204%200%201%200%208-.26V102a50.06%2050.06%200%200%201%2050-50c21.11%200%2038.85%2011.31%2046.3%2029.51a4%204%200%200%200%207.4%200C139.15%2063.31%20156.89%2052%20178%2052a50.06%2050.06%200%200%201%2050%2050c0%2058-86%20109.46-100%20117.42c-8.47-4.82-43.5-25.61-69.63-54.12a4%204%200%200%200-5.9%205.4c30.72%2033.52%2071.9%2055.89%2073.63%2056.82a4%204%200%200%200%203.8%200a334%20334%200%200%200%2052.7-36.73C218%20160.47%20236%20130.59%20236%20102a58.07%2058.07%200%200%200-58-58%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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M72%20140H32a4%204%200%200%201%200-8h37.86l14.81-22.22a4%204%200%200%201%206.66%200l28.67%2043l12.67-19A4%204%200%200%201%20136%20132h24a4%204%200%200%201%200%208h-21.86l-14.81%2022.22a4%204%200%200%201-6.66%200L88%20119.21l-12.67%2019A4%204%200%200%201%2072%20140m106-96c-21.44%200-39.92%2010.19-50%2027.07C117.92%2054.19%2099.44%2044%2078%2044a58.07%2058.07%200%200%200-58%2058v2.13a4%204%200%201%200%208-.26V102a50.06%2050.06%200%200%201%2050-50c21.11%200%2038.85%2011.31%2046.3%2029.51a4%204%200%200%200%207.4%200C139.15%2063.31%20156.89%2052%20178%2052a50.06%2050.06%200%200%201%2050%2050c0%2058-86%20109.46-100%20117.42c-8.47-4.82-43.5-25.61-69.63-54.12a4%204%200%200%200-5.9%205.4c30.72%2033.52%2071.9%2055.89%2073.63%2056.82a4%204%200%200%200%203.8%200a334%20334%200%200%200%2052.7-36.73C218%20160.47%20236%20130.59%20236%20102a58.07%2058.07%200%200%200-58-58%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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