heart icon
heart from Framework7 Icons by Vladimir Kharlampidi · Outline · MIT Free for personal and commercial use.
- Name
- heart
- Set
- Framework7 Icons
- Style
- Outline
- Viewbox
- 56×56
- License
- MIT
1 other variant in Framework7 Icons
The same icon in other sets
heartAkar Iconsheart-filledAnt Design IconsheartBootstrap IconsheartBoxIcons v2heartBoxIcons v2 SolidheartCodiconsheart-fillEva 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
Related icons in Framework7 Icons
Use the heart icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M4.727 20.64c0 9.985 8.367 19.805 21.562 28.243c.516.304 1.219.633 1.711.633s1.195-.328 1.688-.633c13.218-8.438 21.586-18.258 21.586-28.242c0-8.297-5.696-14.157-13.29-14.157c-4.359 0-7.875 2.063-9.984 5.227c-2.11-3.14-5.648-5.227-9.984-5.227c-7.594 0-13.29 5.86-13.29 14.157m3.773 0c0-6.234 4.031-10.382 9.469-10.382c4.406 0 6.914 2.742 8.437 5.086c.633.937 1.032 1.195 1.594 1.195s.914-.281 1.594-1.195c1.593-2.297 4.054-5.086 8.437-5.086c5.438 0 9.469 4.148 9.469 10.383c0 8.718-9.211 18.117-19.031 24.632c-.235.164-.375.282-.469.282s-.258-.117-.492-.282C17.71 38.758 8.5 29.36 8.5 20.641"/></svg>
React
import type { SVGProps } from "react";
export function F7Heart(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M4.727 20.64c0 9.985 8.367 19.805 21.562 28.243c.516.304 1.219.633 1.711.633s1.195-.328 1.688-.633c13.218-8.438 21.586-18.258 21.586-28.242c0-8.297-5.696-14.157-13.29-14.157c-4.359 0-7.875 2.063-9.984 5.227c-2.11-3.14-5.648-5.227-9.984-5.227c-7.594 0-13.29 5.86-13.29 14.157m3.773 0c0-6.234 4.031-10.382 9.469-10.382c4.406 0 6.914 2.742 8.437 5.086c.633.937 1.032 1.195 1.594 1.195s.914-.281 1.594-1.195c1.593-2.297 4.054-5.086 8.437-5.086c5.438 0 9.469 4.148 9.469 10.383c0 8.718-9.211 18.117-19.031 24.632c-.235.164-.375.282-.469.282s-.258-.117-.492-.282C17.71 38.758 8.5 29.36 8.5 20.641"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M4.727 20.64c0 9.985 8.367 19.805 21.562 28.243c.516.304 1.219.633 1.711.633s1.195-.328 1.688-.633c13.218-8.438 21.586-18.258 21.586-28.242c0-8.297-5.696-14.157-13.29-14.157c-4.359 0-7.875 2.063-9.984 5.227c-2.11-3.14-5.648-5.227-9.984-5.227c-7.594 0-13.29 5.86-13.29 14.157m3.773 0c0-6.234 4.031-10.382 9.469-10.382c4.406 0 6.914 2.742 8.437 5.086c.633.937 1.032 1.195 1.594 1.195s.914-.281 1.594-1.195c1.593-2.297 4.054-5.086 8.437-5.086c5.438 0 9.469 4.148 9.469 10.383c0 8.718-9.211 18.117-19.031 24.632c-.235.164-.375.282-.469.282s-.258-.117-.492-.282C17.71 38.758 8.5 29.36 8.5 20.641"/></svg> </template>
CSS
.icon-heart {
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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M4.727%2020.64c0%209.985%208.367%2019.805%2021.562%2028.243c.516.304%201.219.633%201.711.633s1.195-.328%201.688-.633c13.218-8.438%2021.586-18.258%2021.586-28.242c0-8.297-5.696-14.157-13.29-14.157c-4.359%200-7.875%202.063-9.984%205.227c-2.11-3.14-5.648-5.227-9.984-5.227c-7.594%200-13.29%205.86-13.29%2014.157m3.773%200c0-6.234%204.031-10.382%209.469-10.382c4.406%200%206.914%202.742%208.437%205.086c.633.937%201.032%201.195%201.594%201.195s.914-.281%201.594-1.195c1.593-2.297%204.054-5.086%208.437-5.086c5.438%200%209.469%204.148%209.469%2010.383c0%208.718-9.211%2018.117-19.031%2024.632c-.235.164-.375.282-.469.282s-.258-.117-.492-.282C17.71%2038.758%208.5%2029.36%208.5%2020.641%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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M4.727%2020.64c0%209.985%208.367%2019.805%2021.562%2028.243c.516.304%201.219.633%201.711.633s1.195-.328%201.688-.633c13.218-8.438%2021.586-18.258%2021.586-28.242c0-8.297-5.696-14.157-13.29-14.157c-4.359%200-7.875%202.063-9.984%205.227c-2.11-3.14-5.648-5.227-9.984-5.227c-7.594%200-13.29%205.86-13.29%2014.157m3.773%200c0-6.234%204.031-10.382%209.469-10.382c4.406%200%206.914%202.742%208.437%205.086c.633.937%201.032%201.195%201.594%201.195s.914-.281%201.594-1.195c1.593-2.297%204.054-5.086%208.437-5.086c5.438%200%209.469%204.148%209.469%2010.383c0%208.718-9.211%2018.117-19.031%2024.632c-.235.164-.375.282-.469.282s-.258-.117-.492-.282C17.71%2038.758%208.5%2029.36%208.5%2020.641%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/f7/heart.svg?color=%231a73e8&size=48
