Using Emojis In HTML

July 24, 2020 by Andreas Wik

Using emojis in your HTML is quite straightforward. Find the code for the emoji you want to use, tweak it a bit, and you’re done.

Go to this list and find select an emoji. Grab its code, for example the very top one, grinning face. Its code is U+1F600. To use it in your HTML you need to replace U+ with &#x and add a semi colon at the end of it. So U+1F600 will become 😀.

You control the size of the emojis with font-size in CSS.

To make it accessible, make sure to set the element’s role to img so screen readers treat it as an image, and add an aria-label with a description of it, e.g. aria-label=”Grinning face emoji”.

See the CodePen below for a few examples:

See the Pen Emojis in HTML by Andreas Wik (@andreaswik) on CodePen.

Another pretty cool site where you can explore the different emojis in more detail is emojipedia.org.