pink-heart from Fluent Emoji Flat by Microsoft Corporation · Default · Smileys & Emotion · MIT Free for personal and commercial use.

Name
pink-heart
Set
Fluent Emoji Flat
Style
Default
Category
Smileys & Emotion
Viewbox
32×32
License
MIT

The same emoji in other sets

More smileys & emotion icons from Fluent Emoji Flat

Use the pink heart emoji

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="none"><path fill="#ff6aa0" d="M6 5.998c4.665-2.332 8.5.5 10 2.5c1.5-2 5.336-4.832 10-2.5c6 3 4.5 10.5 0 15c-2.195 2.196-6.062 6.063-8.89 8.214a1.764 1.764 0 0 1-2.187-.041C12.33 27.078 8.165 23.163 6 20.998c-4.5-4.5-6-12 0-15"/><path fill="#e25c82" d="M16 8.498v3.05c1.27-2.685 4.426-6.27 9.658-5.713c-4.51-2.03-8.195.712-9.658 2.663m-4.054-2.963c-1.684-.587-3.72-.65-5.946.463c-6 3-4.5 10.5 0 15c2.165 2.165 6.33 6.08 8.923 8.173a1.764 1.764 0 0 0 2.186.04q.382-.29.786-.618c-2.855-2.143-6.861-5.519-9.036-7.463c-4.956-4.43-6.609-11.814 0-14.768a9.7 9.7 0 0 1 3.087-.827"/><ellipse cx="23.477" cy="12.592" fill="#ff8fc1" rx="2.836" ry="4.781" transform="rotate(30 23.477 12.592)"/></g></svg>

React

import type { SVGProps } from "react";

export function FluentEmojiFlatPinkHeart(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="none"><path fill="#ff6aa0" d="M6 5.998c4.665-2.332 8.5.5 10 2.5c1.5-2 5.336-4.832 10-2.5c6 3 4.5 10.5 0 15c-2.195 2.196-6.062 6.063-8.89 8.214a1.764 1.764 0 0 1-2.187-.041C12.33 27.078 8.165 23.163 6 20.998c-4.5-4.5-6-12 0-15"/><path fill="#e25c82" d="M16 8.498v3.05c1.27-2.685 4.426-6.27 9.658-5.713c-4.51-2.03-8.195.712-9.658 2.663m-4.054-2.963c-1.684-.587-3.72-.65-5.946.463c-6 3-4.5 10.5 0 15c2.165 2.165 6.33 6.08 8.923 8.173a1.764 1.764 0 0 0 2.186.04q.382-.29.786-.618c-2.855-2.143-6.861-5.519-9.036-7.463c-4.956-4.43-6.609-11.814 0-14.768a9.7 9.7 0 0 1 3.087-.827"/><ellipse cx="23.477" cy="12.592" fill="#ff8fc1" rx="2.836" ry="4.781" transform="rotate(30 23.477 12.592)"/></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="none"><path fill="#ff6aa0" d="M6 5.998c4.665-2.332 8.5.5 10 2.5c1.5-2 5.336-4.832 10-2.5c6 3 4.5 10.5 0 15c-2.195 2.196-6.062 6.063-8.89 8.214a1.764 1.764 0 0 1-2.187-.041C12.33 27.078 8.165 23.163 6 20.998c-4.5-4.5-6-12 0-15"/><path fill="#e25c82" d="M16 8.498v3.05c1.27-2.685 4.426-6.27 9.658-5.713c-4.51-2.03-8.195.712-9.658 2.663m-4.054-2.963c-1.684-.587-3.72-.65-5.946.463c-6 3-4.5 10.5 0 15c2.165 2.165 6.33 6.08 8.923 8.173a1.764 1.764 0 0 0 2.186.04q.382-.29.786-.618c-2.855-2.143-6.861-5.519-9.036-7.463c-4.956-4.43-6.609-11.814 0-14.768a9.7 9.7 0 0 1 3.087-.827"/><ellipse cx="23.477" cy="12.592" fill="#ff8fc1" rx="2.836" ry="4.781" transform="rotate(30 23.477 12.592)"/></g></svg>
</template>

CSS

.icon-pink-heart {
  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%2032%2032%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23ff6aa0%22%20d%3D%22M6%205.998c4.665-2.332%208.5.5%2010%202.5c1.5-2%205.336-4.832%2010-2.5c6%203%204.5%2010.5%200%2015c-2.195%202.196-6.062%206.063-8.89%208.214a1.764%201.764%200%200%201-2.187-.041C12.33%2027.078%208.165%2023.163%206%2020.998c-4.5-4.5-6-12%200-15%22%2F%3E%3Cpath%20fill%3D%22%23e25c82%22%20d%3D%22M16%208.498v3.05c1.27-2.685%204.426-6.27%209.658-5.713c-4.51-2.03-8.195.712-9.658%202.663m-4.054-2.963c-1.684-.587-3.72-.65-5.946.463c-6%203-4.5%2010.5%200%2015c2.165%202.165%206.33%206.08%208.923%208.173a1.764%201.764%200%200%200%202.186.04q.382-.29.786-.618c-2.855-2.143-6.861-5.519-9.036-7.463c-4.956-4.43-6.609-11.814%200-14.768a9.7%209.7%200%200%201%203.087-.827%22%2F%3E%3Cellipse%20cx%3D%2223.477%22%20cy%3D%2212.592%22%20fill%3D%22%23ff8fc1%22%20rx%3D%222.836%22%20ry%3D%224.781%22%20transform%3D%22rotate(30%2023.477%2012.592)%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%2032%2032%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23ff6aa0%22%20d%3D%22M6%205.998c4.665-2.332%208.5.5%2010%202.5c1.5-2%205.336-4.832%2010-2.5c6%203%204.5%2010.5%200%2015c-2.195%202.196-6.062%206.063-8.89%208.214a1.764%201.764%200%200%201-2.187-.041C12.33%2027.078%208.165%2023.163%206%2020.998c-4.5-4.5-6-12%200-15%22%2F%3E%3Cpath%20fill%3D%22%23e25c82%22%20d%3D%22M16%208.498v3.05c1.27-2.685%204.426-6.27%209.658-5.713c-4.51-2.03-8.195.712-9.658%202.663m-4.054-2.963c-1.684-.587-3.72-.65-5.946.463c-6%203-4.5%2010.5%200%2015c2.165%202.165%206.33%206.08%208.923%208.173a1.764%201.764%200%200%200%202.186.04q.382-.29.786-.618c-2.855-2.143-6.861-5.519-9.036-7.463c-4.956-4.43-6.609-11.814%200-14.768a9.7%209.7%200%200%201%203.087-.827%22%2F%3E%3Cellipse%20cx%3D%2223.477%22%20cy%3D%2212.592%22%20fill%3D%22%23ff8fc1%22%20rx%3D%222.836%22%20ry%3D%224.781%22%20transform%3D%22rotate(30%2023.477%2012.592)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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