hearts icon
hearts from Reicon by REICON · Outline · Like · MIT Free for personal and commercial use.
- Name
- hearts
- Set
- Reicon
- Style
- Outline
- Category
- Like
- Viewbox
- 24×24
- License
- MIT
2 other variants in Reicon
The same icon in other sets
All hearts icons →More like icons from Reicon
Use the hearts icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M5.636 4.155c-1.654.79-2.886 2.684-2.886 4.964c0 4.227 2.999 6.652 5.837 8.948q.431.346.852.693c.526.433.995.814 1.447 1.09s.813.4 1.114.4c.324 0 .689-.139 1.127-.409c-1.362-1.047-2.877-2.5-2.877-4.782c0-1.573.937-2.927 2.273-3.508c1.21-.526 2.668-.39 3.977.613c.814-.624 1.692-.918 2.547-.914a3.63 3.63 0 0 1 1.78.476a8 8 0 0 0 .423-2.607c0-2.28-1.232-4.174-2.886-4.964c-1.596-.763-3.75-.57-5.812 1.67a.75.75 0 0 1-1.104 0c-2.062-2.24-4.216-2.433-5.812-1.67m16.386 8.644a3.85 3.85 0 0 1 .728 2.26c0 1.518-.67 2.667-1.51 3.566c-.666.713-1.484 1.311-2.178 1.819l-.441.325c-.279.21-.6.449-.93.632s-.735.349-1.191.349s-.861-.166-1.192-.35a8 8 0 0 1-.901-.61c-.706.507-1.523.96-2.407.96c-.699 0-1.34-.28-1.896-.62c-.557-.34-1.107-.79-1.62-1.213a83 83 0 0 0-.851-.69C4.851 16.996 1.25 14.108 1.25 9.12c0-2.805 1.518-5.256 3.74-6.318c2.108-1.008 4.702-.7 7.01 1.452c2.307-2.151 4.902-2.46 7.01-1.452c2.222 1.062 3.74 3.513 3.74 6.318c0 1.37-.271 2.588-.728 3.68m-8.901.128a2.32 2.32 0 0 0-1.371 2.132c0 1.883 1.47 2.999 3.095 4.19q.22.16.434.32c.292.219.532.395.758.52s.369.16.463.16s.238-.035.463-.16s.466-.301.758-.52q.25-.187.501-.37c.688-.504 1.362-.999 1.922-1.598c.67-.717 1.106-1.517 1.106-2.542c0-.636-.248-1.208-.645-1.624a2.18 2.18 0 0 0-1.565-.685c-.595-.003-1.304.242-2.013.942a.75.75 0 0 1-1.054 0c-1.042-1.03-2.096-1.094-2.852-.765" clip-rule="evenodd"/></svg>
React
import type { SVGProps } from "react";
export function ReiconHearts(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" fillRule="evenodd" d="M5.636 4.155c-1.654.79-2.886 2.684-2.886 4.964c0 4.227 2.999 6.652 5.837 8.948q.431.346.852.693c.526.433.995.814 1.447 1.09s.813.4 1.114.4c.324 0 .689-.139 1.127-.409c-1.362-1.047-2.877-2.5-2.877-4.782c0-1.573.937-2.927 2.273-3.508c1.21-.526 2.668-.39 3.977.613c.814-.624 1.692-.918 2.547-.914a3.63 3.63 0 0 1 1.78.476a8 8 0 0 0 .423-2.607c0-2.28-1.232-4.174-2.886-4.964c-1.596-.763-3.75-.57-5.812 1.67a.75.75 0 0 1-1.104 0c-2.062-2.24-4.216-2.433-5.812-1.67m16.386 8.644a3.85 3.85 0 0 1 .728 2.26c0 1.518-.67 2.667-1.51 3.566c-.666.713-1.484 1.311-2.178 1.819l-.441.325c-.279.21-.6.449-.93.632s-.735.349-1.191.349s-.861-.166-1.192-.35a8 8 0 0 1-.901-.61c-.706.507-1.523.96-2.407.96c-.699 0-1.34-.28-1.896-.62c-.557-.34-1.107-.79-1.62-1.213a83 83 0 0 0-.851-.69C4.851 16.996 1.25 14.108 1.25 9.12c0-2.805 1.518-5.256 3.74-6.318c2.108-1.008 4.702-.7 7.01 1.452c2.307-2.151 4.902-2.46 7.01-1.452c2.222 1.062 3.74 3.513 3.74 6.318c0 1.37-.271 2.588-.728 3.68m-8.901.128a2.32 2.32 0 0 0-1.371 2.132c0 1.883 1.47 2.999 3.095 4.19q.22.16.434.32c.292.219.532.395.758.52s.369.16.463.16s.238-.035.463-.16s.466-.301.758-.52q.25-.187.501-.37c.688-.504 1.362-.999 1.922-1.598c.67-.717 1.106-1.517 1.106-2.542c0-.636-.248-1.208-.645-1.624a2.18 2.18 0 0 0-1.565-.685c-.595-.003-1.304.242-2.013.942a.75.75 0 0 1-1.054 0c-1.042-1.03-2.096-1.094-2.852-.765" clipRule="evenodd"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M5.636 4.155c-1.654.79-2.886 2.684-2.886 4.964c0 4.227 2.999 6.652 5.837 8.948q.431.346.852.693c.526.433.995.814 1.447 1.09s.813.4 1.114.4c.324 0 .689-.139 1.127-.409c-1.362-1.047-2.877-2.5-2.877-4.782c0-1.573.937-2.927 2.273-3.508c1.21-.526 2.668-.39 3.977.613c.814-.624 1.692-.918 2.547-.914a3.63 3.63 0 0 1 1.78.476a8 8 0 0 0 .423-2.607c0-2.28-1.232-4.174-2.886-4.964c-1.596-.763-3.75-.57-5.812 1.67a.75.75 0 0 1-1.104 0c-2.062-2.24-4.216-2.433-5.812-1.67m16.386 8.644a3.85 3.85 0 0 1 .728 2.26c0 1.518-.67 2.667-1.51 3.566c-.666.713-1.484 1.311-2.178 1.819l-.441.325c-.279.21-.6.449-.93.632s-.735.349-1.191.349s-.861-.166-1.192-.35a8 8 0 0 1-.901-.61c-.706.507-1.523.96-2.407.96c-.699 0-1.34-.28-1.896-.62c-.557-.34-1.107-.79-1.62-1.213a83 83 0 0 0-.851-.69C4.851 16.996 1.25 14.108 1.25 9.12c0-2.805 1.518-5.256 3.74-6.318c2.108-1.008 4.702-.7 7.01 1.452c2.307-2.151 4.902-2.46 7.01-1.452c2.222 1.062 3.74 3.513 3.74 6.318c0 1.37-.271 2.588-.728 3.68m-8.901.128a2.32 2.32 0 0 0-1.371 2.132c0 1.883 1.47 2.999 3.095 4.19q.22.16.434.32c.292.219.532.395.758.52s.369.16.463.16s.238-.035.463-.16s.466-.301.758-.52q.25-.187.501-.37c.688-.504 1.362-.999 1.922-1.598c.67-.717 1.106-1.517 1.106-2.542c0-.636-.248-1.208-.645-1.624a2.18 2.18 0 0 0-1.565-.685c-.595-.003-1.304.242-2.013.942a.75.75 0 0 1-1.054 0c-1.042-1.03-2.096-1.094-2.852-.765" clip-rule="evenodd"/></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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M5.636%204.155c-1.654.79-2.886%202.684-2.886%204.964c0%204.227%202.999%206.652%205.837%208.948q.431.346.852.693c.526.433.995.814%201.447%201.09s.813.4%201.114.4c.324%200%20.689-.139%201.127-.409c-1.362-1.047-2.877-2.5-2.877-4.782c0-1.573.937-2.927%202.273-3.508c1.21-.526%202.668-.39%203.977.613c.814-.624%201.692-.918%202.547-.914a3.63%203.63%200%200%201%201.78.476a8%208%200%200%200%20.423-2.607c0-2.28-1.232-4.174-2.886-4.964c-1.596-.763-3.75-.57-5.812%201.67a.75.75%200%200%201-1.104%200c-2.062-2.24-4.216-2.433-5.812-1.67m16.386%208.644a3.85%203.85%200%200%201%20.728%202.26c0%201.518-.67%202.667-1.51%203.566c-.666.713-1.484%201.311-2.178%201.819l-.441.325c-.279.21-.6.449-.93.632s-.735.349-1.191.349s-.861-.166-1.192-.35a8%208%200%200%201-.901-.61c-.706.507-1.523.96-2.407.96c-.699%200-1.34-.28-1.896-.62c-.557-.34-1.107-.79-1.62-1.213a83%2083%200%200%200-.851-.69C4.851%2016.996%201.25%2014.108%201.25%209.12c0-2.805%201.518-5.256%203.74-6.318c2.108-1.008%204.702-.7%207.01%201.452c2.307-2.151%204.902-2.46%207.01-1.452c2.222%201.062%203.74%203.513%203.74%206.318c0%201.37-.271%202.588-.728%203.68m-8.901.128a2.32%202.32%200%200%200-1.371%202.132c0%201.883%201.47%202.999%203.095%204.19q.22.16.434.32c.292.219.532.395.758.52s.369.16.463.16s.238-.035.463-.16s.466-.301.758-.52q.25-.187.501-.37c.688-.504%201.362-.999%201.922-1.598c.67-.717%201.106-1.517%201.106-2.542c0-.636-.248-1.208-.645-1.624a2.18%202.18%200%200%200-1.565-.685c-.595-.003-1.304.242-2.013.942a.75.75%200%200%201-1.054%200c-1.042-1.03-2.096-1.094-2.852-.765%22%20clip-rule%3D%22evenodd%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M5.636%204.155c-1.654.79-2.886%202.684-2.886%204.964c0%204.227%202.999%206.652%205.837%208.948q.431.346.852.693c.526.433.995.814%201.447%201.09s.813.4%201.114.4c.324%200%20.689-.139%201.127-.409c-1.362-1.047-2.877-2.5-2.877-4.782c0-1.573.937-2.927%202.273-3.508c1.21-.526%202.668-.39%203.977.613c.814-.624%201.692-.918%202.547-.914a3.63%203.63%200%200%201%201.78.476a8%208%200%200%200%20.423-2.607c0-2.28-1.232-4.174-2.886-4.964c-1.596-.763-3.75-.57-5.812%201.67a.75.75%200%200%201-1.104%200c-2.062-2.24-4.216-2.433-5.812-1.67m16.386%208.644a3.85%203.85%200%200%201%20.728%202.26c0%201.518-.67%202.667-1.51%203.566c-.666.713-1.484%201.311-2.178%201.819l-.441.325c-.279.21-.6.449-.93.632s-.735.349-1.191.349s-.861-.166-1.192-.35a8%208%200%200%201-.901-.61c-.706.507-1.523.96-2.407.96c-.699%200-1.34-.28-1.896-.62c-.557-.34-1.107-.79-1.62-1.213a83%2083%200%200%200-.851-.69C4.851%2016.996%201.25%2014.108%201.25%209.12c0-2.805%201.518-5.256%203.74-6.318c2.108-1.008%204.702-.7%207.01%201.452c2.307-2.151%204.902-2.46%207.01-1.452c2.222%201.062%203.74%203.513%203.74%206.318c0%201.37-.271%202.588-.728%203.68m-8.901.128a2.32%202.32%200%200%200-1.371%202.132c0%201.883%201.47%202.999%203.095%204.19q.22.16.434.32c.292.219.532.395.758.52s.369.16.463.16s.238-.035.463-.16s.466-.301.758-.52q.25-.187.501-.37c.688-.504%201.362-.999%201.922-1.598c.67-.717%201.106-1.517%201.106-2.542c0-.636-.248-1.208-.645-1.624a2.18%202.18%200%200%200-1.565-.685c-.595-.003-1.304.242-2.013.942a.75.75%200%200%201-1.054%200c-1.042-1.03-2.096-1.094-2.852-.765%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/reicon/hearts.svg?color=%231a73e8&size=48
