hearts icon
hearts-line from Remix Icon by Remix Design · Line · Health & Medical · Apache-2.0 Free for personal and commercial use.
- Name
- hearts-line
- Set
- Remix Icon
- Style
- Line
- Category
- Health & Medical
- Viewbox
- 24×24
- License
- Apache 2.0
1 other variant in Remix Icon
The same icon in other sets
More health & medical icons from Remix Icon
aed-electrodes-fillaed-fillatom-fillbrain-2-fillbrain-3-fillbrain-ai-3-fillbrain-fillcapsule-filldislike-filldna-filldossier-filldropper-fillempathize-fillfirst-aid-kit-fillflask-fillhand-sanitizer-fillhealth-book-fillheart-2-fillheart-3-fillheart-add-2-fillheart-add-fillheart-fillheart-pulse-fillinfrared-thermometer-fill
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" d="M19.243 4.757a6 6 0 0 1 1.65 5.38c.568.16 1.106.463 1.554.908a3.55 3.55 0 0 1 0 5.047L17 21.5l-3.022-3L11 21.485l-8.48-8.492A6 6 0 0 1 11 4.529a6 6 0 0 1 8.242.228m-6.281 7.708a1.55 1.55 0 0 0 0 2.208L17 18.682l4.038-4.009a1.55 1.55 0 0 0 0-2.208a1.614 1.614 0 0 0-2.268.002l-1.772 1.754l-1.407-1.396l-.363-.36a1.613 1.613 0 0 0-2.266 0m-8.79-6.293a4 4 0 0 0-.192 5.451L11 18.654l1.559-1.562l-1.006-1a3.55 3.55 0 0 1 0-5.047a3.614 3.614 0 0 1 5.084 0l.363.36l.363-.36a3.6 3.6 0 0 1 1.465-.882a4 4 0 0 0-1.001-3.993a4 4 0 0 0-5.49-.153l-1.335 1.198l-1.336-1.197a4 4 0 0 0-5.494.154"/></svg>
React
import type { SVGProps } from "react";
export function RiHeartsLine(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.243 4.757a6 6 0 0 1 1.65 5.38c.568.16 1.106.463 1.554.908a3.55 3.55 0 0 1 0 5.047L17 21.5l-3.022-3L11 21.485l-8.48-8.492A6 6 0 0 1 11 4.529a6 6 0 0 1 8.242.228m-6.281 7.708a1.55 1.55 0 0 0 0 2.208L17 18.682l4.038-4.009a1.55 1.55 0 0 0 0-2.208a1.614 1.614 0 0 0-2.268.002l-1.772 1.754l-1.407-1.396l-.363-.36a1.613 1.613 0 0 0-2.266 0m-8.79-6.293a4 4 0 0 0-.192 5.451L11 18.654l1.559-1.562l-1.006-1a3.55 3.55 0 0 1 0-5.047a3.614 3.614 0 0 1 5.084 0l.363.36l.363-.36a3.6 3.6 0 0 1 1.465-.882a4 4 0 0 0-1.001-3.993a4 4 0 0 0-5.49-.153l-1.335 1.198l-1.336-1.197a4 4 0 0 0-5.494.154"/></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.243 4.757a6 6 0 0 1 1.65 5.38c.568.16 1.106.463 1.554.908a3.55 3.55 0 0 1 0 5.047L17 21.5l-3.022-3L11 21.485l-8.48-8.492A6 6 0 0 1 11 4.529a6 6 0 0 1 8.242.228m-6.281 7.708a1.55 1.55 0 0 0 0 2.208L17 18.682l4.038-4.009a1.55 1.55 0 0 0 0-2.208a1.614 1.614 0 0 0-2.268.002l-1.772 1.754l-1.407-1.396l-.363-.36a1.613 1.613 0 0 0-2.266 0m-8.79-6.293a4 4 0 0 0-.192 5.451L11 18.654l1.559-1.562l-1.006-1a3.55 3.55 0 0 1 0-5.047a3.614 3.614 0 0 1 5.084 0l.363.36l.363-.36a3.6 3.6 0 0 1 1.465-.882a4 4 0 0 0-1.001-3.993a4 4 0 0 0-5.49-.153l-1.335 1.198l-1.336-1.197a4 4 0 0 0-5.494.154"/></svg> </template>
CSS
.icon-hearts-line {
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.243%204.757a6%206%200%200%201%201.65%205.38c.568.16%201.106.463%201.554.908a3.55%203.55%200%200%201%200%205.047L17%2021.5l-3.022-3L11%2021.485l-8.48-8.492A6%206%200%200%201%2011%204.529a6%206%200%200%201%208.242.228m-6.281%207.708a1.55%201.55%200%200%200%200%202.208L17%2018.682l4.038-4.009a1.55%201.55%200%200%200%200-2.208a1.614%201.614%200%200%200-2.268.002l-1.772%201.754l-1.407-1.396l-.363-.36a1.613%201.613%200%200%200-2.266%200m-8.79-6.293a4%204%200%200%200-.192%205.451L11%2018.654l1.559-1.562l-1.006-1a3.55%203.55%200%200%201%200-5.047a3.614%203.614%200%200%201%205.084%200l.363.36l.363-.36a3.6%203.6%200%200%201%201.465-.882a4%204%200%200%200-1.001-3.993a4%204%200%200%200-5.49-.153l-1.335%201.198l-1.336-1.197a4%204%200%200%200-5.494.154%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.243%204.757a6%206%200%200%201%201.65%205.38c.568.16%201.106.463%201.554.908a3.55%203.55%200%200%201%200%205.047L17%2021.5l-3.022-3L11%2021.485l-8.48-8.492A6%206%200%200%201%2011%204.529a6%206%200%200%201%208.242.228m-6.281%207.708a1.55%201.55%200%200%200%200%202.208L17%2018.682l4.038-4.009a1.55%201.55%200%200%200%200-2.208a1.614%201.614%200%200%200-2.268.002l-1.772%201.754l-1.407-1.396l-.363-.36a1.613%201.613%200%200%200-2.266%200m-8.79-6.293a4%204%200%200%200-.192%205.451L11%2018.654l1.559-1.562l-1.006-1a3.55%203.55%200%200%201%200-5.047a3.614%203.614%200%200%201%205.084%200l.363.36l.363-.36a3.6%203.6%200%200%201%201.465-.882a4%204%200%200%200-1.001-3.993a4%204%200%200%200-5.49-.153l-1.335%201.198l-1.336-1.197a4%204%200%200%200-5.494.154%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ri/hearts-line.svg?color=%231a73e8&size=48
