red heart emoji

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

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

The same emoji in other sets

red-heartEmoji One (Colored)red-heartFluent Emojired-heartFluent Emoji High Contrastred-heartNoto Emojired-heartOpenMojired-heartTwitter Emoji

More smileys & emotion icons from Fluent Emoji Flat

alienalien-monsteranger-symbolangry-faceangry-face-with-hornsanguished-faceanxious-face-with-sweatastonished-facebeaming-face-with-smiling-eyesbeating-heartblack-heartblue-heartbombbroken-heartbrown-heartcat-with-tears-of-joycat-with-wry-smileclown-facecold-facecollisionconfounded-faceconfused-facecowboy-hat-facecrying-cat

Use the red 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="#f8312f" d="M6 6c4.665-2.332 8.5.5 10 2.5c1.5-2 5.335-4.832 10-2.5c6 3 4.5 10.5 0 15c-2.196 2.196-6.063 6.063-8.891 8.214a1.764 1.764 0 0 1-2.186-.041C12.33 27.08 8.165 23.165 6 21C1.5 16.5 0 9 6 6"/><path fill="#ca0b4a" d="M16 8.5v3.05c1.27-2.685 4.425-6.27 9.658-5.713c-4.51-2.03-8.195.712-9.658 2.663m-4.054-2.963C10.26 4.95 8.225 4.887 6 6C0 9 1.5 16.5 6 21c2.165 2.165 6.33 6.08 8.923 8.173a1.764 1.764 0 0 0 2.186.04q.381-.29.785-.618c-2.854-2.143-6.86-5.519-9.035-7.462c-4.957-4.431-6.61-11.815 0-14.769a9.7 9.7 0 0 1 3.087-.827"/><ellipse cx="23.477" cy="12.594" fill="#f37366" rx="2.836" ry="4.781" transform="rotate(30 23.477 12.594)"/></g></svg>

React

import type { SVGProps } from "react";

export function FluentEmojiFlatRedHeart(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="#f8312f" d="M6 6c4.665-2.332 8.5.5 10 2.5c1.5-2 5.335-4.832 10-2.5c6 3 4.5 10.5 0 15c-2.196 2.196-6.063 6.063-8.891 8.214a1.764 1.764 0 0 1-2.186-.041C12.33 27.08 8.165 23.165 6 21C1.5 16.5 0 9 6 6"/><path fill="#ca0b4a" d="M16 8.5v3.05c1.27-2.685 4.425-6.27 9.658-5.713c-4.51-2.03-8.195.712-9.658 2.663m-4.054-2.963C10.26 4.95 8.225 4.887 6 6C0 9 1.5 16.5 6 21c2.165 2.165 6.33 6.08 8.923 8.173a1.764 1.764 0 0 0 2.186.04q.381-.29.785-.618c-2.854-2.143-6.86-5.519-9.035-7.462c-4.957-4.431-6.61-11.815 0-14.769a9.7 9.7 0 0 1 3.087-.827"/><ellipse cx="23.477" cy="12.594" fill="#f37366" rx="2.836" ry="4.781" transform="rotate(30 23.477 12.594)"/></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="#f8312f" d="M6 6c4.665-2.332 8.5.5 10 2.5c1.5-2 5.335-4.832 10-2.5c6 3 4.5 10.5 0 15c-2.196 2.196-6.063 6.063-8.891 8.214a1.764 1.764 0 0 1-2.186-.041C12.33 27.08 8.165 23.165 6 21C1.5 16.5 0 9 6 6"/><path fill="#ca0b4a" d="M16 8.5v3.05c1.27-2.685 4.425-6.27 9.658-5.713c-4.51-2.03-8.195.712-9.658 2.663m-4.054-2.963C10.26 4.95 8.225 4.887 6 6C0 9 1.5 16.5 6 21c2.165 2.165 6.33 6.08 8.923 8.173a1.764 1.764 0 0 0 2.186.04q.381-.29.785-.618c-2.854-2.143-6.86-5.519-9.035-7.462c-4.957-4.431-6.61-11.815 0-14.769a9.7 9.7 0 0 1 3.087-.827"/><ellipse cx="23.477" cy="12.594" fill="#f37366" rx="2.836" ry="4.781" transform="rotate(30 23.477 12.594)"/></g></svg>
</template>

CSS

.icon-red-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%23f8312f%22%20d%3D%22M6%206c4.665-2.332%208.5.5%2010%202.5c1.5-2%205.335-4.832%2010-2.5c6%203%204.5%2010.5%200%2015c-2.196%202.196-6.063%206.063-8.891%208.214a1.764%201.764%200%200%201-2.186-.041C12.33%2027.08%208.165%2023.165%206%2021C1.5%2016.5%200%209%206%206%22%2F%3E%3Cpath%20fill%3D%22%23ca0b4a%22%20d%3D%22M16%208.5v3.05c1.27-2.685%204.425-6.27%209.658-5.713c-4.51-2.03-8.195.712-9.658%202.663m-4.054-2.963C10.26%204.95%208.225%204.887%206%206C0%209%201.5%2016.5%206%2021c2.165%202.165%206.33%206.08%208.923%208.173a1.764%201.764%200%200%200%202.186.04q.381-.29.785-.618c-2.854-2.143-6.86-5.519-9.035-7.462c-4.957-4.431-6.61-11.815%200-14.769a9.7%209.7%200%200%201%203.087-.827%22%2F%3E%3Cellipse%20cx%3D%2223.477%22%20cy%3D%2212.594%22%20fill%3D%22%23f37366%22%20rx%3D%222.836%22%20ry%3D%224.781%22%20transform%3D%22rotate(30%2023.477%2012.594)%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%23f8312f%22%20d%3D%22M6%206c4.665-2.332%208.5.5%2010%202.5c1.5-2%205.335-4.832%2010-2.5c6%203%204.5%2010.5%200%2015c-2.196%202.196-6.063%206.063-8.891%208.214a1.764%201.764%200%200%201-2.186-.041C12.33%2027.08%208.165%2023.165%206%2021C1.5%2016.5%200%209%206%206%22%2F%3E%3Cpath%20fill%3D%22%23ca0b4a%22%20d%3D%22M16%208.5v3.05c1.27-2.685%204.425-6.27%209.658-5.713c-4.51-2.03-8.195.712-9.658%202.663m-4.054-2.963C10.26%204.95%208.225%204.887%206%206C0%209%201.5%2016.5%206%2021c2.165%202.165%206.33%206.08%208.923%208.173a1.764%201.764%200%200%200%202.186.04q.381-.29.785-.618c-2.854-2.143-6.86-5.519-9.035-7.462c-4.957-4.431-6.61-11.815%200-14.769a9.7%209.7%200%200%201%203.087-.827%22%2F%3E%3Cellipse%20cx%3D%2223.477%22%20cy%3D%2212.594%22%20fill%3D%22%23f37366%22%20rx%3D%222.836%22%20ry%3D%224.781%22%20transform%3D%22rotate(30%2023.477%2012.594)%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/red-heart.svg?color=%231a73e8&size=48