heart with ribbon emoji

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

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

The same emoji in other sets

heart-with-ribbonEmoji One (Colored)heart-with-ribbonFluent Emojiheart-with-ribbonFluent Emoji High Contrastheart-with-ribbonNoto Emojiheart-with-ribbonOpenMojiheart-with-ribbonStreamline Emojisheart-with-ribbonTwitter 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 ribbon emoji

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="none"><path fill="#f92f60" d="M15.097 29.441c.534.3 1.178.284 1.709-.021c3.389-1.947 9.222-6.382 11.519-12.134C31.712 9.76 23.758 3.754 18.26 8.074c-.563.443-1.269.949-1.764 1.43c-.24.232-.66.256-.907.032c-.653-.59-1.653-1.336-2.299-1.773c-4.686-3.17-13.214 1.009-9.576 9.93c1.327 3.986 7.629 9.636 11.382 11.748"/><path fill="#ffb02e" d="m4.656 25.038l.88-.352a.5.5 0 0 1 .65.278l.366.915a.5.5 0 0 0 .923.011l1.623-3.786L8 20.994V19l-1.226 1.886l-2.057 1.936l-.702 1.544a.5.5 0 0 0 .641.672m10.688 0l-.88-.352a.5.5 0 0 0-.65.278l-.366.915a.5.5 0 0 1-.924.011l-1.627-3.797l.482-1.703L12 19l.917 1.873l2.375 1.968l.694 1.525a.5.5 0 0 1-.641.672"/><path fill="#ff822d" d="M4.688 22.885L6 20l2-1l2 1l-.923 2.154zm6.235-.731L10 20l2-1l2 1l1.311 2.885z"/><path fill="#ff6723" d="M4.027 21.75C5.803 21.75 7.58 20 7.58 20s-1.777-1.75-3.553-1.75c-.982 0-1.777.784-1.777 1.75s.795 1.75 1.777 1.75m11.946 0c-1.776 0-3.553-1.75-3.553-1.75s1.777-1.75 3.553-1.75c.982 0 1.777.784 1.777 1.75s-.795 1.75-1.777 1.75"/><path fill="#ffb02e" d="M29.029 15H18v5h8.938c.54-.866 1.01-1.773 1.387-2.714A9.3 9.3 0 0 0 29.029 15m-21.101.179c.04-.098.059-.202.078-.306l.012-.064A1 1 0 0 1 9 14h2a1 1 0 0 1 .994.873c.019.104.038.208.078.306L13 17.5l-.928 2.321c-.04.098-.059.202-.078.306l-.012.065A1 1 0 0 1 11 21H9a1 1 0 0 1-.982-.808l-.012-.065a1.6 1.6 0 0 0-.078-.306L7 17.5z"/><path fill="#fcd53f" d="M4 13c2 0 4 2 4 2v5s-.136.136-.371.336C6.959 20.906 5.479 22 4 22a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2m3.252 7a9 9 0 0 0-.78-.584C5.749 18.933 4.85 18.5 4 18.5a1.5 1.5 0 0 0 0 3c.85 0 1.748-.433 2.473-.916c.311-.208.578-.416.779-.584M16 13c-2 0-4 2-4 2v5s.136.136.371.336c.67.57 2.15 1.664 3.629 1.664a2 2 0 0 0 2-2v-5a2 2 0 0 0-2-2m-3.252 7c.201-.168.468-.376.78-.584c.724-.483 1.622-.916 2.472-.916a1.5 1.5 0 0 1 0 3c-.85 0-1.748-.433-2.473-.916a9 9 0 0 1-.779-.584"/></g></svg>

React

import type { SVGProps } from "react";

export function FluentEmojiFlatHeartWithRibbon(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="#f92f60" d="M15.097 29.441c.534.3 1.178.284 1.709-.021c3.389-1.947 9.222-6.382 11.519-12.134C31.712 9.76 23.758 3.754 18.26 8.074c-.563.443-1.269.949-1.764 1.43c-.24.232-.66.256-.907.032c-.653-.59-1.653-1.336-2.299-1.773c-4.686-3.17-13.214 1.009-9.576 9.93c1.327 3.986 7.629 9.636 11.382 11.748"/><path fill="#ffb02e" d="m4.656 25.038l.88-.352a.5.5 0 0 1 .65.278l.366.915a.5.5 0 0 0 .923.011l1.623-3.786L8 20.994V19l-1.226 1.886l-2.057 1.936l-.702 1.544a.5.5 0 0 0 .641.672m10.688 0l-.88-.352a.5.5 0 0 0-.65.278l-.366.915a.5.5 0 0 1-.924.011l-1.627-3.797l.482-1.703L12 19l.917 1.873l2.375 1.968l.694 1.525a.5.5 0 0 1-.641.672"/><path fill="#ff822d" d="M4.688 22.885L6 20l2-1l2 1l-.923 2.154zm6.235-.731L10 20l2-1l2 1l1.311 2.885z"/><path fill="#ff6723" d="M4.027 21.75C5.803 21.75 7.58 20 7.58 20s-1.777-1.75-3.553-1.75c-.982 0-1.777.784-1.777 1.75s.795 1.75 1.777 1.75m11.946 0c-1.776 0-3.553-1.75-3.553-1.75s1.777-1.75 3.553-1.75c.982 0 1.777.784 1.777 1.75s-.795 1.75-1.777 1.75"/><path fill="#ffb02e" d="M29.029 15H18v5h8.938c.54-.866 1.01-1.773 1.387-2.714A9.3 9.3 0 0 0 29.029 15m-21.101.179c.04-.098.059-.202.078-.306l.012-.064A1 1 0 0 1 9 14h2a1 1 0 0 1 .994.873c.019.104.038.208.078.306L13 17.5l-.928 2.321c-.04.098-.059.202-.078.306l-.012.065A1 1 0 0 1 11 21H9a1 1 0 0 1-.982-.808l-.012-.065a1.6 1.6 0 0 0-.078-.306L7 17.5z"/><path fill="#fcd53f" d="M4 13c2 0 4 2 4 2v5s-.136.136-.371.336C6.959 20.906 5.479 22 4 22a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2m3.252 7a9 9 0 0 0-.78-.584C5.749 18.933 4.85 18.5 4 18.5a1.5 1.5 0 0 0 0 3c.85 0 1.748-.433 2.473-.916c.311-.208.578-.416.779-.584M16 13c-2 0-4 2-4 2v5s.136.136.371.336c.67.57 2.15 1.664 3.629 1.664a2 2 0 0 0 2-2v-5a2 2 0 0 0-2-2m-3.252 7c.201-.168.468-.376.78-.584c.724-.483 1.622-.916 2.472-.916a1.5 1.5 0 0 1 0 3c-.85 0-1.748-.433-2.473-.916a9 9 0 0 1-.779-.584"/></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="#f92f60" d="M15.097 29.441c.534.3 1.178.284 1.709-.021c3.389-1.947 9.222-6.382 11.519-12.134C31.712 9.76 23.758 3.754 18.26 8.074c-.563.443-1.269.949-1.764 1.43c-.24.232-.66.256-.907.032c-.653-.59-1.653-1.336-2.299-1.773c-4.686-3.17-13.214 1.009-9.576 9.93c1.327 3.986 7.629 9.636 11.382 11.748"/><path fill="#ffb02e" d="m4.656 25.038l.88-.352a.5.5 0 0 1 .65.278l.366.915a.5.5 0 0 0 .923.011l1.623-3.786L8 20.994V19l-1.226 1.886l-2.057 1.936l-.702 1.544a.5.5 0 0 0 .641.672m10.688 0l-.88-.352a.5.5 0 0 0-.65.278l-.366.915a.5.5 0 0 1-.924.011l-1.627-3.797l.482-1.703L12 19l.917 1.873l2.375 1.968l.694 1.525a.5.5 0 0 1-.641.672"/><path fill="#ff822d" d="M4.688 22.885L6 20l2-1l2 1l-.923 2.154zm6.235-.731L10 20l2-1l2 1l1.311 2.885z"/><path fill="#ff6723" d="M4.027 21.75C5.803 21.75 7.58 20 7.58 20s-1.777-1.75-3.553-1.75c-.982 0-1.777.784-1.777 1.75s.795 1.75 1.777 1.75m11.946 0c-1.776 0-3.553-1.75-3.553-1.75s1.777-1.75 3.553-1.75c.982 0 1.777.784 1.777 1.75s-.795 1.75-1.777 1.75"/><path fill="#ffb02e" d="M29.029 15H18v5h8.938c.54-.866 1.01-1.773 1.387-2.714A9.3 9.3 0 0 0 29.029 15m-21.101.179c.04-.098.059-.202.078-.306l.012-.064A1 1 0 0 1 9 14h2a1 1 0 0 1 .994.873c.019.104.038.208.078.306L13 17.5l-.928 2.321c-.04.098-.059.202-.078.306l-.012.065A1 1 0 0 1 11 21H9a1 1 0 0 1-.982-.808l-.012-.065a1.6 1.6 0 0 0-.078-.306L7 17.5z"/><path fill="#fcd53f" d="M4 13c2 0 4 2 4 2v5s-.136.136-.371.336C6.959 20.906 5.479 22 4 22a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2m3.252 7a9 9 0 0 0-.78-.584C5.749 18.933 4.85 18.5 4 18.5a1.5 1.5 0 0 0 0 3c.85 0 1.748-.433 2.473-.916c.311-.208.578-.416.779-.584M16 13c-2 0-4 2-4 2v5s.136.136.371.336c.67.57 2.15 1.664 3.629 1.664a2 2 0 0 0 2-2v-5a2 2 0 0 0-2-2m-3.252 7c.201-.168.468-.376.78-.584c.724-.483 1.622-.916 2.472-.916a1.5 1.5 0 0 1 0 3c-.85 0-1.748-.433-2.473-.916a9 9 0 0 1-.779-.584"/></g></svg>
</template>

CSS

.icon-heart-with-ribbon {
  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%23f92f60%22%20d%3D%22M15.097%2029.441c.534.3%201.178.284%201.709-.021c3.389-1.947%209.222-6.382%2011.519-12.134C31.712%209.76%2023.758%203.754%2018.26%208.074c-.563.443-1.269.949-1.764%201.43c-.24.232-.66.256-.907.032c-.653-.59-1.653-1.336-2.299-1.773c-4.686-3.17-13.214%201.009-9.576%209.93c1.327%203.986%207.629%209.636%2011.382%2011.748%22%2F%3E%3Cpath%20fill%3D%22%23ffb02e%22%20d%3D%22m4.656%2025.038l.88-.352a.5.5%200%200%201%20.65.278l.366.915a.5.5%200%200%200%20.923.011l1.623-3.786L8%2020.994V19l-1.226%201.886l-2.057%201.936l-.702%201.544a.5.5%200%200%200%20.641.672m10.688%200l-.88-.352a.5.5%200%200%200-.65.278l-.366.915a.5.5%200%200%201-.924.011l-1.627-3.797l.482-1.703L12%2019l.917%201.873l2.375%201.968l.694%201.525a.5.5%200%200%201-.641.672%22%2F%3E%3Cpath%20fill%3D%22%23ff822d%22%20d%3D%22M4.688%2022.885L6%2020l2-1l2%201l-.923%202.154zm6.235-.731L10%2020l2-1l2%201l1.311%202.885z%22%2F%3E%3Cpath%20fill%3D%22%23ff6723%22%20d%3D%22M4.027%2021.75C5.803%2021.75%207.58%2020%207.58%2020s-1.777-1.75-3.553-1.75c-.982%200-1.777.784-1.777%201.75s.795%201.75%201.777%201.75m11.946%200c-1.776%200-3.553-1.75-3.553-1.75s1.777-1.75%203.553-1.75c.982%200%201.777.784%201.777%201.75s-.795%201.75-1.777%201.75%22%2F%3E%3Cpath%20fill%3D%22%23ffb02e%22%20d%3D%22M29.029%2015H18v5h8.938c.54-.866%201.01-1.773%201.387-2.714A9.3%209.3%200%200%200%2029.029%2015m-21.101.179c.04-.098.059-.202.078-.306l.012-.064A1%201%200%200%201%209%2014h2a1%201%200%200%201%20.994.873c.019.104.038.208.078.306L13%2017.5l-.928%202.321c-.04.098-.059.202-.078.306l-.012.065A1%201%200%200%201%2011%2021H9a1%201%200%200%201-.982-.808l-.012-.065a1.6%201.6%200%200%200-.078-.306L7%2017.5z%22%2F%3E%3Cpath%20fill%3D%22%23fcd53f%22%20d%3D%22M4%2013c2%200%204%202%204%202v5s-.136.136-.371.336C6.959%2020.906%205.479%2022%204%2022a2%202%200%200%201-2-2v-5a2%202%200%200%201%202-2m3.252%207a9%209%200%200%200-.78-.584C5.749%2018.933%204.85%2018.5%204%2018.5a1.5%201.5%200%200%200%200%203c.85%200%201.748-.433%202.473-.916c.311-.208.578-.416.779-.584M16%2013c-2%200-4%202-4%202v5s.136.136.371.336c.67.57%202.15%201.664%203.629%201.664a2%202%200%200%200%202-2v-5a2%202%200%200%200-2-2m-3.252%207c.201-.168.468-.376.78-.584c.724-.483%201.622-.916%202.472-.916a1.5%201.5%200%200%201%200%203c-.85%200-1.748-.433-2.473-.916a9%209%200%200%201-.779-.584%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%23f92f60%22%20d%3D%22M15.097%2029.441c.534.3%201.178.284%201.709-.021c3.389-1.947%209.222-6.382%2011.519-12.134C31.712%209.76%2023.758%203.754%2018.26%208.074c-.563.443-1.269.949-1.764%201.43c-.24.232-.66.256-.907.032c-.653-.59-1.653-1.336-2.299-1.773c-4.686-3.17-13.214%201.009-9.576%209.93c1.327%203.986%207.629%209.636%2011.382%2011.748%22%2F%3E%3Cpath%20fill%3D%22%23ffb02e%22%20d%3D%22m4.656%2025.038l.88-.352a.5.5%200%200%201%20.65.278l.366.915a.5.5%200%200%200%20.923.011l1.623-3.786L8%2020.994V19l-1.226%201.886l-2.057%201.936l-.702%201.544a.5.5%200%200%200%20.641.672m10.688%200l-.88-.352a.5.5%200%200%200-.65.278l-.366.915a.5.5%200%200%201-.924.011l-1.627-3.797l.482-1.703L12%2019l.917%201.873l2.375%201.968l.694%201.525a.5.5%200%200%201-.641.672%22%2F%3E%3Cpath%20fill%3D%22%23ff822d%22%20d%3D%22M4.688%2022.885L6%2020l2-1l2%201l-.923%202.154zm6.235-.731L10%2020l2-1l2%201l1.311%202.885z%22%2F%3E%3Cpath%20fill%3D%22%23ff6723%22%20d%3D%22M4.027%2021.75C5.803%2021.75%207.58%2020%207.58%2020s-1.777-1.75-3.553-1.75c-.982%200-1.777.784-1.777%201.75s.795%201.75%201.777%201.75m11.946%200c-1.776%200-3.553-1.75-3.553-1.75s1.777-1.75%203.553-1.75c.982%200%201.777.784%201.777%201.75s-.795%201.75-1.777%201.75%22%2F%3E%3Cpath%20fill%3D%22%23ffb02e%22%20d%3D%22M29.029%2015H18v5h8.938c.54-.866%201.01-1.773%201.387-2.714A9.3%209.3%200%200%200%2029.029%2015m-21.101.179c.04-.098.059-.202.078-.306l.012-.064A1%201%200%200%201%209%2014h2a1%201%200%200%201%20.994.873c.019.104.038.208.078.306L13%2017.5l-.928%202.321c-.04.098-.059.202-.078.306l-.012.065A1%201%200%200%201%2011%2021H9a1%201%200%200%201-.982-.808l-.012-.065a1.6%201.6%200%200%200-.078-.306L7%2017.5z%22%2F%3E%3Cpath%20fill%3D%22%23fcd53f%22%20d%3D%22M4%2013c2%200%204%202%204%202v5s-.136.136-.371.336C6.959%2020.906%205.479%2022%204%2022a2%202%200%200%201-2-2v-5a2%202%200%200%201%202-2m3.252%207a9%209%200%200%200-.78-.584C5.749%2018.933%204.85%2018.5%204%2018.5a1.5%201.5%200%200%200%200%203c.85%200%201.748-.433%202.473-.916c.311-.208.578-.416.779-.584M16%2013c-2%200-4%202-4%202v5s.136.136.371.336c.67.57%202.15%201.664%203.629%201.664a2%202%200%200%200%202-2v-5a2%202%200%200%200-2-2m-3.252%207c.201-.168.468-.376.78-.584c.724-.483%201.622-.916%202.472-.916a1.5%201.5%200%200%201%200%203c-.85%200-1.748-.433-2.473-.916a9%209%200%200%201-.779-.584%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-ribbon.svg?color=%231a73e8&size=48