hearts icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 140 64"><g fill="currentColor"><path d="M30.262 57.02L7.195 40.723c-5.84-3.976-7.56-12.06-3.842-18.063 3.715-6 11.467-7.65 17.306-3.68l4.52 3.76 2.6-5.274c3.717-6.002 11.47-7.65 17.305-3.68 5.84 3.97 7.56 12.054 3.842 18.062L34.49 56.118c-.897 1.512-2.793 1.915-4.228.9z" fill-opacity=".5"><animate attributeName="fill-opacity" begin="0s" dur="1.4s" values="0.5;1;0.5" calcMode="linear" repeatCount="indefinite"/></path><path d="M105.512 56.12l-14.44-24.272c-3.716-6.008-1.996-14.093 3.843-18.062 5.835-3.97 13.588-2.322 17.306 3.68l2.6 5.274 4.52-3.76c5.84-3.97 13.592-2.32 17.307 3.68 3.718 6.003 1.998 14.088-3.842 18.064L109.74 57.02c-1.434 1.014-3.33.61-4.228-.9z" fill-opacity=".5"><animate attributeName="fill-opacity" begin="0.7s" dur="1.4s" values="0.5;1;0.5" calcMode="linear" repeatCount="indefinite"/></path><path d="M67.408 57.834l-23.01-24.98c-5.864-6.15-5.864-16.108 0-22.248 5.86-6.14 15.37-6.14 21.234 0L70 16.168l4.368-5.562c5.863-6.14 15.375-6.14 21.235 0 5.863 6.14 5.863 16.098 0 22.247l-23.007 24.98c-1.43 1.556-3.757 1.556-5.188 0z"/></g></svg>

React

import type { SVGProps } from "react";

export function SvgLoadersHearts(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 140 64"><g fill="currentColor"><path d="M30.262 57.02L7.195 40.723c-5.84-3.976-7.56-12.06-3.842-18.063 3.715-6 11.467-7.65 17.306-3.68l4.52 3.76 2.6-5.274c3.717-6.002 11.47-7.65 17.305-3.68 5.84 3.97 7.56 12.054 3.842 18.062L34.49 56.118c-.897 1.512-2.793 1.915-4.228.9z" fillOpacity=".5"><animate attributeName="fillOpacity" begin="0s" dur="1.4s" values="0.5;1;0.5" calcMode="linear" repeatCount="indefinite"/></path><path d="M105.512 56.12l-14.44-24.272c-3.716-6.008-1.996-14.093 3.843-18.062 5.835-3.97 13.588-2.322 17.306 3.68l2.6 5.274 4.52-3.76c5.84-3.97 13.592-2.32 17.307 3.68 3.718 6.003 1.998 14.088-3.842 18.064L109.74 57.02c-1.434 1.014-3.33.61-4.228-.9z" fillOpacity=".5"><animate attributeName="fillOpacity" begin="0.7s" dur="1.4s" values="0.5;1;0.5" calcMode="linear" repeatCount="indefinite"/></path><path d="M67.408 57.834l-23.01-24.98c-5.864-6.15-5.864-16.108 0-22.248 5.86-6.14 15.37-6.14 21.234 0L70 16.168l4.368-5.562c5.863-6.14 15.375-6.14 21.235 0 5.863 6.14 5.863 16.098 0 22.247l-23.007 24.98c-1.43 1.556-3.757 1.556-5.188 0z"/></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 140 64"><g fill="currentColor"><path d="M30.262 57.02L7.195 40.723c-5.84-3.976-7.56-12.06-3.842-18.063 3.715-6 11.467-7.65 17.306-3.68l4.52 3.76 2.6-5.274c3.717-6.002 11.47-7.65 17.305-3.68 5.84 3.97 7.56 12.054 3.842 18.062L34.49 56.118c-.897 1.512-2.793 1.915-4.228.9z" fill-opacity=".5"><animate attributeName="fill-opacity" begin="0s" dur="1.4s" values="0.5;1;0.5" calcMode="linear" repeatCount="indefinite"/></path><path d="M105.512 56.12l-14.44-24.272c-3.716-6.008-1.996-14.093 3.843-18.062 5.835-3.97 13.588-2.322 17.306 3.68l2.6 5.274 4.52-3.76c5.84-3.97 13.592-2.32 17.307 3.68 3.718 6.003 1.998 14.088-3.842 18.064L109.74 57.02c-1.434 1.014-3.33.61-4.228-.9z" fill-opacity=".5"><animate attributeName="fill-opacity" begin="0.7s" dur="1.4s" values="0.5;1;0.5" calcMode="linear" repeatCount="indefinite"/></path><path d="M67.408 57.834l-23.01-24.98c-5.864-6.15-5.864-16.108 0-22.248 5.86-6.14 15.37-6.14 21.234 0L70 16.168l4.368-5.562c5.863-6.14 15.375-6.14 21.235 0 5.863 6.14 5.863 16.098 0 22.247l-23.007 24.98c-1.43 1.556-3.757 1.556-5.188 0z"/></g></svg>
</template>

CSS

.icon-hearts {
  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%20140%2064%22%3E%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M30.262%2057.02L7.195%2040.723c-5.84-3.976-7.56-12.06-3.842-18.063%203.715-6%2011.467-7.65%2017.306-3.68l4.52%203.76%202.6-5.274c3.717-6.002%2011.47-7.65%2017.305-3.68%205.84%203.97%207.56%2012.054%203.842%2018.062L34.49%2056.118c-.897%201.512-2.793%201.915-4.228.9z%22%20fill-opacity%3D%221%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M105.512%2056.12l-14.44-24.272c-3.716-6.008-1.996-14.093%203.843-18.062%205.835-3.97%2013.588-2.322%2017.306%203.68l2.6%205.274%204.52-3.76c5.84-3.97%2013.592-2.32%2017.307%203.68%203.718%206.003%201.998%2014.088-3.842%2018.064L109.74%2057.02c-1.434%201.014-3.33.61-4.228-.9z%22%20fill-opacity%3D%221%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M67.408%2057.834l-23.01-24.98c-5.864-6.15-5.864-16.108%200-22.248%205.86-6.14%2015.37-6.14%2021.234%200L70%2016.168l4.368-5.562c5.863-6.14%2015.375-6.14%2021.235%200%205.863%206.14%205.863%2016.098%200%2022.247l-23.007%2024.98c-1.43%201.556-3.757%201.556-5.188%200z%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%20140%2064%22%3E%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M30.262%2057.02L7.195%2040.723c-5.84-3.976-7.56-12.06-3.842-18.063%203.715-6%2011.467-7.65%2017.306-3.68l4.52%203.76%202.6-5.274c3.717-6.002%2011.47-7.65%2017.305-3.68%205.84%203.97%207.56%2012.054%203.842%2018.062L34.49%2056.118c-.897%201.512-2.793%201.915-4.228.9z%22%20fill-opacity%3D%221%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M105.512%2056.12l-14.44-24.272c-3.716-6.008-1.996-14.093%203.843-18.062%205.835-3.97%2013.588-2.322%2017.306%203.68l2.6%205.274%204.52-3.76c5.84-3.97%2013.592-2.32%2017.307%203.68%203.718%206.003%201.998%2014.088-3.842%2018.064L109.74%2057.02c-1.434%201.014-3.33.61-4.228-.9z%22%20fill-opacity%3D%221%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M67.408%2057.834l-23.01-24.98c-5.864-6.15-5.864-16.108%200-22.248%205.86-6.14%2015.37-6.14%2021.234%200L70%2016.168l4.368-5.562c5.863-6.14%2015.375-6.14%2021.235%200%205.863%206.14%205.863%2016.098%200%2022.247l-23.007%2024.98c-1.43%201.556-3.757%201.556-5.188%200z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

This icon is animated. Browsers do not run SVG animation inside a CSS mask, so the rule above uses a still of the drawn icon. Inline the SVG (or use the React/Vue/Svelte snippet) to keep the animation.