heart with arrow emoji

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

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

The same emoji in other sets

heart-with-arrowEmoji One (Colored)heart-with-arrowFluent Emojiheart-with-arrowFluent Emoji High Contrastheart-with-arrowNoto Emojiheart-with-arrowOpenMojiheart-with-arrowStreamline Emojisheart-with-arrowTwitter 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 heart with arrow emoji

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="none"><path fill="#ff822d" d="M5.155 5.155a1 1 0 0 1 1.414 0l6.16 6.16a1 1 0 1 1-1.414 1.414l-6.16-6.16a1 1 0 0 1 0-1.414"/><path fill="#f92f60" d="M20.602 7.092c-2.64.46-4.66 3.57-4.66 3.57s-2.02-3.11-4.66-3.57c-6.51-1.14-9.2 4.56-8.11 8.81c1.93 7.56 12.77 14.17 12.77 14.17s10.83-6.61 12.77-14.17c1.09-4.25-1.6-9.95-8.11-8.81"/><path fill="#635994" d="m3.512 7.562l-1.49-4.85c-.12-.42.27-.81.69-.69l4.85 1.49c.39.12.52.62.23.91l-3.37 3.36c-.29.29-.79.17-.91-.22m22.43 19.47l-5-5.12l-.02 3.15c0 .57.22 1.11.61 1.52l2.84 2.91l.02.02c.27.27.64.43 1.05.43c.83 0 1.5-.67 1.5-1.5c0-.65-.42-1.2-1-1.41m-4.01-6.09l5.12 5a1.498 1.498 0 0 0 2.91-.5c0-.41-.16-.78-.43-1.05l-.02-.02l-2.91-2.84a2.2 2.2 0 0 0-1.52-.61z"/><path fill="#ff822d" d="M17.255 17.255a1 1 0 0 1 1.414 0l8.06 8.06a1 1 0 1 1-1.414 1.414l-8.06-8.06a1 1 0 0 1 0-1.414"/></g></svg>

React

import type { SVGProps } from "react";

export function FluentEmojiFlatHeartWithArrow(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="#ff822d" d="M5.155 5.155a1 1 0 0 1 1.414 0l6.16 6.16a1 1 0 1 1-1.414 1.414l-6.16-6.16a1 1 0 0 1 0-1.414"/><path fill="#f92f60" d="M20.602 7.092c-2.64.46-4.66 3.57-4.66 3.57s-2.02-3.11-4.66-3.57c-6.51-1.14-9.2 4.56-8.11 8.81c1.93 7.56 12.77 14.17 12.77 14.17s10.83-6.61 12.77-14.17c1.09-4.25-1.6-9.95-8.11-8.81"/><path fill="#635994" d="m3.512 7.562l-1.49-4.85c-.12-.42.27-.81.69-.69l4.85 1.49c.39.12.52.62.23.91l-3.37 3.36c-.29.29-.79.17-.91-.22m22.43 19.47l-5-5.12l-.02 3.15c0 .57.22 1.11.61 1.52l2.84 2.91l.02.02c.27.27.64.43 1.05.43c.83 0 1.5-.67 1.5-1.5c0-.65-.42-1.2-1-1.41m-4.01-6.09l5.12 5a1.498 1.498 0 0 0 2.91-.5c0-.41-.16-.78-.43-1.05l-.02-.02l-2.91-2.84a2.2 2.2 0 0 0-1.52-.61z"/><path fill="#ff822d" d="M17.255 17.255a1 1 0 0 1 1.414 0l8.06 8.06a1 1 0 1 1-1.414 1.414l-8.06-8.06a1 1 0 0 1 0-1.414"/></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="#ff822d" d="M5.155 5.155a1 1 0 0 1 1.414 0l6.16 6.16a1 1 0 1 1-1.414 1.414l-6.16-6.16a1 1 0 0 1 0-1.414"/><path fill="#f92f60" d="M20.602 7.092c-2.64.46-4.66 3.57-4.66 3.57s-2.02-3.11-4.66-3.57c-6.51-1.14-9.2 4.56-8.11 8.81c1.93 7.56 12.77 14.17 12.77 14.17s10.83-6.61 12.77-14.17c1.09-4.25-1.6-9.95-8.11-8.81"/><path fill="#635994" d="m3.512 7.562l-1.49-4.85c-.12-.42.27-.81.69-.69l4.85 1.49c.39.12.52.62.23.91l-3.37 3.36c-.29.29-.79.17-.91-.22m22.43 19.47l-5-5.12l-.02 3.15c0 .57.22 1.11.61 1.52l2.84 2.91l.02.02c.27.27.64.43 1.05.43c.83 0 1.5-.67 1.5-1.5c0-.65-.42-1.2-1-1.41m-4.01-6.09l5.12 5a1.498 1.498 0 0 0 2.91-.5c0-.41-.16-.78-.43-1.05l-.02-.02l-2.91-2.84a2.2 2.2 0 0 0-1.52-.61z"/><path fill="#ff822d" d="M17.255 17.255a1 1 0 0 1 1.414 0l8.06 8.06a1 1 0 1 1-1.414 1.414l-8.06-8.06a1 1 0 0 1 0-1.414"/></g></svg>
</template>

CSS

.icon-heart-with-arrow {
  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%23ff822d%22%20d%3D%22M5.155%205.155a1%201%200%200%201%201.414%200l6.16%206.16a1%201%200%201%201-1.414%201.414l-6.16-6.16a1%201%200%200%201%200-1.414%22%2F%3E%3Cpath%20fill%3D%22%23f92f60%22%20d%3D%22M20.602%207.092c-2.64.46-4.66%203.57-4.66%203.57s-2.02-3.11-4.66-3.57c-6.51-1.14-9.2%204.56-8.11%208.81c1.93%207.56%2012.77%2014.17%2012.77%2014.17s10.83-6.61%2012.77-14.17c1.09-4.25-1.6-9.95-8.11-8.81%22%2F%3E%3Cpath%20fill%3D%22%23635994%22%20d%3D%22m3.512%207.562l-1.49-4.85c-.12-.42.27-.81.69-.69l4.85%201.49c.39.12.52.62.23.91l-3.37%203.36c-.29.29-.79.17-.91-.22m22.43%2019.47l-5-5.12l-.02%203.15c0%20.57.22%201.11.61%201.52l2.84%202.91l.02.02c.27.27.64.43%201.05.43c.83%200%201.5-.67%201.5-1.5c0-.65-.42-1.2-1-1.41m-4.01-6.09l5.12%205a1.498%201.498%200%200%200%202.91-.5c0-.41-.16-.78-.43-1.05l-.02-.02l-2.91-2.84a2.2%202.2%200%200%200-1.52-.61z%22%2F%3E%3Cpath%20fill%3D%22%23ff822d%22%20d%3D%22M17.255%2017.255a1%201%200%200%201%201.414%200l8.06%208.06a1%201%200%201%201-1.414%201.414l-8.06-8.06a1%201%200%200%201%200-1.414%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%23ff822d%22%20d%3D%22M5.155%205.155a1%201%200%200%201%201.414%200l6.16%206.16a1%201%200%201%201-1.414%201.414l-6.16-6.16a1%201%200%200%201%200-1.414%22%2F%3E%3Cpath%20fill%3D%22%23f92f60%22%20d%3D%22M20.602%207.092c-2.64.46-4.66%203.57-4.66%203.57s-2.02-3.11-4.66-3.57c-6.51-1.14-9.2%204.56-8.11%208.81c1.93%207.56%2012.77%2014.17%2012.77%2014.17s10.83-6.61%2012.77-14.17c1.09-4.25-1.6-9.95-8.11-8.81%22%2F%3E%3Cpath%20fill%3D%22%23635994%22%20d%3D%22m3.512%207.562l-1.49-4.85c-.12-.42.27-.81.69-.69l4.85%201.49c.39.12.52.62.23.91l-3.37%203.36c-.29.29-.79.17-.91-.22m22.43%2019.47l-5-5.12l-.02%203.15c0%20.57.22%201.11.61%201.52l2.84%202.91l.02.02c.27.27.64.43%201.05.43c.83%200%201.5-.67%201.5-1.5c0-.65-.42-1.2-1-1.41m-4.01-6.09l5.12%205a1.498%201.498%200%200%200%202.91-.5c0-.41-.16-.78-.43-1.05l-.02-.02l-2.91-2.84a2.2%202.2%200%200%200-1.52-.61z%22%2F%3E%3Cpath%20fill%3D%22%23ff822d%22%20d%3D%22M17.255%2017.255a1%201%200%200%201%201.414%200l8.06%208.06a1%201%200%201%201-1.414%201.414l-8.06-8.06a1%201%200%200%201%200-1.414%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/heart-with-arrow.svg?color=%231a73e8&size=48