heart half icon

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

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

5 other variants in Phosphor

heart-halfheart-half-boldheart-half-duotoneheart-half-fillheart-half-light

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="M168.74 52.86a4 4 0 0 0-1.48-7.86c-17.17 3.21-31.07 12.57-39.26 26.12C118 54.21 99.46 44 78 44a58.07 58.07 0 0 0-58 58c0 28.59 18 58.47 53.4 88.79a334 334 0 0 0 52.7 36.73a4 4 0 0 0 1.9.48a4 4 0 0 0 1.89-.49a329 329 0 0 0 40.54-26.87a4 4 0 1 0-4.88-6.33A344 344 0 0 1 132 217.09V80.85c6.24-14.59 19.58-24.78 36.74-27.99M124 217.08c-21.73-13-96-61.16-96-115.08a50.06 50.06 0 0 1 50-50c20.83 0 38.39 11 46 28.8ZM232.11 100h-.44a4 4 0 0 1-4-3.56a49.88 49.88 0 0 0-21.92-36a4 4 0 0 1 4.44-6.65a57.88 57.88 0 0 1 25.43 41.79a4 4 0 0 1-3.51 4.42m-5.23 37.81c-5.5 11-13.55 22.32-23.94 33.56a4 4 0 0 1-5.88-5.43c9.88-10.68 17.5-21.35 22.66-31.71a4 4 0 1 1 7.16 3.58"/></svg>

React

import type { SVGProps } from "react";

export function PhHeartHalfThin(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="M168.74 52.86a4 4 0 0 0-1.48-7.86c-17.17 3.21-31.07 12.57-39.26 26.12C118 54.21 99.46 44 78 44a58.07 58.07 0 0 0-58 58c0 28.59 18 58.47 53.4 88.79a334 334 0 0 0 52.7 36.73a4 4 0 0 0 1.9.48a4 4 0 0 0 1.89-.49a329 329 0 0 0 40.54-26.87a4 4 0 1 0-4.88-6.33A344 344 0 0 1 132 217.09V80.85c6.24-14.59 19.58-24.78 36.74-27.99M124 217.08c-21.73-13-96-61.16-96-115.08a50.06 50.06 0 0 1 50-50c20.83 0 38.39 11 46 28.8ZM232.11 100h-.44a4 4 0 0 1-4-3.56a49.88 49.88 0 0 0-21.92-36a4 4 0 0 1 4.44-6.65a57.88 57.88 0 0 1 25.43 41.79a4 4 0 0 1-3.51 4.42m-5.23 37.81c-5.5 11-13.55 22.32-23.94 33.56a4 4 0 0 1-5.88-5.43c9.88-10.68 17.5-21.35 22.66-31.71a4 4 0 1 1 7.16 3.58"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M168.74 52.86a4 4 0 0 0-1.48-7.86c-17.17 3.21-31.07 12.57-39.26 26.12C118 54.21 99.46 44 78 44a58.07 58.07 0 0 0-58 58c0 28.59 18 58.47 53.4 88.79a334 334 0 0 0 52.7 36.73a4 4 0 0 0 1.9.48a4 4 0 0 0 1.89-.49a329 329 0 0 0 40.54-26.87a4 4 0 1 0-4.88-6.33A344 344 0 0 1 132 217.09V80.85c6.24-14.59 19.58-24.78 36.74-27.99M124 217.08c-21.73-13-96-61.16-96-115.08a50.06 50.06 0 0 1 50-50c20.83 0 38.39 11 46 28.8ZM232.11 100h-.44a4 4 0 0 1-4-3.56a49.88 49.88 0 0 0-21.92-36a4 4 0 0 1 4.44-6.65a57.88 57.88 0 0 1 25.43 41.79a4 4 0 0 1-3.51 4.42m-5.23 37.81c-5.5 11-13.55 22.32-23.94 33.56a4 4 0 0 1-5.88-5.43c9.88-10.68 17.5-21.35 22.66-31.71a4 4 0 1 1 7.16 3.58"/></svg>
</template>

CSS

.icon-heart-half-thin {
  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%22M168.74%2052.86a4%204%200%200%200-1.48-7.86c-17.17%203.21-31.07%2012.57-39.26%2026.12C118%2054.21%2099.46%2044%2078%2044a58.07%2058.07%200%200%200-58%2058c0%2028.59%2018%2058.47%2053.4%2088.79a334%20334%200%200%200%2052.7%2036.73a4%204%200%200%200%201.9.48a4%204%200%200%200%201.89-.49a329%20329%200%200%200%2040.54-26.87a4%204%200%201%200-4.88-6.33A344%20344%200%200%201%20132%20217.09V80.85c6.24-14.59%2019.58-24.78%2036.74-27.99M124%20217.08c-21.73-13-96-61.16-96-115.08a50.06%2050.06%200%200%201%2050-50c20.83%200%2038.39%2011%2046%2028.8ZM232.11%20100h-.44a4%204%200%200%201-4-3.56a49.88%2049.88%200%200%200-21.92-36a4%204%200%200%201%204.44-6.65a57.88%2057.88%200%200%201%2025.43%2041.79a4%204%200%200%201-3.51%204.42m-5.23%2037.81c-5.5%2011-13.55%2022.32-23.94%2033.56a4%204%200%200%201-5.88-5.43c9.88-10.68%2017.5-21.35%2022.66-31.71a4%204%200%201%201%207.16%203.58%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%22M168.74%2052.86a4%204%200%200%200-1.48-7.86c-17.17%203.21-31.07%2012.57-39.26%2026.12C118%2054.21%2099.46%2044%2078%2044a58.07%2058.07%200%200%200-58%2058c0%2028.59%2018%2058.47%2053.4%2088.79a334%20334%200%200%200%2052.7%2036.73a4%204%200%200%200%201.9.48a4%204%200%200%200%201.89-.49a329%20329%200%200%200%2040.54-26.87a4%204%200%201%200-4.88-6.33A344%20344%200%200%201%20132%20217.09V80.85c6.24-14.59%2019.58-24.78%2036.74-27.99M124%20217.08c-21.73-13-96-61.16-96-115.08a50.06%2050.06%200%200%201%2050-50c20.83%200%2038.39%2011%2046%2028.8ZM232.11%20100h-.44a4%204%200%200%201-4-3.56a49.88%2049.88%200%200%200-21.92-36a4%204%200%200%201%204.44-6.65a57.88%2057.88%200%200%201%2025.43%2041.79a4%204%200%200%201-3.51%204.42m-5.23%2037.81c-5.5%2011-13.55%2022.32-23.94%2033.56a4%204%200%200%201-5.88-5.43c9.88-10.68%2017.5-21.35%2022.66-31.71a4%204%200%201%201%207.16%203.58%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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