Heart Icon
Free SVG icon from the Carbon Icons 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/320146.svg" alt="Heart icon" width="24" height="24">
React JSX
<img src="https://proicons.com/icon/320146.svg" alt="Heart icon" width={24} height={24} />
Vue template
<img src="https://proicons.com/icon/320146.svg" alt="Heart icon" :width="24" :height="24" />
CSS background
.icon-heart {
background-image: url('https://proicons.com/icon/320146.svg');
background-size: contain;
background-repeat: no-repeat;
width: 24px;
height: 24px;
display: inline-block;
}
SVG markup
<?xml version="1.0" encoding="iso-8859-1"?> <!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"> <path id="heart_1_" d="M20.678,5.111H30.5v-0.72h-9.373c-0.732-1.85-2.609-3.75-5.201-3.75c-3.856,0-6.348,2.447-6.348,6.235v1.29 C8.981,8.208,8.408,8.303,7.86,8.442V1H7.14v7.66c-1.265,0.434-2.371,1.133-3.28,2.049V1H3.14v10.534c-1.269,1.656-2,3.829-2,6.341 c0,1.503,0.594,3.553,2,5.601V31h0.72v-6.571c0.858,1.048,1.941,2.072,3.28,2.999V31h0.72v-3.1 c3.233,2.014,7.797,3.459,14.051,3.459c3.707,0,6.197-1.969,6.197-4.898c0-3.667-2.268-12.768-9.196-17.99 c0.51-0.328,1.196-0.489,2.097-0.489h9.49v-0.72h-9.49c-1.261,0-2.204,0.301-2.857,0.891c-0.024,0.013-0.045,0.032-0.066,0.051 c-0.679,0.653-1.019,1.645-1.019,2.995V16c0,0.199,0.161,0.36,0.36,0.36s0.36-0.161,0.36-0.36v-3.228 c1.176,1.167,2.138,2.498,2.619,3.398c0.064,0.121,0.189,0.19,0.317,0.19c0.058,0,0.116-0.014,0.17-0.042 c0.175-0.094,0.241-0.312,0.147-0.487c-0.688-1.288-1.985-2.898-3.254-4.05V11.2c0-0.986,0.197-1.712,0.593-2.231 c6.137,4.572,9.006,13.091,9.006,17.492c0,2.538-2.149,4.178-5.477,4.178c-15.15,0-20.051-8.6-20.051-12.764 c0-5.307,3.476-9.014,8.452-9.014c1.449,0,2.997,0.413,3.999,0.805c-0.032,0.251-0.055,0.505-0.055,0.766v4.527 c0,2.173-1.474,3.375-3.035,4.647c-1.74,1.419-3.539,2.886-3.539,5.769c0,0.199,0.161,0.36,0.36,0.36s0.36-0.161,0.36-0.36 c0-2.541,1.59-3.838,3.274-5.211c1.622-1.322,3.299-2.69,3.299-5.205v-4.527c0-0.332,0.034-0.653,0.091-0.965 c0.001-0.01,0.005-0.021,0.005-0.031C15.544,6.913,17.795,5.111,20.678,5.111z M10.312,8.142c-0.005,0-0.01,0-0.015,0V6.877 c0-4.066,2.908-5.515,5.628-5.515c2.14,0,3.723,1.503,4.428,3.045c-1.032,0.046-1.994,0.307-2.834,0.745L17.38,4.95 c-0.235-0.336-1.083-1.431-2.074-1.431c-0.995,0-1.689,0.656-1.689,1.596c0,0.936,0.998,1.78,1.306,2.018l0.234,0.183 c-0.314,0.499-0.553,1.046-0.705,1.63C13.357,8.533,11.803,8.142,10.312,8.142z M15.577,6.731c-0.109-0.085-0.211-0.165-0.215-0.168 c-0.38-0.294-1.025-0.931-1.025-1.447c0-0.532,0.38-0.876,0.969-0.876c0.512,0,1.121,0.606,1.484,1.123l0.111,0.162 C16.398,5.863,15.953,6.269,15.577,6.731z M11.045,25.996c3.758,2.027,8.467,2.022,10.72,2.006l0.358-0.001 c0.199,0,0.36,0.161,0.36,0.36s-0.161,0.36-0.36,0.36h-0.356c-0.143,0.001-0.294,0.001-0.454,0.001 c-2.454,0-6.932-0.108-10.609-2.094c-0.175-0.094-0.24-0.312-0.146-0.487C10.651,25.966,10.87,25.901,11.045,25.996z M4.671,16.966 c-0.075,1.86,0.192,3.206,0.894,4.486c0.095,0.174,0.031,0.393-0.143,0.488c-0.055,0.03-0.114,0.045-0.172,0.045 c-0.127,0-0.25-0.068-0.316-0.188c-0.758-1.384-1.061-2.887-0.981-4.875c0.224-2.828,1.854-4.467,4.983-5.027 c0.196-0.038,0.383,0.095,0.418,0.291s-0.095,0.383-0.291,0.418C6.263,13.106,4.867,14.492,4.671,16.966z"/> <rect id="_Transparent_Rectangle" style="fill:none;" width="32" height="32"/> </svg>
More from Carbon Icons
View all
Heart in other icon packs
Copied!