heart half icon

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

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

5 other variants in Phosphor

heart-halfheart-half-boldheart-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"><g fill="currentColor"><path d="M128 80v144S24 168 24 102a54 54 0 0 1 54-54c22.59 0 41.94 12.31 50 32" opacity=".2"/><path d="M178 40c-20.65 0-38.73 8.88-50 23.89C116.73 48.88 98.65 40 78 40a62.07 62.07 0 0 0-62 62c0 70 103.79 126.67 108.21 129a8 8 0 0 0 7.58 0C136.21 228.67 240 172 240 102a62.07 62.07 0 0 0-62-62M32 102a46.06 46.06 0 0 1 46-46c18.91 0 34.86 9.79 42 25.65V210c-26.41-16.56-88-60.22-88-108m104 108V81.65C143.14 65.79 159.09 56 178 56a46.06 46.06 0 0 1 46 46c0 47.71-61.58 91.41-88 108"/></g></svg>

React

import type { SVGProps } from "react";

export function PhHeartHalfDuotone(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="currentColor"><path d="M128 80v144S24 168 24 102a54 54 0 0 1 54-54c22.59 0 41.94 12.31 50 32" opacity=".2"/><path d="M178 40c-20.65 0-38.73 8.88-50 23.89C116.73 48.88 98.65 40 78 40a62.07 62.07 0 0 0-62 62c0 70 103.79 126.67 108.21 129a8 8 0 0 0 7.58 0C136.21 228.67 240 172 240 102a62.07 62.07 0 0 0-62-62M32 102a46.06 46.06 0 0 1 46-46c18.91 0 34.86 9.79 42 25.65V210c-26.41-16.56-88-60.22-88-108m104 108V81.65C143.14 65.79 159.09 56 178 56a46.06 46.06 0 0 1 46 46c0 47.71-61.58 91.41-88 108"/></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="currentColor"><path d="M128 80v144S24 168 24 102a54 54 0 0 1 54-54c22.59 0 41.94 12.31 50 32" opacity=".2"/><path d="M178 40c-20.65 0-38.73 8.88-50 23.89C116.73 48.88 98.65 40 78 40a62.07 62.07 0 0 0-62 62c0 70 103.79 126.67 108.21 129a8 8 0 0 0 7.58 0C136.21 228.67 240 172 240 102a62.07 62.07 0 0 0-62-62M32 102a46.06 46.06 0 0 1 46-46c18.91 0 34.86 9.79 42 25.65V210c-26.41-16.56-88-60.22-88-108m104 108V81.65C143.14 65.79 159.09 56 178 56a46.06 46.06 0 0 1 46 46c0 47.71-61.58 91.41-88 108"/></g></svg>
</template>

CSS

.icon-heart-half-duotone {
  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%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M128%2080v144S24%20168%2024%20102a54%2054%200%200%201%2054-54c22.59%200%2041.94%2012.31%2050%2032%22%20opacity%3D%22.2%22%2F%3E%3Cpath%20d%3D%22M178%2040c-20.65%200-38.73%208.88-50%2023.89C116.73%2048.88%2098.65%2040%2078%2040a62.07%2062.07%200%200%200-62%2062c0%2070%20103.79%20126.67%20108.21%20129a8%208%200%200%200%207.58%200C136.21%20228.67%20240%20172%20240%20102a62.07%2062.07%200%200%200-62-62M32%20102a46.06%2046.06%200%200%201%2046-46c18.91%200%2034.86%209.79%2042%2025.65V210c-26.41-16.56-88-60.22-88-108m104%20108V81.65C143.14%2065.79%20159.09%2056%20178%2056a46.06%2046.06%200%200%201%2046%2046c0%2047.71-61.58%2091.41-88%20108%22%2F%3E%3C%2Fg%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%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M128%2080v144S24%20168%2024%20102a54%2054%200%200%201%2054-54c22.59%200%2041.94%2012.31%2050%2032%22%20opacity%3D%22.2%22%2F%3E%3Cpath%20d%3D%22M178%2040c-20.65%200-38.73%208.88-50%2023.89C116.73%2048.88%2098.65%2040%2078%2040a62.07%2062.07%200%200%200-62%2062c0%2070%20103.79%20126.67%20108.21%20129a8%208%200%200%200%207.58%200C136.21%20228.67%20240%20172%20240%20102a62.07%2062.07%200%200%200-62-62M32%20102a46.06%2046.06%200%200%201%2046-46c18.91%200%2034.86%209.79%2042%2025.65V210c-26.41-16.56-88-60.22-88-108m104%20108V81.65C143.14%2065.79%20159.09%2056%20178%2056a46.06%2046.06%200%200%201%2046%2046c0%2047.71-61.58%2091.41-88%20108%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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