heart search icon
heart-search from Material Design Icons by Pictogrammers · Filled · Apache-2.0 Free for personal and commercial use.
- Name
- heart-search
- Set
- Material Design Icons
- Style
- Filled
- Viewbox
- 24×24
- License
- Apache 2.0
- Aliases
- find-love
The same icon in other sets
Related icons in Material Design Icons
Use the heart search icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M19.3 14.9c.4-.7.7-1.5.7-2.4C20 10 18 8 15.5 8S11 10 11 12.5s2 4.5 4.5 4.5c.9 0 1.7-.3 2.4-.7l2.9 2.9l1.4-1.4zm-3.8.1c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5s2.5 1.1 2.5 2.5s-1.1 2.5-2.5 2.5m-.8 3.9c-.4.4-.8.7-1.2 1.1L12 21.3L10.5 20C5.4 15.4 2 12.3 2 8.5C2 5.4 4.4 3 7.5 3c1.7 0 3.4.8 4.5 2.1C13.1 3.8 14.8 3 16.5 3C19.6 3 22 5.4 22 8.5c0 .7-.1 1.3-.3 2c-.9-2.6-3.3-4.5-6.2-4.5C11.9 6 9 8.9 9 12.5c0 3.3 2.5 6 5.7 6.4"/></svg>
React
import type { SVGProps } from "react";
export function MdiHeartSearch(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" d="M19.3 14.9c.4-.7.7-1.5.7-2.4C20 10 18 8 15.5 8S11 10 11 12.5s2 4.5 4.5 4.5c.9 0 1.7-.3 2.4-.7l2.9 2.9l1.4-1.4zm-3.8.1c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5s2.5 1.1 2.5 2.5s-1.1 2.5-2.5 2.5m-.8 3.9c-.4.4-.8.7-1.2 1.1L12 21.3L10.5 20C5.4 15.4 2 12.3 2 8.5C2 5.4 4.4 3 7.5 3c1.7 0 3.4.8 4.5 2.1C13.1 3.8 14.8 3 16.5 3C19.6 3 22 5.4 22 8.5c0 .7-.1 1.3-.3 2c-.9-2.6-3.3-4.5-6.2-4.5C11.9 6 9 8.9 9 12.5c0 3.3 2.5 6 5.7 6.4"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M19.3 14.9c.4-.7.7-1.5.7-2.4C20 10 18 8 15.5 8S11 10 11 12.5s2 4.5 4.5 4.5c.9 0 1.7-.3 2.4-.7l2.9 2.9l1.4-1.4zm-3.8.1c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5s2.5 1.1 2.5 2.5s-1.1 2.5-2.5 2.5m-.8 3.9c-.4.4-.8.7-1.2 1.1L12 21.3L10.5 20C5.4 15.4 2 12.3 2 8.5C2 5.4 4.4 3 7.5 3c1.7 0 3.4.8 4.5 2.1C13.1 3.8 14.8 3 16.5 3C19.6 3 22 5.4 22 8.5c0 .7-.1 1.3-.3 2c-.9-2.6-3.3-4.5-6.2-4.5C11.9 6 9 8.9 9 12.5c0 3.3 2.5 6 5.7 6.4"/></svg> </template>
CSS
.icon-heart-search {
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%20d%3D%22M19.3%2014.9c.4-.7.7-1.5.7-2.4C20%2010%2018%208%2015.5%208S11%2010%2011%2012.5s2%204.5%204.5%204.5c.9%200%201.7-.3%202.4-.7l2.9%202.9l1.4-1.4zm-3.8.1c-1.4%200-2.5-1.1-2.5-2.5s1.1-2.5%202.5-2.5s2.5%201.1%202.5%202.5s-1.1%202.5-2.5%202.5m-.8%203.9c-.4.4-.8.7-1.2%201.1L12%2021.3L10.5%2020C5.4%2015.4%202%2012.3%202%208.5C2%205.4%204.4%203%207.5%203c1.7%200%203.4.8%204.5%202.1C13.1%203.8%2014.8%203%2016.5%203C19.6%203%2022%205.4%2022%208.5c0%20.7-.1%201.3-.3%202c-.9-2.6-3.3-4.5-6.2-4.5C11.9%206%209%208.9%209%2012.5c0%203.3%202.5%206%205.7%206.4%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%20d%3D%22M19.3%2014.9c.4-.7.7-1.5.7-2.4C20%2010%2018%208%2015.5%208S11%2010%2011%2012.5s2%204.5%204.5%204.5c.9%200%201.7-.3%202.4-.7l2.9%202.9l1.4-1.4zm-3.8.1c-1.4%200-2.5-1.1-2.5-2.5s1.1-2.5%202.5-2.5s2.5%201.1%202.5%202.5s-1.1%202.5-2.5%202.5m-.8%203.9c-.4.4-.8.7-1.2%201.1L12%2021.3L10.5%2020C5.4%2015.4%202%2012.3%202%208.5C2%205.4%204.4%203%207.5%203c1.7%200%203.4.8%204.5%202.1C13.1%203.8%2014.8%203%2016.5%203C19.6%203%2022%205.4%2022%208.5c0%20.7-.1%201.3-.3%202c-.9-2.6-3.3-4.5-6.2-4.5C11.9%206%209%208.9%209%2012.5c0%203.3%202.5%206%205.7%206.4%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/mdi/heart-search.svg?color=%231a73e8&size=48
