heart arrow icon
heart-arrow-rounded from Material Symbols Light by Google · Rounded · Apache-2.0 Free for personal and commercial use.
- Name
- heart-arrow-rounded
- Set
- Material Symbols Light
- Style
- Rounded
- Viewbox
- 24×24
- License
- Apache 2.0
1 other variant in Material Symbols Light
The same icon in other sets
Related icons in Material Symbols Light
Use the heart arrow icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 7.856q-.142 0-.294-.068t-.244-.211q-.885-1.308-1.845-1.942Q8.657 5 7.5 5q-1.463 0-2.482.997Q4 6.994 4 8.494q0 .77.288 1.573q.287.804 1.015 1.811t1.99 2.317q1.263 1.31 3.213 3.093l1.071.973q.173.154.423.154t.423-.154l1.314-1.19q1.488-1.338 2.92-2.808t2.58-3.147h-2.393q-.213 0-.357-.144q-.143-.143-.143-.356q0-.214.143-.357t.357-.143h3.367q.349 0 .579.23q.23.229.23.577v3.367q0 .214-.144.345q-.143.13-.357.13t-.356-.143q-.144-.143-.144-.357V11.74q-1.16 1.743-2.657 3.256t-3.05 2.921l-1.237 1.12q-.217.211-.5.307T12 19.44t-.575-.106t-.5-.323l-1.311-1.169q-1.82-1.663-3.088-2.948t-2.048-2.38q-.78-1.097-1.129-2.06T3 8.494q0-1.908 1.296-3.2Q5.592 4 7.5 4q1.32 0 2.475.675T12 6.639q.87-1.289 2.025-1.964T16.5 4q.81 0 1.55.268t1.35.767q.646.529 1.096 1.25q.45.723.45 1.517q0 .177-.147.309q-.147.131-.324.131q-.194 0-.353-.14t-.207-.335q-.26-1.41-1.335-2.088Q17.504 5 16.5 5q-1.18 0-2.148.644t-1.833 1.933q-.092.142-.235.21q-.142.069-.284.069"/></svg>
React
import type { SVGProps } from "react";
export function MaterialSymbolsLightHeartArrowRounded(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="M12 7.856q-.142 0-.294-.068t-.244-.211q-.885-1.308-1.845-1.942Q8.657 5 7.5 5q-1.463 0-2.482.997Q4 6.994 4 8.494q0 .77.288 1.573q.287.804 1.015 1.811t1.99 2.317q1.263 1.31 3.213 3.093l1.071.973q.173.154.423.154t.423-.154l1.314-1.19q1.488-1.338 2.92-2.808t2.58-3.147h-2.393q-.213 0-.357-.144q-.143-.143-.143-.356q0-.214.143-.357t.357-.143h3.367q.349 0 .579.23q.23.229.23.577v3.367q0 .214-.144.345q-.143.13-.357.13t-.356-.143q-.144-.143-.144-.357V11.74q-1.16 1.743-2.657 3.256t-3.05 2.921l-1.237 1.12q-.217.211-.5.307T12 19.44t-.575-.106t-.5-.323l-1.311-1.169q-1.82-1.663-3.088-2.948t-2.048-2.38q-.78-1.097-1.129-2.06T3 8.494q0-1.908 1.296-3.2Q5.592 4 7.5 4q1.32 0 2.475.675T12 6.639q.87-1.289 2.025-1.964T16.5 4q.81 0 1.55.268t1.35.767q.646.529 1.096 1.25q.45.723.45 1.517q0 .177-.147.309q-.147.131-.324.131q-.194 0-.353-.14t-.207-.335q-.26-1.41-1.335-2.088Q17.504 5 16.5 5q-1.18 0-2.148.644t-1.833 1.933q-.092.142-.235.21q-.142.069-.284.069"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 7.856q-.142 0-.294-.068t-.244-.211q-.885-1.308-1.845-1.942Q8.657 5 7.5 5q-1.463 0-2.482.997Q4 6.994 4 8.494q0 .77.288 1.573q.287.804 1.015 1.811t1.99 2.317q1.263 1.31 3.213 3.093l1.071.973q.173.154.423.154t.423-.154l1.314-1.19q1.488-1.338 2.92-2.808t2.58-3.147h-2.393q-.213 0-.357-.144q-.143-.143-.143-.356q0-.214.143-.357t.357-.143h3.367q.349 0 .579.23q.23.229.23.577v3.367q0 .214-.144.345q-.143.13-.357.13t-.356-.143q-.144-.143-.144-.357V11.74q-1.16 1.743-2.657 3.256t-3.05 2.921l-1.237 1.12q-.217.211-.5.307T12 19.44t-.575-.106t-.5-.323l-1.311-1.169q-1.82-1.663-3.088-2.948t-2.048-2.38q-.78-1.097-1.129-2.06T3 8.494q0-1.908 1.296-3.2Q5.592 4 7.5 4q1.32 0 2.475.675T12 6.639q.87-1.289 2.025-1.964T16.5 4q.81 0 1.55.268t1.35.767q.646.529 1.096 1.25q.45.723.45 1.517q0 .177-.147.309q-.147.131-.324.131q-.194 0-.353-.14t-.207-.335q-.26-1.41-1.335-2.088Q17.504 5 16.5 5q-1.18 0-2.148.644t-1.833 1.933q-.092.142-.235.21q-.142.069-.284.069"/></svg> </template>
CSS
.icon-heart-arrow-rounded {
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%22M12%207.856q-.142%200-.294-.068t-.244-.211q-.885-1.308-1.845-1.942Q8.657%205%207.5%205q-1.463%200-2.482.997Q4%206.994%204%208.494q0%20.77.288%201.573q.287.804%201.015%201.811t1.99%202.317q1.263%201.31%203.213%203.093l1.071.973q.173.154.423.154t.423-.154l1.314-1.19q1.488-1.338%202.92-2.808t2.58-3.147h-2.393q-.213%200-.357-.144q-.143-.143-.143-.356q0-.214.143-.357t.357-.143h3.367q.349%200%20.579.23q.23.229.23.577v3.367q0%20.214-.144.345q-.143.13-.357.13t-.356-.143q-.144-.143-.144-.357V11.74q-1.16%201.743-2.657%203.256t-3.05%202.921l-1.237%201.12q-.217.211-.5.307T12%2019.44t-.575-.106t-.5-.323l-1.311-1.169q-1.82-1.663-3.088-2.948t-2.048-2.38q-.78-1.097-1.129-2.06T3%208.494q0-1.908%201.296-3.2Q5.592%204%207.5%204q1.32%200%202.475.675T12%206.639q.87-1.289%202.025-1.964T16.5%204q.81%200%201.55.268t1.35.767q.646.529%201.096%201.25q.45.723.45%201.517q0%20.177-.147.309q-.147.131-.324.131q-.194%200-.353-.14t-.207-.335q-.26-1.41-1.335-2.088Q17.504%205%2016.5%205q-1.18%200-2.148.644t-1.833%201.933q-.092.142-.235.21q-.142.069-.284.069%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%22M12%207.856q-.142%200-.294-.068t-.244-.211q-.885-1.308-1.845-1.942Q8.657%205%207.5%205q-1.463%200-2.482.997Q4%206.994%204%208.494q0%20.77.288%201.573q.287.804%201.015%201.811t1.99%202.317q1.263%201.31%203.213%203.093l1.071.973q.173.154.423.154t.423-.154l1.314-1.19q1.488-1.338%202.92-2.808t2.58-3.147h-2.393q-.213%200-.357-.144q-.143-.143-.143-.356q0-.214.143-.357t.357-.143h3.367q.349%200%20.579.23q.23.229.23.577v3.367q0%20.214-.144.345q-.143.13-.357.13t-.356-.143q-.144-.143-.144-.357V11.74q-1.16%201.743-2.657%203.256t-3.05%202.921l-1.237%201.12q-.217.211-.5.307T12%2019.44t-.575-.106t-.5-.323l-1.311-1.169q-1.82-1.663-3.088-2.948t-2.048-2.38q-.78-1.097-1.129-2.06T3%208.494q0-1.908%201.296-3.2Q5.592%204%207.5%204q1.32%200%202.475.675T12%206.639q.87-1.289%202.025-1.964T16.5%204q.81%200%201.55.268t1.35.767q.646.529%201.096%201.25q.45.723.45%201.517q0%20.177-.147.309q-.147.131-.324.131q-.194%200-.353-.14t-.207-.335q-.26-1.41-1.335-2.088Q17.504%205%2016.5%205q-1.18%200-2.148.644t-1.833%201.933q-.092.142-.235.21q-.142.069-.284.069%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-symbols-light/heart-arrow-rounded.svg?color=%231a73e8&size=48
