How To Use Emojis in Your HTML Pages

Its 2018 and emojis are more essential than ever, so why should you limit their use to just texting or social apps?

Here's how to add emojis directly into your html pages:

The first thing you need to do is to make sure you declare UTF-8 inside a <meta> tag at the beginning of your html:

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">

Next you need to find the unicode for the emoji that you would like to use. Unicode.org has a great list for reference 😉. Here's an example of what to look for:

The unicode for 😁 =    U+1F601

If you plugged the emoji unicode directly into your code editor, you will notice that your browser still doesn't know quite what to do with it:

<p>So excited to see you U+1F601</p>

Your browser will print:

So excited to see you U+1F601

To fix this we must change the code a bit so that the browser can read the code correctly.

Replace the U+ at the beginning of the unicode with &#x then add the ; at the end of it all like so:

 &#x1F601;

Boom!

That's it! All it took was a few, quick steps to turn the unicode  U+1F601  into the HTML readable  &#x1F601; . Now you know exactly how to use emojis in your next html page!

Feel free to use my html emoji code list as a reference for more fun emoji codes to use in your projects 😉.

Here's a look at my current 'frequently used' emojis on my iPhone:😉 👌 😜 👍 😂 😭 😞 😘 🤞 😏 🤔 😳 😍 😊 😢. What are your most frequently used emojis? Let me know by sharing your thoughts on LinkedIn or Twitter.

more from the blog

13 Acronymns Ever Aspiring Designer Should Know
Quicktips For Using Atom
How To Build A Mad Lib With JavaScript