How to Create a Heart Icon on Your Website

Build a simple heart symbol using HTML

What to Know

  • Hands down easiest: Copy the heart from elsewhere and paste it onto the page.
  • Alternatively, use HTML code to make a heart icon.

This article explains the two main ways to insert a heart symbol on your website.

HTML Heart Symbol

You can use CSS text styles to change the color of the heart symbol and font styles to change the size and weight (boldness) of the heart symbol.

  1. With your website editor, open the page that should have the heart symbol, using editing mode instead of WYSIWYG mode.
  2. Put your cursor exactly where you want the symbol to be.
  3. Type the following within the HTML file:
  4. Save the file and open it in a web browser to make sure it worked. You should see a heart like this: ♥

Copy and Paste the Heart Icon

Another way you can get the heart symbol to display is to simply copy and paste it from this page directly into your editor. However, not all web browsers will reliably display it in this way.

Keep in mind that with WYSIWYG-only editors, you can copy and paste the heart symbol using the WYSIWYG mode, and the editor should convert it for you.

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "How to Create a Heart Icon on Your Website." ThoughtCo, Dec. 28, 2021, thoughtco.com/heart-symbol-on-web-page-3466519. Kyrnin, Jennifer. (2021, December 28). How to Create a Heart Icon on Your Website. Retrieved from https://www.thoughtco.com/heart-symbol-on-web-page-3466519 Kyrnin, Jennifer. "How to Create a Heart Icon on Your Website." ThoughtCo. https://www.thoughtco.com/heart-symbol-on-web-page-3466519 (accessed July 7, 2022).