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.
Share this article
