heart icon
heart-outline from Health Icons by Resolve to Save Lives · Outline · Symbols · MIT Free for personal and commercial use.
- Name
- heart-outline
- Set
- Health Icons
- Style
- Outline
- Category
- Symbols
- Viewbox
- 48×48
- License
- MIT
- Aliases
- heart2x-outline
3 other variants in Health Icons
The same icon in other sets
heartAkar Iconsheart-filledAnt Design IconsheartBootstrap IconsheartBoxIcons v2heartBoxIcons v2 SolidheartCodiconsheart-fillEva IconsheartFramework7 IconsheartFont Awesome 6 RegularheartFont Awesome 6 SolidheartFont Awesome RegularheartFont Awesome SolidheartFeather Iconsheart-outlineFlowbite Iconsheart-12-filledFluent UI System Iconsheart-16Fluent UI System Color Iconsheartcss.ggheartHeroIconsheartHuge IconsheartHumbleiconsheartIconParkheartIconPark OutlineheartIconoirheartIonIcons
More symbols icons from Health Icons
Use the heart icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><path fill="currentColor" fill-rule="evenodd" d="M10.345 11.988C8.885 13.846 8 16.384 8 19.035c0 5.94 3.965 10.927 8.15 14.516a43.8 43.8 0 0 0 7.837 5.32l.252-.14a47 47 0 0 0 7.603-5.371C36.044 29.691 40 24.705 40 19.034c0-2.65-.885-5.189-2.344-7.047C36.2 10.137 34.213 9 31.969 9c-3.103 0-5.51 2.02-7.071 5.202L24 16.03l-.898-1.828C21.541 11.02 19.134 9 16.032 9c-2.245 0-4.232 1.136-5.687 2.988M24 40l-.434.9l-.005-.002l-.011-.005l-.041-.02l-.152-.076c-.13-.066-.32-.164-.56-.292a46 46 0 0 1-7.949-5.436C10.535 31.371 6 25.875 6 19.035c0-3.076 1.021-6.055 2.772-8.283C10.528 8.518 13.056 7 16.032 7c3.503 0 6.167 1.963 7.968 4.734C25.8 8.964 28.465 7 31.969 7c2.975 0 5.504 1.518 7.26 3.753C40.978 12.98 42 15.96 42 19.035c0 6.582-4.544 12.079-8.842 15.831a49 49 0 0 1-8.494 5.914l-.151.08l-.04.022l-.012.005l-.003.002h-.001S24.456 40.89 24 40m0 0l.457.89l-.443.227l-.448-.216z" clip-rule="evenodd"/></svg>
React
import type { SVGProps } from "react";
export function HealthiconsHeartOutline(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><path fill="currentColor" fillRule="evenodd" d="M10.345 11.988C8.885 13.846 8 16.384 8 19.035c0 5.94 3.965 10.927 8.15 14.516a43.8 43.8 0 0 0 7.837 5.32l.252-.14a47 47 0 0 0 7.603-5.371C36.044 29.691 40 24.705 40 19.034c0-2.65-.885-5.189-2.344-7.047C36.2 10.137 34.213 9 31.969 9c-3.103 0-5.51 2.02-7.071 5.202L24 16.03l-.898-1.828C21.541 11.02 19.134 9 16.032 9c-2.245 0-4.232 1.136-5.687 2.988M24 40l-.434.9l-.005-.002l-.011-.005l-.041-.02l-.152-.076c-.13-.066-.32-.164-.56-.292a46 46 0 0 1-7.949-5.436C10.535 31.371 6 25.875 6 19.035c0-3.076 1.021-6.055 2.772-8.283C10.528 8.518 13.056 7 16.032 7c3.503 0 6.167 1.963 7.968 4.734C25.8 8.964 28.465 7 31.969 7c2.975 0 5.504 1.518 7.26 3.753C40.978 12.98 42 15.96 42 19.035c0 6.582-4.544 12.079-8.842 15.831a49 49 0 0 1-8.494 5.914l-.151.08l-.04.022l-.012.005l-.003.002h-.001S24.456 40.89 24 40m0 0l.457.89l-.443.227l-.448-.216z" clipRule="evenodd"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><path fill="currentColor" fill-rule="evenodd" d="M10.345 11.988C8.885 13.846 8 16.384 8 19.035c0 5.94 3.965 10.927 8.15 14.516a43.8 43.8 0 0 0 7.837 5.32l.252-.14a47 47 0 0 0 7.603-5.371C36.044 29.691 40 24.705 40 19.034c0-2.65-.885-5.189-2.344-7.047C36.2 10.137 34.213 9 31.969 9c-3.103 0-5.51 2.02-7.071 5.202L24 16.03l-.898-1.828C21.541 11.02 19.134 9 16.032 9c-2.245 0-4.232 1.136-5.687 2.988M24 40l-.434.9l-.005-.002l-.011-.005l-.041-.02l-.152-.076c-.13-.066-.32-.164-.56-.292a46 46 0 0 1-7.949-5.436C10.535 31.371 6 25.875 6 19.035c0-3.076 1.021-6.055 2.772-8.283C10.528 8.518 13.056 7 16.032 7c3.503 0 6.167 1.963 7.968 4.734C25.8 8.964 28.465 7 31.969 7c2.975 0 5.504 1.518 7.26 3.753C40.978 12.98 42 15.96 42 19.035c0 6.582-4.544 12.079-8.842 15.831a49 49 0 0 1-8.494 5.914l-.151.08l-.04.022l-.012.005l-.003.002h-.001S24.456 40.89 24 40m0 0l.457.89l-.443.227l-.448-.216z" clip-rule="evenodd"/></svg> </template>
CSS
.icon-heart-outline {
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%2048%2048%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M10.345%2011.988C8.885%2013.846%208%2016.384%208%2019.035c0%205.94%203.965%2010.927%208.15%2014.516a43.8%2043.8%200%200%200%207.837%205.32l.252-.14a47%2047%200%200%200%207.603-5.371C36.044%2029.691%2040%2024.705%2040%2019.034c0-2.65-.885-5.189-2.344-7.047C36.2%2010.137%2034.213%209%2031.969%209c-3.103%200-5.51%202.02-7.071%205.202L24%2016.03l-.898-1.828C21.541%2011.02%2019.134%209%2016.032%209c-2.245%200-4.232%201.136-5.687%202.988M24%2040l-.434.9l-.005-.002l-.011-.005l-.041-.02l-.152-.076c-.13-.066-.32-.164-.56-.292a46%2046%200%200%201-7.949-5.436C10.535%2031.371%206%2025.875%206%2019.035c0-3.076%201.021-6.055%202.772-8.283C10.528%208.518%2013.056%207%2016.032%207c3.503%200%206.167%201.963%207.968%204.734C25.8%208.964%2028.465%207%2031.969%207c2.975%200%205.504%201.518%207.26%203.753C40.978%2012.98%2042%2015.96%2042%2019.035c0%206.582-4.544%2012.079-8.842%2015.831a49%2049%200%200%201-8.494%205.914l-.151.08l-.04.022l-.012.005l-.003.002h-.001S24.456%2040.89%2024%2040m0%200l.457.89l-.443.227l-.448-.216z%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%2048%2048%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M10.345%2011.988C8.885%2013.846%208%2016.384%208%2019.035c0%205.94%203.965%2010.927%208.15%2014.516a43.8%2043.8%200%200%200%207.837%205.32l.252-.14a47%2047%200%200%200%207.603-5.371C36.044%2029.691%2040%2024.705%2040%2019.034c0-2.65-.885-5.189-2.344-7.047C36.2%2010.137%2034.213%209%2031.969%209c-3.103%200-5.51%202.02-7.071%205.202L24%2016.03l-.898-1.828C21.541%2011.02%2019.134%209%2016.032%209c-2.245%200-4.232%201.136-5.687%202.988M24%2040l-.434.9l-.005-.002l-.011-.005l-.041-.02l-.152-.076c-.13-.066-.32-.164-.56-.292a46%2046%200%200%201-7.949-5.436C10.535%2031.371%206%2025.875%206%2019.035c0-3.076%201.021-6.055%202.772-8.283C10.528%208.518%2013.056%207%2016.032%207c3.503%200%206.167%201.963%207.968%204.734C25.8%208.964%2028.465%207%2031.969%207c2.975%200%205.504%201.518%207.26%203.753C40.978%2012.98%2042%2015.96%2042%2019.035c0%206.582-4.544%2012.079-8.842%2015.831a49%2049%200%200%201-8.494%205.914l-.151.08l-.04.022l-.012.005l-.003.002h-.001S24.456%2040.89%2024%2040m0%200l.457.89l-.443.227l-.448-.216z%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/healthicons/heart-outline.svg?color=%231a73e8&size=48
