heart straight icon
heart-straight-light from Phosphor by Phosphor Icons · Light · MIT Free for personal and commercial use.
- Name
- heart-straight-light
- Set
- Phosphor
- Style
- Light
- Viewbox
- 256×256
- License
- MIT
5 other variants in Phosphor
Related icons in Phosphor
Use the heart straight icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M221.6 58.38a56.06 56.06 0 0 0-79.12-.08L128 71.78L113.52 58.3a56 56 0 0 0-79.15 79.25l89.36 90.66a6 6 0 0 0 8.54 0l89.33-90.62a56 56 0 0 0 0-79.21m-8.52 70.75L128 215.45L42.89 129.1a44 44 0 0 1 62.22-62.23a1 1 0 0 0 .16.14l18.64 17.36a6 6 0 0 0 8.18 0L150.73 67a1 1 0 0 0 .16-.14a44 44 0 1 1 62.19 62.26Z"/></svg>
React
import type { SVGProps } from "react";
export function PhHeartStraightLight(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M221.6 58.38a56.06 56.06 0 0 0-79.12-.08L128 71.78L113.52 58.3a56 56 0 0 0-79.15 79.25l89.36 90.66a6 6 0 0 0 8.54 0l89.33-90.62a56 56 0 0 0 0-79.21m-8.52 70.75L128 215.45L42.89 129.1a44 44 0 0 1 62.22-62.23a1 1 0 0 0 .16.14l18.64 17.36a6 6 0 0 0 8.18 0L150.73 67a1 1 0 0 0 .16-.14a44 44 0 1 1 62.19 62.26Z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M221.6 58.38a56.06 56.06 0 0 0-79.12-.08L128 71.78L113.52 58.3a56 56 0 0 0-79.15 79.25l89.36 90.66a6 6 0 0 0 8.54 0l89.33-90.62a56 56 0 0 0 0-79.21m-8.52 70.75L128 215.45L42.89 129.1a44 44 0 0 1 62.22-62.23a1 1 0 0 0 .16.14l18.64 17.36a6 6 0 0 0 8.18 0L150.73 67a1 1 0 0 0 .16-.14a44 44 0 1 1 62.19 62.26Z"/></svg> </template>
CSS
.icon-heart-straight-light {
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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M221.6%2058.38a56.06%2056.06%200%200%200-79.12-.08L128%2071.78L113.52%2058.3a56%2056%200%200%200-79.15%2079.25l89.36%2090.66a6%206%200%200%200%208.54%200l89.33-90.62a56%2056%200%200%200%200-79.21m-8.52%2070.75L128%20215.45L42.89%20129.1a44%2044%200%200%201%2062.22-62.23a1%201%200%200%200%20.16.14l18.64%2017.36a6%206%200%200%200%208.18%200L150.73%2067a1%201%200%200%200%20.16-.14a44%2044%200%201%201%2062.19%2062.26Z%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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M221.6%2058.38a56.06%2056.06%200%200%200-79.12-.08L128%2071.78L113.52%2058.3a56%2056%200%200%200-79.15%2079.25l89.36%2090.66a6%206%200%200%200%208.54%200l89.33-90.62a56%2056%200%200%200%200-79.21m-8.52%2070.75L128%20215.45L42.89%20129.1a44%2044%200%200%201%2062.22-62.23a1%201%200%200%200%20.16.14l18.64%2017.36a6%206%200%200%200%208.18%200L150.73%2067a1%201%200%200%200%20.16-.14a44%2044%200%201%201%2062.19%2062.26Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/heart-straight-light.svg?color=%231a73e8&size=48
