heart dislike icon
heart-dislike from IonIcons by Ben Sperry · Regular · MIT Free for personal and commercial use.
- Name
- heart-dislike
- Set
- IonIcons
- Style
- Regular
- 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 448a16 16 0 0 1-11.35-4.72l-365.84-368a16 16 0 1 1 22.7-22.56l365.83 368A16 16 0 0 1 417.84 448M364.92 80c-44.09 0-74.61 24.82-92.39 45.5a6 6 0 0 1-9.06 0C245.69 104.82 215.16 80 171.08 80a107.7 107.7 0 0 0-31 4.54l269.13 270.7c3-3.44 5.7-6.64 8.14-9.6c40-48.75 59.15-98.79 58.61-153C475.37 130.53 425.54 80 364.92 80M69 149.15a115.1 115.1 0 0 0-9 43.49c-.54 54.21 18.63 104.25 58.61 153c18.77 22.87 52.8 59.45 131.39 112.8a31.88 31.88 0 0 0 36 0c20.35-13.82 37.7-26.5 52.58-38.12Z"/></svg>
React
import type { SVGProps } from "react";
export function IonHeartDislike(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 448a16 16 0 0 1-11.35-4.72l-365.84-368a16 16 0 1 1 22.7-22.56l365.83 368A16 16 0 0 1 417.84 448M364.92 80c-44.09 0-74.61 24.82-92.39 45.5a6 6 0 0 1-9.06 0C245.69 104.82 215.16 80 171.08 80a107.7 107.7 0 0 0-31 4.54l269.13 270.7c3-3.44 5.7-6.64 8.14-9.6c40-48.75 59.15-98.79 58.61-153C475.37 130.53 425.54 80 364.92 80M69 149.15a115.1 115.1 0 0 0-9 43.49c-.54 54.21 18.63 104.25 58.61 153c18.77 22.87 52.8 59.45 131.39 112.8a31.88 31.88 0 0 0 36 0c20.35-13.82 37.7-26.5 52.58-38.12Z"/></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 448a16 16 0 0 1-11.35-4.72l-365.84-368a16 16 0 1 1 22.7-22.56l365.83 368A16 16 0 0 1 417.84 448M364.92 80c-44.09 0-74.61 24.82-92.39 45.5a6 6 0 0 1-9.06 0C245.69 104.82 215.16 80 171.08 80a107.7 107.7 0 0 0-31 4.54l269.13 270.7c3-3.44 5.7-6.64 8.14-9.6c40-48.75 59.15-98.79 58.61-153C475.37 130.53 425.54 80 364.92 80M69 149.15a115.1 115.1 0 0 0-9 43.49c-.54 54.21 18.63 104.25 58.61 153c18.77 22.87 52.8 59.45 131.39 112.8a31.88 31.88 0 0 0 36 0c20.35-13.82 37.7-26.5 52.58-38.12Z"/></svg> </template>
CSS
.icon-heart-dislike {
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%20448a16%2016%200%200%201-11.35-4.72l-365.84-368a16%2016%200%201%201%2022.7-22.56l365.83%20368A16%2016%200%200%201%20417.84%20448M364.92%2080c-44.09%200-74.61%2024.82-92.39%2045.5a6%206%200%200%201-9.06%200C245.69%20104.82%20215.16%2080%20171.08%2080a107.7%20107.7%200%200%200-31%204.54l269.13%20270.7c3-3.44%205.7-6.64%208.14-9.6c40-48.75%2059.15-98.79%2058.61-153C475.37%20130.53%20425.54%2080%20364.92%2080M69%20149.15a115.1%20115.1%200%200%200-9%2043.49c-.54%2054.21%2018.63%20104.25%2058.61%20153c18.77%2022.87%2052.8%2059.45%20131.39%20112.8a31.88%2031.88%200%200%200%2036%200c20.35-13.82%2037.7-26.5%2052.58-38.12Z%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%20448a16%2016%200%200%201-11.35-4.72l-365.84-368a16%2016%200%201%201%2022.7-22.56l365.83%20368A16%2016%200%200%201%20417.84%20448M364.92%2080c-44.09%200-74.61%2024.82-92.39%2045.5a6%206%200%200%201-9.06%200C245.69%20104.82%20215.16%2080%20171.08%2080a107.7%20107.7%200%200%200-31%204.54l269.13%20270.7c3-3.44%205.7-6.64%208.14-9.6c40-48.75%2059.15-98.79%2058.61-153C475.37%20130.53%20425.54%2080%20364.92%2080M69%20149.15a115.1%20115.1%200%200%200-9%2043.49c-.54%2054.21%2018.63%20104.25%2058.61%20153c18.77%2022.87%2052.8%2059.45%20131.39%20112.8a31.88%2031.88%200%200%200%2036%200c20.35-13.82%2037.7-26.5%2052.58-38.12Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ion/heart-dislike.svg?color=%231a73e8&size=48
