heart with ribbon emoji

heart-with-ribbon from Emoji One (Colored) by Emoji One · Default · Symbols · CC-BY-4.0 Attribution required.

Name
heart-with-ribbon
Set
Emoji One (Colored)
Style
Default
Category
Symbols
Viewbox
64×64
License
CC BY 4.0

The same emoji in other sets

heart-with-ribbonFluent Emojiheart-with-ribbonFluent Emoji Flatheart-with-ribbonFluent Emoji High Contrastheart-with-ribbonNoto Emojiheart-with-ribbonOpenMojiheart-with-ribbonStreamline Emojisheart-with-ribbonTwitter Emoji

More symbols icons from Emoji One (Colored)

a-buttonab-buttonanger-symbolantenna-barsaquariusariesasteriskatm-signatom-symbolb-buttonbaby-symbolback-arrowbaggage-claimballot-box-with-checkbeating-heartbellbell-with-slashbiohazardblack-circleblack-heartblack-large-squareblack-medium-small-squareblack-medium-squareblack-small-square

Use the heart with ribbon emoji

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 64 64"><path fill="#ff5a79" d="M61.1 18.4q1.2 3.3.9 6.6L45.4 8.1C51.5 7.4 58 10 61.1 18.4m-58.2-.1C9.3 1.1 30.1 8.8 32 17.4c.9-3.3 4.1-6.2 8.1-8l20.4 20.9C54.8 44 33.9 54.8 32 57C29.6 54.8-4 36.9 2.9 18.3"/><path fill="#dae4ea" d="m45.4 8.1l16.5 16.8c-.2 1.9-.7 3.7-1.4 5.5L40.1 9.5c1.7-.7 3.5-1.2 5.3-1.4m8.8 16.7s-6.4 6-5.1 15.1L44.2 35l-4.9 5s1-10.9 10.1-20.1z"/><path fill="#fff" d="M49.1 20.1c-1.8 1.8-1.6 5.6.4 8.3l1.6 2.2c2 2.7 4.4 3.5 5.3 1.8c.9-1.8 3-4 4.8-4.9c1.7-.9.9-3.3-1.7-5.4l-2.1-1.6c-2.9-2-6.5-2.2-8.3-.4"/><path fill="#dae4ea" d="M49.4 19.8c-.5.7.5 1.6 1.9 2.4l.8.4c1.5.8 1.9.3.8-1l-.6-.8c-.8-1.4-2.3-1.7-2.9-1"/><path fill="#c4ced6" d="M55.5 32c0 .4-.4.4-.6.4c-.5.1-1.3-.2-2.3-1.3c-.3-.3-.6-.7-.9-1l-1.6-2.2c-1.1-1.5-1.6-3.5-1.4-5c.1 0 6.8 4.7 6.8 9.1"/><path fill="#dae4ea" d="M44.6 15s-5.8 6.6-14.8 5.3l4.8 4.9l-4.9 5s10.7-1 19.7-10.3z"/><path fill="#fff" d="M49.1 20.2c-1.8 1.8-5.5 1.7-8.1-.4l-2.1-1.6c-2.7-2-3.5-4.5-1.7-5.4c1.7-.9 3.9-3.1 4.8-4.9s3.3-1 5.3 1.8l1.6 2.2c1.9 2.7 2 6.5.2 8.3"/><path fill="#dae4ea" d="M49.5 19.8c-.6.5-1.6-.5-2.3-2l-.5-.8c-.8-1.5-.3-1.9 1-.9l.8.6c1.3 1.1 1.7 2.6 1 3.1"/><path fill="#c4ced6" d="M37.5 13.6c-.4 0-.3.4-.4.6c-.1.5.2 1.3 1.3 2.4c.3.3.6.6 1 .9l2.1 1.6c1.5 1.1 3.4 1.6 4.9 1.4c.1 0-4.6-6.9-8.9-6.9"/><path fill="#fff" d="M47.3 18.3c-1 1.4-1.1 3.2-.3 4.1c.9.9 2.6.7 4-.3l.4-.3c1.3-1 1.4-2.9.3-4.1l-.1-.1c-1.2-1.2-3-1.1-4 .3z"/><path fill="#dae4ea" d="M48.7 20.6c.8.8 2.3.8 3.6 0c-.2.4-.5.8-.9 1.1l-.4.4c-1.3 1-3.1 1.2-4 .3s-.7-2.7.3-4.1l.3-.5c.3-.4.7-.7 1.1-.9c-.8 1.3-.8 2.9 0 3.7"/></svg>

React

import type { SVGProps } from "react";

export function EmojioneHeartWithRibbon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 64 64"><path fill="#ff5a79" d="M61.1 18.4q1.2 3.3.9 6.6L45.4 8.1C51.5 7.4 58 10 61.1 18.4m-58.2-.1C9.3 1.1 30.1 8.8 32 17.4c.9-3.3 4.1-6.2 8.1-8l20.4 20.9C54.8 44 33.9 54.8 32 57C29.6 54.8-4 36.9 2.9 18.3"/><path fill="#dae4ea" d="m45.4 8.1l16.5 16.8c-.2 1.9-.7 3.7-1.4 5.5L40.1 9.5c1.7-.7 3.5-1.2 5.3-1.4m8.8 16.7s-6.4 6-5.1 15.1L44.2 35l-4.9 5s1-10.9 10.1-20.1z"/><path fill="#fff" d="M49.1 20.1c-1.8 1.8-1.6 5.6.4 8.3l1.6 2.2c2 2.7 4.4 3.5 5.3 1.8c.9-1.8 3-4 4.8-4.9c1.7-.9.9-3.3-1.7-5.4l-2.1-1.6c-2.9-2-6.5-2.2-8.3-.4"/><path fill="#dae4ea" d="M49.4 19.8c-.5.7.5 1.6 1.9 2.4l.8.4c1.5.8 1.9.3.8-1l-.6-.8c-.8-1.4-2.3-1.7-2.9-1"/><path fill="#c4ced6" d="M55.5 32c0 .4-.4.4-.6.4c-.5.1-1.3-.2-2.3-1.3c-.3-.3-.6-.7-.9-1l-1.6-2.2c-1.1-1.5-1.6-3.5-1.4-5c.1 0 6.8 4.7 6.8 9.1"/><path fill="#dae4ea" d="M44.6 15s-5.8 6.6-14.8 5.3l4.8 4.9l-4.9 5s10.7-1 19.7-10.3z"/><path fill="#fff" d="M49.1 20.2c-1.8 1.8-5.5 1.7-8.1-.4l-2.1-1.6c-2.7-2-3.5-4.5-1.7-5.4c1.7-.9 3.9-3.1 4.8-4.9s3.3-1 5.3 1.8l1.6 2.2c1.9 2.7 2 6.5.2 8.3"/><path fill="#dae4ea" d="M49.5 19.8c-.6.5-1.6-.5-2.3-2l-.5-.8c-.8-1.5-.3-1.9 1-.9l.8.6c1.3 1.1 1.7 2.6 1 3.1"/><path fill="#c4ced6" d="M37.5 13.6c-.4 0-.3.4-.4.6c-.1.5.2 1.3 1.3 2.4c.3.3.6.6 1 .9l2.1 1.6c1.5 1.1 3.4 1.6 4.9 1.4c.1 0-4.6-6.9-8.9-6.9"/><path fill="#fff" d="M47.3 18.3c-1 1.4-1.1 3.2-.3 4.1c.9.9 2.6.7 4-.3l.4-.3c1.3-1 1.4-2.9.3-4.1l-.1-.1c-1.2-1.2-3-1.1-4 .3z"/><path fill="#dae4ea" d="M48.7 20.6c.8.8 2.3.8 3.6 0c-.2.4-.5.8-.9 1.1l-.4.4c-1.3 1-3.1 1.2-4 .3s-.7-2.7.3-4.1l.3-.5c.3-.4.7-.7 1.1-.9c-.8 1.3-.8 2.9 0 3.7"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 64 64"><path fill="#ff5a79" d="M61.1 18.4q1.2 3.3.9 6.6L45.4 8.1C51.5 7.4 58 10 61.1 18.4m-58.2-.1C9.3 1.1 30.1 8.8 32 17.4c.9-3.3 4.1-6.2 8.1-8l20.4 20.9C54.8 44 33.9 54.8 32 57C29.6 54.8-4 36.9 2.9 18.3"/><path fill="#dae4ea" d="m45.4 8.1l16.5 16.8c-.2 1.9-.7 3.7-1.4 5.5L40.1 9.5c1.7-.7 3.5-1.2 5.3-1.4m8.8 16.7s-6.4 6-5.1 15.1L44.2 35l-4.9 5s1-10.9 10.1-20.1z"/><path fill="#fff" d="M49.1 20.1c-1.8 1.8-1.6 5.6.4 8.3l1.6 2.2c2 2.7 4.4 3.5 5.3 1.8c.9-1.8 3-4 4.8-4.9c1.7-.9.9-3.3-1.7-5.4l-2.1-1.6c-2.9-2-6.5-2.2-8.3-.4"/><path fill="#dae4ea" d="M49.4 19.8c-.5.7.5 1.6 1.9 2.4l.8.4c1.5.8 1.9.3.8-1l-.6-.8c-.8-1.4-2.3-1.7-2.9-1"/><path fill="#c4ced6" d="M55.5 32c0 .4-.4.4-.6.4c-.5.1-1.3-.2-2.3-1.3c-.3-.3-.6-.7-.9-1l-1.6-2.2c-1.1-1.5-1.6-3.5-1.4-5c.1 0 6.8 4.7 6.8 9.1"/><path fill="#dae4ea" d="M44.6 15s-5.8 6.6-14.8 5.3l4.8 4.9l-4.9 5s10.7-1 19.7-10.3z"/><path fill="#fff" d="M49.1 20.2c-1.8 1.8-5.5 1.7-8.1-.4l-2.1-1.6c-2.7-2-3.5-4.5-1.7-5.4c1.7-.9 3.9-3.1 4.8-4.9s3.3-1 5.3 1.8l1.6 2.2c1.9 2.7 2 6.5.2 8.3"/><path fill="#dae4ea" d="M49.5 19.8c-.6.5-1.6-.5-2.3-2l-.5-.8c-.8-1.5-.3-1.9 1-.9l.8.6c1.3 1.1 1.7 2.6 1 3.1"/><path fill="#c4ced6" d="M37.5 13.6c-.4 0-.3.4-.4.6c-.1.5.2 1.3 1.3 2.4c.3.3.6.6 1 .9l2.1 1.6c1.5 1.1 3.4 1.6 4.9 1.4c.1 0-4.6-6.9-8.9-6.9"/><path fill="#fff" d="M47.3 18.3c-1 1.4-1.1 3.2-.3 4.1c.9.9 2.6.7 4-.3l.4-.3c1.3-1 1.4-2.9.3-4.1l-.1-.1c-1.2-1.2-3-1.1-4 .3z"/><path fill="#dae4ea" d="M48.7 20.6c.8.8 2.3.8 3.6 0c-.2.4-.5.8-.9 1.1l-.4.4c-1.3 1-3.1 1.2-4 .3s-.7-2.7.3-4.1l.3-.5c.3-.4.7-.7 1.1-.9c-.8 1.3-.8 2.9 0 3.7"/></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%2064%2064%22%3E%3Cpath%20fill%3D%22%23ff5a79%22%20d%3D%22M61.1%2018.4q1.2%203.3.9%206.6L45.4%208.1C51.5%207.4%2058%2010%2061.1%2018.4m-58.2-.1C9.3%201.1%2030.1%208.8%2032%2017.4c.9-3.3%204.1-6.2%208.1-8l20.4%2020.9C54.8%2044%2033.9%2054.8%2032%2057C29.6%2054.8-4%2036.9%202.9%2018.3%22%2F%3E%3Cpath%20fill%3D%22%23dae4ea%22%20d%3D%22m45.4%208.1l16.5%2016.8c-.2%201.9-.7%203.7-1.4%205.5L40.1%209.5c1.7-.7%203.5-1.2%205.3-1.4m8.8%2016.7s-6.4%206-5.1%2015.1L44.2%2035l-4.9%205s1-10.9%2010.1-20.1z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M49.1%2020.1c-1.8%201.8-1.6%205.6.4%208.3l1.6%202.2c2%202.7%204.4%203.5%205.3%201.8c.9-1.8%203-4%204.8-4.9c1.7-.9.9-3.3-1.7-5.4l-2.1-1.6c-2.9-2-6.5-2.2-8.3-.4%22%2F%3E%3Cpath%20fill%3D%22%23dae4ea%22%20d%3D%22M49.4%2019.8c-.5.7.5%201.6%201.9%202.4l.8.4c1.5.8%201.9.3.8-1l-.6-.8c-.8-1.4-2.3-1.7-2.9-1%22%2F%3E%3Cpath%20fill%3D%22%23c4ced6%22%20d%3D%22M55.5%2032c0%20.4-.4.4-.6.4c-.5.1-1.3-.2-2.3-1.3c-.3-.3-.6-.7-.9-1l-1.6-2.2c-1.1-1.5-1.6-3.5-1.4-5c.1%200%206.8%204.7%206.8%209.1%22%2F%3E%3Cpath%20fill%3D%22%23dae4ea%22%20d%3D%22M44.6%2015s-5.8%206.6-14.8%205.3l4.8%204.9l-4.9%205s10.7-1%2019.7-10.3z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M49.1%2020.2c-1.8%201.8-5.5%201.7-8.1-.4l-2.1-1.6c-2.7-2-3.5-4.5-1.7-5.4c1.7-.9%203.9-3.1%204.8-4.9s3.3-1%205.3%201.8l1.6%202.2c1.9%202.7%202%206.5.2%208.3%22%2F%3E%3Cpath%20fill%3D%22%23dae4ea%22%20d%3D%22M49.5%2019.8c-.6.5-1.6-.5-2.3-2l-.5-.8c-.8-1.5-.3-1.9%201-.9l.8.6c1.3%201.1%201.7%202.6%201%203.1%22%2F%3E%3Cpath%20fill%3D%22%23c4ced6%22%20d%3D%22M37.5%2013.6c-.4%200-.3.4-.4.6c-.1.5.2%201.3%201.3%202.4c.3.3.6.6%201%20.9l2.1%201.6c1.5%201.1%203.4%201.6%204.9%201.4c.1%200-4.6-6.9-8.9-6.9%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M47.3%2018.3c-1%201.4-1.1%203.2-.3%204.1c.9.9%202.6.7%204-.3l.4-.3c1.3-1%201.4-2.9.3-4.1l-.1-.1c-1.2-1.2-3-1.1-4%20.3z%22%2F%3E%3Cpath%20fill%3D%22%23dae4ea%22%20d%3D%22M48.7%2020.6c.8.8%202.3.8%203.6%200c-.2.4-.5.8-.9%201.1l-.4.4c-1.3%201-3.1%201.2-4%20.3s-.7-2.7.3-4.1l.3-.5c.3-.4.7-.7%201.1-.9c-.8%201.3-.8%202.9%200%203.7%22%2F%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%2064%2064%22%3E%3Cpath%20fill%3D%22%23ff5a79%22%20d%3D%22M61.1%2018.4q1.2%203.3.9%206.6L45.4%208.1C51.5%207.4%2058%2010%2061.1%2018.4m-58.2-.1C9.3%201.1%2030.1%208.8%2032%2017.4c.9-3.3%204.1-6.2%208.1-8l20.4%2020.9C54.8%2044%2033.9%2054.8%2032%2057C29.6%2054.8-4%2036.9%202.9%2018.3%22%2F%3E%3Cpath%20fill%3D%22%23dae4ea%22%20d%3D%22m45.4%208.1l16.5%2016.8c-.2%201.9-.7%203.7-1.4%205.5L40.1%209.5c1.7-.7%203.5-1.2%205.3-1.4m8.8%2016.7s-6.4%206-5.1%2015.1L44.2%2035l-4.9%205s1-10.9%2010.1-20.1z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M49.1%2020.1c-1.8%201.8-1.6%205.6.4%208.3l1.6%202.2c2%202.7%204.4%203.5%205.3%201.8c.9-1.8%203-4%204.8-4.9c1.7-.9.9-3.3-1.7-5.4l-2.1-1.6c-2.9-2-6.5-2.2-8.3-.4%22%2F%3E%3Cpath%20fill%3D%22%23dae4ea%22%20d%3D%22M49.4%2019.8c-.5.7.5%201.6%201.9%202.4l.8.4c1.5.8%201.9.3.8-1l-.6-.8c-.8-1.4-2.3-1.7-2.9-1%22%2F%3E%3Cpath%20fill%3D%22%23c4ced6%22%20d%3D%22M55.5%2032c0%20.4-.4.4-.6.4c-.5.1-1.3-.2-2.3-1.3c-.3-.3-.6-.7-.9-1l-1.6-2.2c-1.1-1.5-1.6-3.5-1.4-5c.1%200%206.8%204.7%206.8%209.1%22%2F%3E%3Cpath%20fill%3D%22%23dae4ea%22%20d%3D%22M44.6%2015s-5.8%206.6-14.8%205.3l4.8%204.9l-4.9%205s10.7-1%2019.7-10.3z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M49.1%2020.2c-1.8%201.8-5.5%201.7-8.1-.4l-2.1-1.6c-2.7-2-3.5-4.5-1.7-5.4c1.7-.9%203.9-3.1%204.8-4.9s3.3-1%205.3%201.8l1.6%202.2c1.9%202.7%202%206.5.2%208.3%22%2F%3E%3Cpath%20fill%3D%22%23dae4ea%22%20d%3D%22M49.5%2019.8c-.6.5-1.6-.5-2.3-2l-.5-.8c-.8-1.5-.3-1.9%201-.9l.8.6c1.3%201.1%201.7%202.6%201%203.1%22%2F%3E%3Cpath%20fill%3D%22%23c4ced6%22%20d%3D%22M37.5%2013.6c-.4%200-.3.4-.4.6c-.1.5.2%201.3%201.3%202.4c.3.3.6.6%201%20.9l2.1%201.6c1.5%201.1%203.4%201.6%204.9%201.4c.1%200-4.6-6.9-8.9-6.9%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M47.3%2018.3c-1%201.4-1.1%203.2-.3%204.1c.9.9%202.6.7%204-.3l.4-.3c1.3-1%201.4-2.9.3-4.1l-.1-.1c-1.2-1.2-3-1.1-4%20.3z%22%2F%3E%3Cpath%20fill%3D%22%23dae4ea%22%20d%3D%22M48.7%2020.6c.8.8%202.3.8%203.6%200c-.2.4-.5.8-.9%201.1l-.4.4c-1.3%201-3.1%201.2-4%20.3s-.7-2.7.3-4.1l.3-.5c.3-.4.7-.7%201.1-.9c-.8%201.3-.8%202.9%200%203.7%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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