heart half icon

heart-half from Phosphor by Phosphor Icons · Regular · MIT Free for personal and commercial use.

Name
heart-half
Set
Phosphor
Style
Regular
Viewbox
256×256
License
MIT

5 other variants in Phosphor

heart-half-boldheart-half-duotoneheart-half-fillheart-half-lightheart-half-thin

The same icon in other sets

heart-halfBootstrap Iconsheart-halfIonIconsheart-halfMaterial Line Iconsheart-halfMaterial Design Iconsheart-half-fillMingCute Icon

Related icons in Phosphor

heart-breakheart-straightheart-straight-break

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="M169.47 56.79a8 8 0 0 0-2.94-15.73C150.42 44.08 137 52.18 128 64c-11.26-15-29.36-24-50-24a62.07 62.07 0 0 0-62 62c0 70 103.79 126.67 108.21 129a7.93 7.93 0 0 0 7.58 0a332.6 332.6 0 0 0 41.09-27.22a8 8 0 1 0-9.76-12.67c-10.31 7.94-20 14.37-27.12 18.82V81.7c5.84-12.95 17.94-22 33.47-24.91M120 210c-26.42-16.59-88-60.29-88-108a46.06 46.06 0 0 1 46-46c18.91 0 34.86 9.78 42 25.64Zm112.55-106a9 9 0 0 1-.89 0a8 8 0 0 1-7.94-7.12a45.88 45.88 0 0 0-20.17-33.14a8 8 0 1 1 8.9-13.29a61.83 61.83 0 0 1 27.17 44.67a8 8 0 0 1-7.07 8.88m-2.09 35.62c-5.67 11.37-13.94 23-24.59 34.49a8 8 0 1 1-11.74-10.86c9.61-10.4 17-20.75 22-30.77a8 8 0 1 1 14.31 7.14Z"/></svg>

React

import type { SVGProps } from "react";

export function PhHeartHalf(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="M169.47 56.79a8 8 0 0 0-2.94-15.73C150.42 44.08 137 52.18 128 64c-11.26-15-29.36-24-50-24a62.07 62.07 0 0 0-62 62c0 70 103.79 126.67 108.21 129a7.93 7.93 0 0 0 7.58 0a332.6 332.6 0 0 0 41.09-27.22a8 8 0 1 0-9.76-12.67c-10.31 7.94-20 14.37-27.12 18.82V81.7c5.84-12.95 17.94-22 33.47-24.91M120 210c-26.42-16.59-88-60.29-88-108a46.06 46.06 0 0 1 46-46c18.91 0 34.86 9.78 42 25.64Zm112.55-106a9 9 0 0 1-.89 0a8 8 0 0 1-7.94-7.12a45.88 45.88 0 0 0-20.17-33.14a8 8 0 1 1 8.9-13.29a61.83 61.83 0 0 1 27.17 44.67a8 8 0 0 1-7.07 8.88m-2.09 35.62c-5.67 11.37-13.94 23-24.59 34.49a8 8 0 1 1-11.74-10.86c9.61-10.4 17-20.75 22-30.77a8 8 0 1 1 14.31 7.14Z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M169.47 56.79a8 8 0 0 0-2.94-15.73C150.42 44.08 137 52.18 128 64c-11.26-15-29.36-24-50-24a62.07 62.07 0 0 0-62 62c0 70 103.79 126.67 108.21 129a7.93 7.93 0 0 0 7.58 0a332.6 332.6 0 0 0 41.09-27.22a8 8 0 1 0-9.76-12.67c-10.31 7.94-20 14.37-27.12 18.82V81.7c5.84-12.95 17.94-22 33.47-24.91M120 210c-26.42-16.59-88-60.29-88-108a46.06 46.06 0 0 1 46-46c18.91 0 34.86 9.78 42 25.64Zm112.55-106a9 9 0 0 1-.89 0a8 8 0 0 1-7.94-7.12a45.88 45.88 0 0 0-20.17-33.14a8 8 0 1 1 8.9-13.29a61.83 61.83 0 0 1 27.17 44.67a8 8 0 0 1-7.07 8.88m-2.09 35.62c-5.67 11.37-13.94 23-24.59 34.49a8 8 0 1 1-11.74-10.86c9.61-10.4 17-20.75 22-30.77a8 8 0 1 1 14.31 7.14Z"/></svg>
</template>

CSS

.icon-heart-half {
  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%22M169.47%2056.79a8%208%200%200%200-2.94-15.73C150.42%2044.08%20137%2052.18%20128%2064c-11.26-15-29.36-24-50-24a62.07%2062.07%200%200%200-62%2062c0%2070%20103.79%20126.67%20108.21%20129a7.93%207.93%200%200%200%207.58%200a332.6%20332.6%200%200%200%2041.09-27.22a8%208%200%201%200-9.76-12.67c-10.31%207.94-20%2014.37-27.12%2018.82V81.7c5.84-12.95%2017.94-22%2033.47-24.91M120%20210c-26.42-16.59-88-60.29-88-108a46.06%2046.06%200%200%201%2046-46c18.91%200%2034.86%209.78%2042%2025.64Zm112.55-106a9%209%200%200%201-.89%200a8%208%200%200%201-7.94-7.12a45.88%2045.88%200%200%200-20.17-33.14a8%208%200%201%201%208.9-13.29a61.83%2061.83%200%200%201%2027.17%2044.67a8%208%200%200%201-7.07%208.88m-2.09%2035.62c-5.67%2011.37-13.94%2023-24.59%2034.49a8%208%200%201%201-11.74-10.86c9.61-10.4%2017-20.75%2022-30.77a8%208%200%201%201%2014.31%207.14Z%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%22M169.47%2056.79a8%208%200%200%200-2.94-15.73C150.42%2044.08%20137%2052.18%20128%2064c-11.26-15-29.36-24-50-24a62.07%2062.07%200%200%200-62%2062c0%2070%20103.79%20126.67%20108.21%20129a7.93%207.93%200%200%200%207.58%200a332.6%20332.6%200%200%200%2041.09-27.22a8%208%200%201%200-9.76-12.67c-10.31%207.94-20%2014.37-27.12%2018.82V81.7c5.84-12.95%2017.94-22%2033.47-24.91M120%20210c-26.42-16.59-88-60.29-88-108a46.06%2046.06%200%200%201%2046-46c18.91%200%2034.86%209.78%2042%2025.64Zm112.55-106a9%209%200%200%201-.89%200a8%208%200%200%201-7.94-7.12a45.88%2045.88%200%200%200-20.17-33.14a8%208%200%201%201%208.9-13.29a61.83%2061.83%200%200%201%2027.17%2044.67a8%208%200%200%201-7.07%208.88m-2.09%2035.62c-5.67%2011.37-13.94%2023-24.59%2034.49a8%208%200%201%201-11.74-10.86c9.61-10.4%2017-20.75%2022-30.77a8%208%200%201%201%2014.31%207.14Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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