heart dislike icon
heart-dislike-outline from IonIcons by Ben Sperry · Outline · MIT Free for personal and commercial use.
- Name
- heart-dislike-outline
- Set
- IonIcons
- Style
- Outline
- Viewbox
- 512×512
- License
- MIT
2 other variants in IonIcons
Related icons in IonIcons
Use the heart dislike icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M417.84 448a15.94 15.94 0 0 1-11.35-4.72L40.65 75.26a16 16 0 0 1 22.7-22.56l365.83 368a16 16 0 0 1-11.34 27.3M364.92 80c-48.09 0-80 29.55-96.92 51c-16.88-21.48-48.83-51-96.92-51a107.4 107.4 0 0 0-31 4.55L168 112c22.26 0 45.81 9 63.94 26.67a123 123 0 0 1 21.75 28.47a16 16 0 0 0 28.6 0a123 123 0 0 1 21.77-28.51C322.19 121 342.66 112 364.92 112c43.15 0 78.62 36.33 79.07 81c.54 53.69-22.75 99.55-57.38 139.52l22.63 22.77c3-3.44 5.7-6.64 8.14-9.6c40-48.75 59.15-98.8 58.61-153C475.37 130.52 425.54 80 364.92 80M268 432C180.38 372.51 91 297.6 92 193a83.7 83.7 0 0 1 2.24-18.39L69 149.14a115.1 115.1 0 0 0-9 43.49c-.54 54.22 18.63 104.27 58.61 153c18.77 22.87 52.8 59.45 131.39 112.8a31.84 31.84 0 0 0 36 0c20.35-13.81 37.7-26.5 52.58-38.11l-22.66-22.81C300.25 409.6 284.09 421.05 268 432"/></svg>
React
import type { SVGProps } from "react";
export function IonHeartDislikeOutline(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M417.84 448a15.94 15.94 0 0 1-11.35-4.72L40.65 75.26a16 16 0 0 1 22.7-22.56l365.83 368a16 16 0 0 1-11.34 27.3M364.92 80c-48.09 0-80 29.55-96.92 51c-16.88-21.48-48.83-51-96.92-51a107.4 107.4 0 0 0-31 4.55L168 112c22.26 0 45.81 9 63.94 26.67a123 123 0 0 1 21.75 28.47a16 16 0 0 0 28.6 0a123 123 0 0 1 21.77-28.51C322.19 121 342.66 112 364.92 112c43.15 0 78.62 36.33 79.07 81c.54 53.69-22.75 99.55-57.38 139.52l22.63 22.77c3-3.44 5.7-6.64 8.14-9.6c40-48.75 59.15-98.8 58.61-153C475.37 130.52 425.54 80 364.92 80M268 432C180.38 372.51 91 297.6 92 193a83.7 83.7 0 0 1 2.24-18.39L69 149.14a115.1 115.1 0 0 0-9 43.49c-.54 54.22 18.63 104.27 58.61 153c18.77 22.87 52.8 59.45 131.39 112.8a31.84 31.84 0 0 0 36 0c20.35-13.81 37.7-26.5 52.58-38.11l-22.66-22.81C300.25 409.6 284.09 421.05 268 432"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M417.84 448a15.94 15.94 0 0 1-11.35-4.72L40.65 75.26a16 16 0 0 1 22.7-22.56l365.83 368a16 16 0 0 1-11.34 27.3M364.92 80c-48.09 0-80 29.55-96.92 51c-16.88-21.48-48.83-51-96.92-51a107.4 107.4 0 0 0-31 4.55L168 112c22.26 0 45.81 9 63.94 26.67a123 123 0 0 1 21.75 28.47a16 16 0 0 0 28.6 0a123 123 0 0 1 21.77-28.51C322.19 121 342.66 112 364.92 112c43.15 0 78.62 36.33 79.07 81c.54 53.69-22.75 99.55-57.38 139.52l22.63 22.77c3-3.44 5.7-6.64 8.14-9.6c40-48.75 59.15-98.8 58.61-153C475.37 130.52 425.54 80 364.92 80M268 432C180.38 372.51 91 297.6 92 193a83.7 83.7 0 0 1 2.24-18.39L69 149.14a115.1 115.1 0 0 0-9 43.49c-.54 54.22 18.63 104.27 58.61 153c18.77 22.87 52.8 59.45 131.39 112.8a31.84 31.84 0 0 0 36 0c20.35-13.81 37.7-26.5 52.58-38.11l-22.66-22.81C300.25 409.6 284.09 421.05 268 432"/></svg> </template>
CSS
.icon-heart-dislike-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%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M417.84%20448a15.94%2015.94%200%200%201-11.35-4.72L40.65%2075.26a16%2016%200%200%201%2022.7-22.56l365.83%20368a16%2016%200%200%201-11.34%2027.3M364.92%2080c-48.09%200-80%2029.55-96.92%2051c-16.88-21.48-48.83-51-96.92-51a107.4%20107.4%200%200%200-31%204.55L168%20112c22.26%200%2045.81%209%2063.94%2026.67a123%20123%200%200%201%2021.75%2028.47a16%2016%200%200%200%2028.6%200a123%20123%200%200%201%2021.77-28.51C322.19%20121%20342.66%20112%20364.92%20112c43.15%200%2078.62%2036.33%2079.07%2081c.54%2053.69-22.75%2099.55-57.38%20139.52l22.63%2022.77c3-3.44%205.7-6.64%208.14-9.6c40-48.75%2059.15-98.8%2058.61-153C475.37%20130.52%20425.54%2080%20364.92%2080M268%20432C180.38%20372.51%2091%20297.6%2092%20193a83.7%2083.7%200%200%201%202.24-18.39L69%20149.14a115.1%20115.1%200%200%200-9%2043.49c-.54%2054.22%2018.63%20104.27%2058.61%20153c18.77%2022.87%2052.8%2059.45%20131.39%20112.8a31.84%2031.84%200%200%200%2036%200c20.35-13.81%2037.7-26.5%2052.58-38.11l-22.66-22.81C300.25%20409.6%20284.09%20421.05%20268%20432%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%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M417.84%20448a15.94%2015.94%200%200%201-11.35-4.72L40.65%2075.26a16%2016%200%200%201%2022.7-22.56l365.83%20368a16%2016%200%200%201-11.34%2027.3M364.92%2080c-48.09%200-80%2029.55-96.92%2051c-16.88-21.48-48.83-51-96.92-51a107.4%20107.4%200%200%200-31%204.55L168%20112c22.26%200%2045.81%209%2063.94%2026.67a123%20123%200%200%201%2021.75%2028.47a16%2016%200%200%200%2028.6%200a123%20123%200%200%201%2021.77-28.51C322.19%20121%20342.66%20112%20364.92%20112c43.15%200%2078.62%2036.33%2079.07%2081c.54%2053.69-22.75%2099.55-57.38%20139.52l22.63%2022.77c3-3.44%205.7-6.64%208.14-9.6c40-48.75%2059.15-98.8%2058.61-153C475.37%20130.52%20425.54%2080%20364.92%2080M268%20432C180.38%20372.51%2091%20297.6%2092%20193a83.7%2083.7%200%200%201%202.24-18.39L69%20149.14a115.1%20115.1%200%200%200-9%2043.49c-.54%2054.22%2018.63%20104.27%2058.61%20153c18.77%2022.87%2052.8%2059.45%20131.39%20112.8a31.84%2031.84%200%200%200%2036%200c20.35-13.81%2037.7-26.5%2052.58-38.11l-22.66-22.81C300.25%20409.6%20284.09%20421.05%20268%20432%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ion/heart-dislike-outline.svg?color=%231a73e8&size=48
