heart half icon
heart-half-bold from Phosphor by Phosphor Icons · Bold · MIT Free for personal and commercial use.
- Name
- heart-half-bold
- Set
- Phosphor
- Style
- Bold
- Viewbox
- 256×256
- License
- MIT
5 other variants in Phosphor
The same icon in other sets
Related icons in Phosphor
Use the heart half icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M170.21 60.72a12 12 0 0 0-4.42-23.59C150.5 40 137.49 47.2 128.08 57.66C116 44 98.14 36 78 36a66.08 66.08 0 0 0-66 66c0 31 18.91 63 56.2 94.87a342.7 342.7 0 0 0 54.11 37.7A12.1 12.1 0 0 0 128 236a11.9 11.9 0 0 0 5.68-1.46A340 340 0 0 0 175.32 207a12 12 0 0 0-14.64-19A334 334 0 0 1 140 202.68V82.55c5.43-11.32 16.31-19.23 30.21-21.83M116 202.66a319 319 0 0 1-32.51-24.3C61.82 159.77 36 131.42 36 102a42 42 0 0 1 42-42c17 0 31.35 8.57 38 22.52Zm117-94.73a12 12 0 0 1-13.25-10.61a41.89 41.89 0 0 0-18.41-30.25a12 12 0 0 1 13.34-19.95a65.84 65.84 0 0 1 28.92 47.56a12 12 0 0 1-10.6 13.25m1 33.42c-5.84 11.72-14.33 23.63-25.23 35.43a12 12 0 0 1-17.62-16.29c9.36-10.13 16.55-20.17 21.38-29.84a12 12 0 1 1 21.47 10.7"/></svg>
React
import type { SVGProps } from "react";
export function PhHeartHalfBold(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="M170.21 60.72a12 12 0 0 0-4.42-23.59C150.5 40 137.49 47.2 128.08 57.66C116 44 98.14 36 78 36a66.08 66.08 0 0 0-66 66c0 31 18.91 63 56.2 94.87a342.7 342.7 0 0 0 54.11 37.7A12.1 12.1 0 0 0 128 236a11.9 11.9 0 0 0 5.68-1.46A340 340 0 0 0 175.32 207a12 12 0 0 0-14.64-19A334 334 0 0 1 140 202.68V82.55c5.43-11.32 16.31-19.23 30.21-21.83M116 202.66a319 319 0 0 1-32.51-24.3C61.82 159.77 36 131.42 36 102a42 42 0 0 1 42-42c17 0 31.35 8.57 38 22.52Zm117-94.73a12 12 0 0 1-13.25-10.61a41.89 41.89 0 0 0-18.41-30.25a12 12 0 0 1 13.34-19.95a65.84 65.84 0 0 1 28.92 47.56a12 12 0 0 1-10.6 13.25m1 33.42c-5.84 11.72-14.33 23.63-25.23 35.43a12 12 0 0 1-17.62-16.29c9.36-10.13 16.55-20.17 21.38-29.84a12 12 0 1 1 21.47 10.7"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M170.21 60.72a12 12 0 0 0-4.42-23.59C150.5 40 137.49 47.2 128.08 57.66C116 44 98.14 36 78 36a66.08 66.08 0 0 0-66 66c0 31 18.91 63 56.2 94.87a342.7 342.7 0 0 0 54.11 37.7A12.1 12.1 0 0 0 128 236a11.9 11.9 0 0 0 5.68-1.46A340 340 0 0 0 175.32 207a12 12 0 0 0-14.64-19A334 334 0 0 1 140 202.68V82.55c5.43-11.32 16.31-19.23 30.21-21.83M116 202.66a319 319 0 0 1-32.51-24.3C61.82 159.77 36 131.42 36 102a42 42 0 0 1 42-42c17 0 31.35 8.57 38 22.52Zm117-94.73a12 12 0 0 1-13.25-10.61a41.89 41.89 0 0 0-18.41-30.25a12 12 0 0 1 13.34-19.95a65.84 65.84 0 0 1 28.92 47.56a12 12 0 0 1-10.6 13.25m1 33.42c-5.84 11.72-14.33 23.63-25.23 35.43a12 12 0 0 1-17.62-16.29c9.36-10.13 16.55-20.17 21.38-29.84a12 12 0 1 1 21.47 10.7"/></svg> </template>
CSS
.icon-heart-half-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%22M170.21%2060.72a12%2012%200%200%200-4.42-23.59C150.5%2040%20137.49%2047.2%20128.08%2057.66C116%2044%2098.14%2036%2078%2036a66.08%2066.08%200%200%200-66%2066c0%2031%2018.91%2063%2056.2%2094.87a342.7%20342.7%200%200%200%2054.11%2037.7A12.1%2012.1%200%200%200%20128%20236a11.9%2011.9%200%200%200%205.68-1.46A340%20340%200%200%200%20175.32%20207a12%2012%200%200%200-14.64-19A334%20334%200%200%201%20140%20202.68V82.55c5.43-11.32%2016.31-19.23%2030.21-21.83M116%20202.66a319%20319%200%200%201-32.51-24.3C61.82%20159.77%2036%20131.42%2036%20102a42%2042%200%200%201%2042-42c17%200%2031.35%208.57%2038%2022.52Zm117-94.73a12%2012%200%200%201-13.25-10.61a41.89%2041.89%200%200%200-18.41-30.25a12%2012%200%200%201%2013.34-19.95a65.84%2065.84%200%200%201%2028.92%2047.56a12%2012%200%200%201-10.6%2013.25m1%2033.42c-5.84%2011.72-14.33%2023.63-25.23%2035.43a12%2012%200%200%201-17.62-16.29c9.36-10.13%2016.55-20.17%2021.38-29.84a12%2012%200%201%201%2021.47%2010.7%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%22M170.21%2060.72a12%2012%200%200%200-4.42-23.59C150.5%2040%20137.49%2047.2%20128.08%2057.66C116%2044%2098.14%2036%2078%2036a66.08%2066.08%200%200%200-66%2066c0%2031%2018.91%2063%2056.2%2094.87a342.7%20342.7%200%200%200%2054.11%2037.7A12.1%2012.1%200%200%200%20128%20236a11.9%2011.9%200%200%200%205.68-1.46A340%20340%200%200%200%20175.32%20207a12%2012%200%200%200-14.64-19A334%20334%200%200%201%20140%20202.68V82.55c5.43-11.32%2016.31-19.23%2030.21-21.83M116%20202.66a319%20319%200%200%201-32.51-24.3C61.82%20159.77%2036%20131.42%2036%20102a42%2042%200%200%201%2042-42c17%200%2031.35%208.57%2038%2022.52Zm117-94.73a12%2012%200%200%201-13.25-10.61a41.89%2041.89%200%200%200-18.41-30.25a12%2012%200%200%201%2013.34-19.95a65.84%2065.84%200%200%201%2028.92%2047.56a12%2012%200%200%201-10.6%2013.25m1%2033.42c-5.84%2011.72-14.33%2023.63-25.23%2035.43a12%2012%200%200%201-17.62-16.29c9.36-10.13%2016.55-20.17%2021.38-29.84a12%2012%200%201%201%2021.47%2010.7%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/heart-half-bold.svg?color=%231a73e8&size=48
