Heart icon

Heart icon in outline, twotone, bold and bulk. Free in all four styles, for reactions, ratings, favourites, awards, stickers. Copy the SVG, the React, Vue or Svelte component, or download a PNG.

All four styles

Outline

Full linework, every stroke at 1.5px. The reference drawing.

TwoTone

The same linework, with secondary strokes dropped to half tone.

Bold

No strokes at all. One filled form, cut with even-odd holes.

Bulk

Filled, with the secondary mass at half tone.

Copy it

React

import { IconHeart } from "@devigner-ui/icons";

<IconHeart className="size-6" />

Vue

<script setup>
import { IconHeart } from "@devigner-ui/icons-vue";
</script>

<template>
  <IconHeart class="size-6" />
</template>

Svelte

<script>
  import { IconHeart } from "@devigner-ui/icons-svelte";
</script>

<IconHeart class="size-6" />

SVG

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 5.5C7.5.83 2 4.27 2 9.14s4.02 7.45 6.96 9.77C10 19.73 11 20.5 12 20.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path><path opacity="1" d="M12 5.5C16.5.83 22 4.27 22 9.14s-4.02 7.45-6.96 9.77C14 19.73 13 20.5 12 20.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg>

Category

Reactions, Badges & Emojis

Styles

outline, twotone, bold, bulk, free in all four styles

Used for

reactions, ratings, favourites, awards, stickers

Also called

heart, path, curved, smooth, closed, love, favorite, like, care

More Reactions, Badges & Emojis icons

• Confounded Circle
• Confounded Square
• Crown
• Crown2
• Crown3
• Crown Line
• Crown Minimalistic
• Crown Star
• Dislike
• Dislike Alt
• Emoji Funny Circle
• Emoji Funny Square
• Emoji Happy
• Emoji Normal
• Emoji Sad
• Expressionless Circle
• Expressionless Square
• Facemask Circle
• Facemask Square
• Hand Heart
• Hand Money
• Hand Shake
• Hand Stars
• Happyemoji

All Reactions, Badges & Emojis icons

Browse all 8,584 icons