hand heart icon
hand-heart from Material Design Icons by Pictogrammers · Filled · Apache-2.0 Free for personal and commercial use.
- Name
- hand-heart
- Set
- Material Design Icons
- Style
- Filled
- Viewbox
- 24×24
- License
- Apache 2.0
- Aliases
- hope, love, volunteer
1 other variant in Material Design Icons
The same icon in other sets
Related icons in Material Design Icons
hand-back-lefthand-back-left-offhand-back-righthand-back-right-offhand-claphand-clap-offhand-coinhand-cyclehand-extendedhand-front-lefthand-front-righthand-lefthand-okayhand-peacehand-peace-varianthand-pointing-downhand-pointing-lefthand-pointing-righthand-pointing-uphand-righthand-sawhand-washhand-waterhand-wave
Use the hand heart icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20 17q.86 0 1.45.6t.58 1.4L14 22l-7-2v-9h1.95l7.27 2.69q.78.31.78 1.12q0 .47-.34.82t-.86.37H13l-1.75-.67l-.33.94L13 17zM16 3.23Q17.06 2 18.7 2q1.36 0 2.3 1t1 2.3q0 1.03-1 2.46t-1.97 2.39T16 13q-2.08-1.89-3.06-2.85t-1.97-2.39T10 5.3q0-1.36.97-2.3t2.34-1q1.6 0 2.69 1.23M.984 11H5v11H.984z"/></svg>
React
import type { SVGProps } from "react";
export function MdiHandHeart(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="M20 17q.86 0 1.45.6t.58 1.4L14 22l-7-2v-9h1.95l7.27 2.69q.78.31.78 1.12q0 .47-.34.82t-.86.37H13l-1.75-.67l-.33.94L13 17zM16 3.23Q17.06 2 18.7 2q1.36 0 2.3 1t1 2.3q0 1.03-1 2.46t-1.97 2.39T16 13q-2.08-1.89-3.06-2.85t-1.97-2.39T10 5.3q0-1.36.97-2.3t2.34-1q1.6 0 2.69 1.23M.984 11H5v11H.984z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20 17q.86 0 1.45.6t.58 1.4L14 22l-7-2v-9h1.95l7.27 2.69q.78.31.78 1.12q0 .47-.34.82t-.86.37H13l-1.75-.67l-.33.94L13 17zM16 3.23Q17.06 2 18.7 2q1.36 0 2.3 1t1 2.3q0 1.03-1 2.46t-1.97 2.39T16 13q-2.08-1.89-3.06-2.85t-1.97-2.39T10 5.3q0-1.36.97-2.3t2.34-1q1.6 0 2.69 1.23M.984 11H5v11H.984z"/></svg> </template>
CSS
.icon-hand-heart {
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%22M20%2017q.86%200%201.45.6t.58%201.4L14%2022l-7-2v-9h1.95l7.27%202.69q.78.31.78%201.12q0%20.47-.34.82t-.86.37H13l-1.75-.67l-.33.94L13%2017zM16%203.23Q17.06%202%2018.7%202q1.36%200%202.3%201t1%202.3q0%201.03-1%202.46t-1.97%202.39T16%2013q-2.08-1.89-3.06-2.85t-1.97-2.39T10%205.3q0-1.36.97-2.3t2.34-1q1.6%200%202.69%201.23M.984%2011H5v11H.984z%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%22M20%2017q.86%200%201.45.6t.58%201.4L14%2022l-7-2v-9h1.95l7.27%202.69q.78.31.78%201.12q0%20.47-.34.82t-.86.37H13l-1.75-.67l-.33.94L13%2017zM16%203.23Q17.06%202%2018.7%202q1.36%200%202.3%201t1%202.3q0%201.03-1%202.46t-1.97%202.39T16%2013q-2.08-1.89-3.06-2.85t-1.97-2.39T10%205.3q0-1.36.97-2.3t2.34-1q1.6%200%202.69%201.23M.984%2011H5v11H.984z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/mdi/hand-heart.svg?color=%231a73e8&size=48
