Heart Icon
Free SVG icon from the VS Code Codicons collection. Download or copy for use in any project.
The Heart icon is commonly used in like buttons, favorites lists and health apps. Available as a free SVG - copy the code or download directly.
img tag
<img src="https://proicons.com/icon/307220.svg" alt="Heart icon" width="24" height="24">
React JSX
<img src="https://proicons.com/icon/307220.svg" alt="Heart icon" width={24} height={24} />
Vue template
<img src="https://proicons.com/icon/307220.svg" alt="Heart icon" :width="24" :height="24" />
CSS background
.icon-heart {
background-image: url('https://proicons.com/icon/307220.svg');
background-size: contain;
background-repeat: no-repeat;
width: 24px;
height: 24px;
display: inline-block;
}
SVG markup
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M8.02199 14.072C7.89399 14.072 7.76599 14.023 7.66799 13.926L2.10399 8.36098C1.53799 7.79698 0.997986 6.89098 0.997986 5.69898C0.997986 3.94498 2.32599 2.00098 4.72799 2.00098C5.70299 2.00098 6.67899 2.35798 7.39299 3.07098L7.99499 3.67198L8.58699 3.07698C9.30499 2.35998 10.266 2.00298 11.229 2.00298C14.204 2.00298 14.998 4.68498 14.998 5.75298C14.998 6.70998 14.636 7.66598 13.912 8.39398L8.37599 13.927C8.27799 14.025 8.14999 14.073 8.02199 14.073V14.072ZM4.72799 2.96498C3.21699 2.96498 1.99799 4.18398 1.99799 5.69598C1.99799 6.57198 2.39499 7.23698 2.81099 7.65298L8.02199 12.866L13.204 7.68698C13.734 7.15398 13.998 6.45398 13.998 5.75298C13.998 4.27398 12.819 2.99298 11.229 2.99298C10.525 2.99298 9.82299 3.25598 9.29499 3.78398L8.35099 4.73298C8.25699 4.82698 8.12999 4.87998 7.99699 4.87998C7.86399 4.87998 7.73699 4.82698 7.64299 4.73398L6.68699 3.77898C6.16299 3.25498 5.46699 2.96598 4.72899 2.96598L4.72799 2.96498Z"/></svg>
More from VS Code Codicons
View all
Heart in other icon packs
Copied!