heartbeat icon
heartbeat-bold from Phosphor by Phosphor Icons · Bold · MIT Free for personal and commercial use.
- Name
- heartbeat-bold
- Set
- Phosphor
- Style
- Bold
- Viewbox
- 256×256
- License
- MIT
5 other variants in Phosphor
The same icon in other sets
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="M71.76 148H31.7a12 12 0 1 1 0-24h33.63l12.45-18.66a12 12 0 0 1 20 0l22 33l6-9a12 12 0 0 1 10-5.34h24a12 12 0 1 1 0 24h-17.6l-12.46 18.66a12 12 0 0 1-20 0l-22-33l-6 9a12 12 0 0 1-9.96 5.34M177.91 36c-20.12 0-38 7.93-50.07 21.56C115.74 43.93 97.89 36 77.76 36a66 66 0 0 0-65.69 58.68A12 12 0 0 0 36 97.32A42 42 0 0 1 77.76 60c17.83 0 32.75 9.4 38.95 24.54a12 12 0 0 0 22.25 0C145.16 69.4 160.08 60 177.91 60A42.08 42.08 0 0 1 220 102c0 29.42-25.86 57.77-47.56 76.36a329 329 0 0 1-44.58 31.81c-10.87-6.45-35.37-22-56.51-42.73a12 12 0 1 0-16.84 17.12c30.39 29.81 66.15 49.2 67.66 50a12.06 12.06 0 0 0 11.39 0C138 232.14 244 174.34 244 102a66.12 66.12 0 0 0-66.09-66"/></svg>
React
import type { SVGProps } from "react";
export function PhHeartbeatBold(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="M71.76 148H31.7a12 12 0 1 1 0-24h33.63l12.45-18.66a12 12 0 0 1 20 0l22 33l6-9a12 12 0 0 1 10-5.34h24a12 12 0 1 1 0 24h-17.6l-12.46 18.66a12 12 0 0 1-20 0l-22-33l-6 9a12 12 0 0 1-9.96 5.34M177.91 36c-20.12 0-38 7.93-50.07 21.56C115.74 43.93 97.89 36 77.76 36a66 66 0 0 0-65.69 58.68A12 12 0 0 0 36 97.32A42 42 0 0 1 77.76 60c17.83 0 32.75 9.4 38.95 24.54a12 12 0 0 0 22.25 0C145.16 69.4 160.08 60 177.91 60A42.08 42.08 0 0 1 220 102c0 29.42-25.86 57.77-47.56 76.36a329 329 0 0 1-44.58 31.81c-10.87-6.45-35.37-22-56.51-42.73a12 12 0 1 0-16.84 17.12c30.39 29.81 66.15 49.2 67.66 50a12.06 12.06 0 0 0 11.39 0C138 232.14 244 174.34 244 102a66.12 66.12 0 0 0-66.09-66"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M71.76 148H31.7a12 12 0 1 1 0-24h33.63l12.45-18.66a12 12 0 0 1 20 0l22 33l6-9a12 12 0 0 1 10-5.34h24a12 12 0 1 1 0 24h-17.6l-12.46 18.66a12 12 0 0 1-20 0l-22-33l-6 9a12 12 0 0 1-9.96 5.34M177.91 36c-20.12 0-38 7.93-50.07 21.56C115.74 43.93 97.89 36 77.76 36a66 66 0 0 0-65.69 58.68A12 12 0 0 0 36 97.32A42 42 0 0 1 77.76 60c17.83 0 32.75 9.4 38.95 24.54a12 12 0 0 0 22.25 0C145.16 69.4 160.08 60 177.91 60A42.08 42.08 0 0 1 220 102c0 29.42-25.86 57.77-47.56 76.36a329 329 0 0 1-44.58 31.81c-10.87-6.45-35.37-22-56.51-42.73a12 12 0 1 0-16.84 17.12c30.39 29.81 66.15 49.2 67.66 50a12.06 12.06 0 0 0 11.39 0C138 232.14 244 174.34 244 102a66.12 66.12 0 0 0-66.09-66"/></svg> </template>
CSS
.icon-heartbeat-bold {
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%22M71.76%20148H31.7a12%2012%200%201%201%200-24h33.63l12.45-18.66a12%2012%200%200%201%2020%200l22%2033l6-9a12%2012%200%200%201%2010-5.34h24a12%2012%200%201%201%200%2024h-17.6l-12.46%2018.66a12%2012%200%200%201-20%200l-22-33l-6%209a12%2012%200%200%201-9.96%205.34M177.91%2036c-20.12%200-38%207.93-50.07%2021.56C115.74%2043.93%2097.89%2036%2077.76%2036a66%2066%200%200%200-65.69%2058.68A12%2012%200%200%200%2036%2097.32A42%2042%200%200%201%2077.76%2060c17.83%200%2032.75%209.4%2038.95%2024.54a12%2012%200%200%200%2022.25%200C145.16%2069.4%20160.08%2060%20177.91%2060A42.08%2042.08%200%200%201%20220%20102c0%2029.42-25.86%2057.77-47.56%2076.36a329%20329%200%200%201-44.58%2031.81c-10.87-6.45-35.37-22-56.51-42.73a12%2012%200%201%200-16.84%2017.12c30.39%2029.81%2066.15%2049.2%2067.66%2050a12.06%2012.06%200%200%200%2011.39%200C138%20232.14%20244%20174.34%20244%20102a66.12%2066.12%200%200%200-66.09-66%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%22M71.76%20148H31.7a12%2012%200%201%201%200-24h33.63l12.45-18.66a12%2012%200%200%201%2020%200l22%2033l6-9a12%2012%200%200%201%2010-5.34h24a12%2012%200%201%201%200%2024h-17.6l-12.46%2018.66a12%2012%200%200%201-20%200l-22-33l-6%209a12%2012%200%200%201-9.96%205.34M177.91%2036c-20.12%200-38%207.93-50.07%2021.56C115.74%2043.93%2097.89%2036%2077.76%2036a66%2066%200%200%200-65.69%2058.68A12%2012%200%200%200%2036%2097.32A42%2042%200%200%201%2077.76%2060c17.83%200%2032.75%209.4%2038.95%2024.54a12%2012%200%200%200%2022.25%200C145.16%2069.4%20160.08%2060%20177.91%2060A42.08%2042.08%200%200%201%20220%20102c0%2029.42-25.86%2057.77-47.56%2076.36a329%20329%200%200%201-44.58%2031.81c-10.87-6.45-35.37-22-56.51-42.73a12%2012%200%201%200-16.84%2017.12c30.39%2029.81%2066.15%2049.2%2067.66%2050a12.06%2012.06%200%200%200%2011.39%200C138%20232.14%20244%20174.34%20244%20102a66.12%2066.12%200%200%200-66.09-66%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/heartbeat-bold.svg?color=%231a73e8&size=48
