Heart symbol in HTML: ♥ and U+2764
There are two common heart characters: the card suit heart at U+2665 with the named reference ♥, and the heavy black heart at U+2764 which usually renders as a colour emoji.
At a glance
- Character
- ♥ ❤
- Named entity
- ♥ for U+2665. None for U+2764.
- Decimal reference
- ♥ ❤
- Hex reference
- ♥ ❤
- Unicode code point
- U+2665, U+2764
- Unicode name
- BLACK HEART SUIT, HEAVY BLACK HEART
- In the entity reference
- Symbols
In detail
The two characters have different origins and different default behaviour. The card suit heart came from the playing card set and has a text presentation by default, so it inherits your CSS colour like any other glyph. The heavy black heart came from an emoji set and has an emoji presentation by default on most platforms, so it arrives red whatever colour you asked for.
That default can be overridden with a variation selector, an invisible character appended to the heart. The text selector at U+FE0E asks for the monochrome glyph, the emoji selector at U+FE0F asks for the colour one. Support is good but not universal, and a platform without the requested presentation falls back to whatever it has, so treat the selector as a strong hint rather than a guarantee.
For a like or favourite control this matters more than it sounds. A control whose filled and unfilled states are two different characters will shift width when it toggles, because the emoji glyph is usually wider than the text one. Using one character with a colour change, or an SVG with two paths, keeps the button geometry stable.
The card suit heart is the safer choice for anything that has to sit inline with text and match its colour, and it is the one with a named entity. Reserve the heavy heart for places where a colour emoji is what you actually want, and remember it will be announced by name rather than skipped.
Examples
<p>default: ❤</p>
<p>text style: ❤︎</p>
<p>emoji style: ❤️</p>︎ is U+FE0E and ️ is U+FE0F. They are invisible on their own.
<button aria-pressed="false" class="like">
<span aria-hidden="true">♥</span>
<span class="sr-only">Add to favourites</span>
</button>
.like span[aria-hidden] { color: #999; }
.like[aria-pressed="true"] span[aria-hidden] { color: #e0245e; }Things that catch people out
- A variation selector is a real character in the string. It counts toward a length limit and it will show up in a byte comparison even though nothing is visible.
- Setting a colour on the heavy heart usually does nothing, because the platform draws a colour bitmap or vector glyph that ignores CSS colour.
- Copying the emoji form from a design tool often brings the emoji variation selector with it, so a heart that looked monochrome in the mock arrives red in the browser.
Try it: HTML Entity Reference
Search 152 entities across 9 categories, switch the copy format between the character, the name, the decimal form and the hex form, and copy in one click.
HTML Entity Reference
LOCAL · Browser-OnlySearchable reference of 150+ HTML entities with one-click copy in any format
152 entities across 9 categories
Commonly Used
→Arrows(13)
±Math(35)
$Currency(8)
…Punctuation(21)
©Symbols(24)
πGreek(30)
½Fractions(6)
●Geometric(7)
æLatin Special(8)
Click any entity card to copy it in your chosen format. All data is embedded in the page and works offline.
Related HTML entities
All html entities →Card suits in HTML: spade, club and diamond
The spade, club and diamond suit characters with their named entities and code points, the outlined variants, and how to colour the red suits correctly.
Star symbols in HTML: filled and outlined
The black and white star characters, their numeric references, how to build an accessible star rating, and why half stars need clipping rather than a glyph.
Check mark and cross mark characters in HTML
The tick and cross characters at U+2713, U+2714, U+2717 and U+2718, their numeric references, font coverage problems, and why colour alone is not enough.
Box drawing characters in HTML
The box drawing block at U+2500 to U+257F, the light, heavy and double stroke sets, and the CSS and font rules that stop a text diagram falling apart.
Euro sign (€) in HTML
The euro sign at U+20AC, why it fell outside Latin-1, which side of the amount it belongs on in each language, and how to format currency properly.
Pound sign (£) in HTML
The pound sign at U+00A3, its entity forms, why the name is ambiguous between sterling and the hash key, and the encoding bug that doubles the character.
Tools for this
- HTML Entity Reference Free online HTML entity reference - search and copy HTML entities with live preview
- HTML Entity Encoder Free online HTML entity encoder - encode or decode HTML entities to prevent XSS and display issues