DocHero
Lesson 48 +10 XP

HTML Emojis

Emojis are pictures made of characters! You can type them right into your HTML, or use character codes.

Just paste the emoji!

Modern HTML uses UTF-8, so you can type emojis directly:


html
<p>I love pizza! &#128523; </p>

Wait, that used a code. Here's typing it directly:


html
<p>I love coding! 😄</p>

Using character codes

Some emojis are easier to write as a code. Each emoji has a number, and you write it as &#<number>;.


html
<p>&#128512;</p>  <! - 😀 grinning face - >
<p>&#128513;</p>  <! - 😁 grinning face with smiling eyes - >
<p>&#128514;</p>  <! - 😂 face with tears of joy - >
<p>&#128517;</p>  <! - 😅 smiling face with open mouth and cold sweat - >
<p>&#128522;</p>  <! - 😊 smiling face with smiling eyes - >

Popular emojis and their codes


html
&#128151;  ❤️  red heart
&#128153;  💙  blue heart
&#128156;  💜  purple heart
&#128525;  😍  smiling face with heart-eyes
&#128526;  😎  smiling face with sunglasses
&#128580;  🙄  face with rolling eyes
&#127881;  🎉  party popper
&#127800;  🌸  cherry blossom
&#127829;  🍕  pizza
&#128077;  👍  thumbs up

Make sure your page uses UTF-8

For emojis to work, include the charset meta:


html
<meta charset="UTF-8">

TL;DR

  • Emojis are characters; UTF-8 lets them work.
  • Type emojis directly, or use &#number; codes.
  • &#128512; is a smiling face, &#128151; is a heart.
  • Always set <meta charset="UTF-8">.
  • Don't overuse them: a sprinkle is better than a flood!