heart half icon

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

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

5 other variants in Phosphor

heart-halfheart-half-boldheart-half-duotoneheart-half-fillheart-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.1 54.82A6 6 0 1 0 166.9 43c-16.6 3.13-30.25 11.82-38.9 24.4C117.3 51.5 99 42 78 42a60.07 60.07 0 0 0-60 60c0 29.2 18.2 59.59 54.1 90.31a334.7 334.7 0 0 0 53.06 37a5.93 5.93 0 0 0 5.68 0a329.4 329.4 0 0 0 40.82-27a6 6 0 0 0-7.32-9.51A342 342 0 0 1 134 213.56V81.28c6-13.78 18.76-23.4 35.1-26.46M122 213.54C97.4 198.51 30 152.7 30 102a48.05 48.05 0 0 1 48-48c19.87 0 36.62 10.4 44 27.22ZM232.33 102a5 5 0 0 1-.67 0a6 6 0 0 1-5.95-5.34a47.89 47.89 0 0 0-21.05-34.58a6 6 0 1 1 6.68-10a59.85 59.85 0 0 1 26.29 43.23a6 6 0 0 1-5.3 6.69m-3.66 36.72c-5.58 11.2-13.75 22.65-24.26 34a6 6 0 0 1-8.82-8.15c9.75-10.54 17.27-21.05 22.35-31.24a6 6 0 1 1 10.73 5.36Z"/></svg>

React

import type { SVGProps } from "react";

export function PhHeartHalfLight(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.1 54.82A6 6 0 1 0 166.9 43c-16.6 3.13-30.25 11.82-38.9 24.4C117.3 51.5 99 42 78 42a60.07 60.07 0 0 0-60 60c0 29.2 18.2 59.59 54.1 90.31a334.7 334.7 0 0 0 53.06 37a5.93 5.93 0 0 0 5.68 0a329.4 329.4 0 0 0 40.82-27a6 6 0 0 0-7.32-9.51A342 342 0 0 1 134 213.56V81.28c6-13.78 18.76-23.4 35.1-26.46M122 213.54C97.4 198.51 30 152.7 30 102a48.05 48.05 0 0 1 48-48c19.87 0 36.62 10.4 44 27.22ZM232.33 102a5 5 0 0 1-.67 0a6 6 0 0 1-5.95-5.34a47.89 47.89 0 0 0-21.05-34.58a6 6 0 1 1 6.68-10a59.85 59.85 0 0 1 26.29 43.23a6 6 0 0 1-5.3 6.69m-3.66 36.72c-5.58 11.2-13.75 22.65-24.26 34a6 6 0 0 1-8.82-8.15c9.75-10.54 17.27-21.05 22.35-31.24a6 6 0 1 1 10.73 5.36Z"/></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.1 54.82A6 6 0 1 0 166.9 43c-16.6 3.13-30.25 11.82-38.9 24.4C117.3 51.5 99 42 78 42a60.07 60.07 0 0 0-60 60c0 29.2 18.2 59.59 54.1 90.31a334.7 334.7 0 0 0 53.06 37a5.93 5.93 0 0 0 5.68 0a329.4 329.4 0 0 0 40.82-27a6 6 0 0 0-7.32-9.51A342 342 0 0 1 134 213.56V81.28c6-13.78 18.76-23.4 35.1-26.46M122 213.54C97.4 198.51 30 152.7 30 102a48.05 48.05 0 0 1 48-48c19.87 0 36.62 10.4 44 27.22ZM232.33 102a5 5 0 0 1-.67 0a6 6 0 0 1-5.95-5.34a47.89 47.89 0 0 0-21.05-34.58a6 6 0 1 1 6.68-10a59.85 59.85 0 0 1 26.29 43.23a6 6 0 0 1-5.3 6.69m-3.66 36.72c-5.58 11.2-13.75 22.65-24.26 34a6 6 0 0 1-8.82-8.15c9.75-10.54 17.27-21.05 22.35-31.24a6 6 0 1 1 10.73 5.36Z"/></svg>
</template>

CSS

.icon-heart-half-light {
  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.1%2054.82A6%206%200%201%200%20166.9%2043c-16.6%203.13-30.25%2011.82-38.9%2024.4C117.3%2051.5%2099%2042%2078%2042a60.07%2060.07%200%200%200-60%2060c0%2029.2%2018.2%2059.59%2054.1%2090.31a334.7%20334.7%200%200%200%2053.06%2037a5.93%205.93%200%200%200%205.68%200a329.4%20329.4%200%200%200%2040.82-27a6%206%200%200%200-7.32-9.51A342%20342%200%200%201%20134%20213.56V81.28c6-13.78%2018.76-23.4%2035.1-26.46M122%20213.54C97.4%20198.51%2030%20152.7%2030%20102a48.05%2048.05%200%200%201%2048-48c19.87%200%2036.62%2010.4%2044%2027.22ZM232.33%20102a5%205%200%200%201-.67%200a6%206%200%200%201-5.95-5.34a47.89%2047.89%200%200%200-21.05-34.58a6%206%200%201%201%206.68-10a59.85%2059.85%200%200%201%2026.29%2043.23a6%206%200%200%201-5.3%206.69m-3.66%2036.72c-5.58%2011.2-13.75%2022.65-24.26%2034a6%206%200%200%201-8.82-8.15c9.75-10.54%2017.27-21.05%2022.35-31.24a6%206%200%201%201%2010.73%205.36Z%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.1%2054.82A6%206%200%201%200%20166.9%2043c-16.6%203.13-30.25%2011.82-38.9%2024.4C117.3%2051.5%2099%2042%2078%2042a60.07%2060.07%200%200%200-60%2060c0%2029.2%2018.2%2059.59%2054.1%2090.31a334.7%20334.7%200%200%200%2053.06%2037a5.93%205.93%200%200%200%205.68%200a329.4%20329.4%200%200%200%2040.82-27a6%206%200%200%200-7.32-9.51A342%20342%200%200%201%20134%20213.56V81.28c6-13.78%2018.76-23.4%2035.1-26.46M122%20213.54C97.4%20198.51%2030%20152.7%2030%20102a48.05%2048.05%200%200%201%2048-48c19.87%200%2036.62%2010.4%2044%2027.22ZM232.33%20102a5%205%200%200%201-.67%200a6%206%200%200%201-5.95-5.34a47.89%2047.89%200%200%200-21.05-34.58a6%206%200%201%201%206.68-10a59.85%2059.85%200%200%201%2026.29%2043.23a6%206%200%200%201-5.3%206.69m-3.66%2036.72c-5.58%2011.2-13.75%2022.65-24.26%2034a6%206%200%200%201-8.82-8.15c9.75-10.54%2017.27-21.05%2022.35-31.24a6%206%200%201%201%2010.73%205.36Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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