If you are creating content for your website, you may want to include a heart symbol on the page.

Including symbols or emojis on a webpage is very simple to do as long as you understand some basic HTML.

Heart Symbol HTML Code Example

Note: The number corresponds to the decimal Code that represents the symbol.

I Love Blogging! ❤

Code Demo:

I Love Blogging! ❤

Heart Symbol CSS Code Example

You can also add hearts to a webpage by utilizing a CSS style.

The content (heart) is specified by its hexadecimal value.

<style>
.my-class:after {
  content: "\1F496";
}
</style>
<div class="my-class">Thank You!</div>

Code Demo:

Thank You!

List of HTML Heart Symbol Values

Symbol Decimal Code Hex Code (CSS)
\2619;
\2661
\2665
\2762
\2763
\2764
\2765
\2766
\2767
💌 💌 \1F48C
💏 💏 \1F48F
💑 💑 \1F491
💓 💓 \1F493
💔 💔 \1F494
💕 💕 \1F495
💖 💖 \1F496
💗 💗 \1F497
💘 💘 \1F498
💙 💙 \1F499
💚 💚 \1F49A
💛 💛 \1F49B
💜 💜 \1F49C
💝 💝 \1F49D
💞 💞 \1F49E
💟 💟 \1F49F
🖤 🖤 \1F5A4
😍 😍 \1F60D
😘 😘 \1F618
😻 😻 \1F63B
🧡 🧡 \1F9E1