heart icon
heart-bold from Phosphor by Phosphor Icons · Bold · MIT Free for personal and commercial use.
- Name
- heart-bold
- Set
- Phosphor
- Style
- Bold
- Viewbox
- 256×256
- License
- MIT
5 other variants in Phosphor
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 RegularheartFont Awesome SolidheartFeather Iconsheart-outlineFlowbite Iconsheart-12-filledFluent UI System Iconsheart-16Fluent UI System Color Iconsheartcss.ggheartHealth IconsheartHeroIconsheartHuge IconsheartHumbleiconsheartIconParkheartIconPark OutlineheartIconoir
Related icons in Phosphor
Use the heart icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M178 36c-20.09 0-37.92 7.93-50 21.56C115.92 43.93 98.09 36 78 36a66.08 66.08 0 0 0-66 66c0 72.34 105.81 130.14 110.31 132.57a12 12 0 0 0 11.38 0C138.19 232.14 244 174.34 244 102a66.08 66.08 0 0 0-66-66m-5.49 142.36a328.7 328.7 0 0 1-44.51 31.8a328.7 328.7 0 0 1-44.51-31.8C61.82 159.77 36 131.42 36 102a42 42 0 0 1 42-42c17.8 0 32.7 9.4 38.89 24.54a12 12 0 0 0 22.22 0C145.3 69.4 160.2 60 178 60a42 42 0 0 1 42 42c0 29.42-25.82 57.77-47.49 76.36"/></svg>
React
import type { SVGProps } from "react";
export function PhHeartBold(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="M178 36c-20.09 0-37.92 7.93-50 21.56C115.92 43.93 98.09 36 78 36a66.08 66.08 0 0 0-66 66c0 72.34 105.81 130.14 110.31 132.57a12 12 0 0 0 11.38 0C138.19 232.14 244 174.34 244 102a66.08 66.08 0 0 0-66-66m-5.49 142.36a328.7 328.7 0 0 1-44.51 31.8a328.7 328.7 0 0 1-44.51-31.8C61.82 159.77 36 131.42 36 102a42 42 0 0 1 42-42c17.8 0 32.7 9.4 38.89 24.54a12 12 0 0 0 22.22 0C145.3 69.4 160.2 60 178 60a42 42 0 0 1 42 42c0 29.42-25.82 57.77-47.49 76.36"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M178 36c-20.09 0-37.92 7.93-50 21.56C115.92 43.93 98.09 36 78 36a66.08 66.08 0 0 0-66 66c0 72.34 105.81 130.14 110.31 132.57a12 12 0 0 0 11.38 0C138.19 232.14 244 174.34 244 102a66.08 66.08 0 0 0-66-66m-5.49 142.36a328.7 328.7 0 0 1-44.51 31.8a328.7 328.7 0 0 1-44.51-31.8C61.82 159.77 36 131.42 36 102a42 42 0 0 1 42-42c17.8 0 32.7 9.4 38.89 24.54a12 12 0 0 0 22.22 0C145.3 69.4 160.2 60 178 60a42 42 0 0 1 42 42c0 29.42-25.82 57.77-47.49 76.36"/></svg> </template>
CSS
.icon-heart-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%22M178%2036c-20.09%200-37.92%207.93-50%2021.56C115.92%2043.93%2098.09%2036%2078%2036a66.08%2066.08%200%200%200-66%2066c0%2072.34%20105.81%20130.14%20110.31%20132.57a12%2012%200%200%200%2011.38%200C138.19%20232.14%20244%20174.34%20244%20102a66.08%2066.08%200%200%200-66-66m-5.49%20142.36a328.7%20328.7%200%200%201-44.51%2031.8a328.7%20328.7%200%200%201-44.51-31.8C61.82%20159.77%2036%20131.42%2036%20102a42%2042%200%200%201%2042-42c17.8%200%2032.7%209.4%2038.89%2024.54a12%2012%200%200%200%2022.22%200C145.3%2069.4%20160.2%2060%20178%2060a42%2042%200%200%201%2042%2042c0%2029.42-25.82%2057.77-47.49%2076.36%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%22M178%2036c-20.09%200-37.92%207.93-50%2021.56C115.92%2043.93%2098.09%2036%2078%2036a66.08%2066.08%200%200%200-66%2066c0%2072.34%20105.81%20130.14%20110.31%20132.57a12%2012%200%200%200%2011.38%200C138.19%20232.14%20244%20174.34%20244%20102a66.08%2066.08%200%200%200-66-66m-5.49%20142.36a328.7%20328.7%200%200%201-44.51%2031.8a328.7%20328.7%200%200%201-44.51-31.8C61.82%20159.77%2036%20131.42%2036%20102a42%2042%200%200%201%2042-42c17.8%200%2032.7%209.4%2038.89%2024.54a12%2012%200%200%200%2022.22%200C145.3%2069.4%20160.2%2060%20178%2060a42%2042%200%200%201%2042%2042c0%2029.42-25.82%2057.77-47.49%2076.36%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/heart-bold.svg?color=%231a73e8&size=48
