Using Emojis In HTML

July 24, 2020 by Andreas Wik

Emojis in HTML

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.

 

Share this article

Recommended articles

@awikio