heart icon
heart-outlined from Ant Design Icons by HeskeyBaozi · Outlined · MIT Free for personal and commercial use.
- Name
- heart-outlined
- Set
- Ant Design Icons
- Style
- Outlined
- Viewbox
- 1024×1024
- License
- MIT
- Aliases
- heart, heart-outline
2 other variants in Ant Design Icons
The same icon in other sets
heartAkar 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.ggheartHealth IconsheartHeroIconsheartHuge IconsheartHumbleiconsheartIconParkheartIconPark OutlineheartIconoirheartIonIcons
Use the heart icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="currentColor" d="M923 283.6a260 260 0 0 0-56.9-82.8a264.4 264.4 0 0 0-84-55.5A265.3 265.3 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39q-15 9.15-28.5 20.1q-13.5-10.95-28.5-20.1c-41.8-25.5-89.9-39-139.2-39c-35.5 0-69.9 6.8-102.4 20.3c-31.4 13-59.7 31.7-84 55.5a258.4 258.4 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9c0 33.3 6.8 68 20.3 103.3c11.3 29.5 27.5 60.1 48.2 91c32.8 48.9 77.9 99.9 133.9 151.6c92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3c56-51.7 101.1-102.7 133.9-151.6c20.7-30.9 37-61.5 48.2-91c13.5-35.3 20.3-70 20.3-103.3c.1-35.3-7-69.6-20.9-101.9M512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5c0 201.2-356 429.3-356 429.3"/></svg>
React
import type { SVGProps } from "react";
export function AntDesignHeartOutlined(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="currentColor" d="M923 283.6a260 260 0 0 0-56.9-82.8a264.4 264.4 0 0 0-84-55.5A265.3 265.3 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39q-15 9.15-28.5 20.1q-13.5-10.95-28.5-20.1c-41.8-25.5-89.9-39-139.2-39c-35.5 0-69.9 6.8-102.4 20.3c-31.4 13-59.7 31.7-84 55.5a258.4 258.4 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9c0 33.3 6.8 68 20.3 103.3c11.3 29.5 27.5 60.1 48.2 91c32.8 48.9 77.9 99.9 133.9 151.6c92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3c56-51.7 101.1-102.7 133.9-151.6c20.7-30.9 37-61.5 48.2-91c13.5-35.3 20.3-70 20.3-103.3c.1-35.3-7-69.6-20.9-101.9M512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5c0 201.2-356 429.3-356 429.3"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="currentColor" d="M923 283.6a260 260 0 0 0-56.9-82.8a264.4 264.4 0 0 0-84-55.5A265.3 265.3 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39q-15 9.15-28.5 20.1q-13.5-10.95-28.5-20.1c-41.8-25.5-89.9-39-139.2-39c-35.5 0-69.9 6.8-102.4 20.3c-31.4 13-59.7 31.7-84 55.5a258.4 258.4 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9c0 33.3 6.8 68 20.3 103.3c11.3 29.5 27.5 60.1 48.2 91c32.8 48.9 77.9 99.9 133.9 151.6c92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3c56-51.7 101.1-102.7 133.9-151.6c20.7-30.9 37-61.5 48.2-91c13.5-35.3 20.3-70 20.3-103.3c.1-35.3-7-69.6-20.9-101.9M512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5c0 201.2-356 429.3-356 429.3"/></svg> </template>
CSS
.icon-heart-outlined {
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%201024%201024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M923%20283.6a260%20260%200%200%200-56.9-82.8a264.4%20264.4%200%200%200-84-55.5A265.3%20265.3%200%200%200%20679.7%20125c-49.3%200-97.4%2013.5-139.2%2039q-15%209.15-28.5%2020.1q-13.5-10.95-28.5-20.1c-41.8-25.5-89.9-39-139.2-39c-35.5%200-69.9%206.8-102.4%2020.3c-31.4%2013-59.7%2031.7-84%2055.5a258.4%20258.4%200%200%200-56.9%2082.8c-13.9%2032.3-21%2066.6-21%20101.9c0%2033.3%206.8%2068%2020.3%20103.3c11.3%2029.5%2027.5%2060.1%2048.2%2091c32.8%2048.9%2077.9%2099.9%20133.9%20151.6c92.8%2085.7%20184.7%20144.9%20188.6%20147.3l23.7%2015.2c10.5%206.7%2024%206.7%2034.5%200l23.7-15.2c3.9-2.5%2095.7-61.6%20188.6-147.3c56-51.7%20101.1-102.7%20133.9-151.6c20.7-30.9%2037-61.5%2048.2-91c13.5-35.3%2020.3-70%2020.3-103.3c.1-35.3-7-69.6-20.9-101.9M512%20814.8S156%20586.7%20156%20385.5C156%20283.6%20240.3%20201%20344.3%20201c73.1%200%20136.5%2040.8%20167.7%20100.4C543.2%20241.8%20606.6%20201%20679.7%20201c104%200%20188.3%2082.6%20188.3%20184.5c0%20201.2-356%20429.3-356%20429.3%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%201024%201024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M923%20283.6a260%20260%200%200%200-56.9-82.8a264.4%20264.4%200%200%200-84-55.5A265.3%20265.3%200%200%200%20679.7%20125c-49.3%200-97.4%2013.5-139.2%2039q-15%209.15-28.5%2020.1q-13.5-10.95-28.5-20.1c-41.8-25.5-89.9-39-139.2-39c-35.5%200-69.9%206.8-102.4%2020.3c-31.4%2013-59.7%2031.7-84%2055.5a258.4%20258.4%200%200%200-56.9%2082.8c-13.9%2032.3-21%2066.6-21%20101.9c0%2033.3%206.8%2068%2020.3%20103.3c11.3%2029.5%2027.5%2060.1%2048.2%2091c32.8%2048.9%2077.9%2099.9%20133.9%20151.6c92.8%2085.7%20184.7%20144.9%20188.6%20147.3l23.7%2015.2c10.5%206.7%2024%206.7%2034.5%200l23.7-15.2c3.9-2.5%2095.7-61.6%20188.6-147.3c56-51.7%20101.1-102.7%20133.9-151.6c20.7-30.9%2037-61.5%2048.2-91c13.5-35.3%2020.3-70%2020.3-103.3c.1-35.3-7-69.6-20.9-101.9M512%20814.8S156%20586.7%20156%20385.5C156%20283.6%20240.3%20201%20344.3%20201c73.1%200%20136.5%2040.8%20167.7%20100.4C543.2%20241.8%20606.6%20201%20679.7%20201c104%200%20188.3%2082.6%20188.3%20184.5c0%20201.2-356%20429.3-356%20429.3%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ant-design/heart-outlined.svg?color=%231a73e8&size=48
