Heart icon
heart
The heart icon from Heroicons, in outline, solid, mini and micro styles. Use it for love, relationship, favorite and favourite.
- Component
- HeartIcon
- Intended size
- 24×24 px, 1.5 px stroke
- Iconset
- Heroicons
- Keywords
- love, relationship, favorite, favourite, like
Code
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" />
</svg>Heart icon in UI elements
Button · Mini
Secondary button · Mini
Icon buttons · Mini, and an Outline toggle that turns Solid
Input · Mini
Navigation · Outline
Loved Loved
Badges · Micro