The symbol, which will be a string containing the emoji, is passed into the returned span. This is a good practice if the emoji doesn’t add anything to the website other than a bit of flair. This means it will be ignored by the screen reader. If absent, aria-label is left blank and aria-hidden is set to true. If present, the label is used to generate an aria-label, which will be read by a user’s screen reader. Our Emoji component takes two props: label, and symbol. These can be represented in React by wrapping an escaped string with braces, e.g. We’ll get to their recommended solution in a bit, but for now remember: you shouldn’t use paste emojis inline with other text.Īs with other unicode characters, emojis can be represented by a series of characters and digits. That is… until you look in the terminal and see that pasting an emoji straight into your component throws an ESLint error.

If you did, you would see the emoji rendered on the screen and wonder why I took the time to write an article for something so simple. Now that you have your emoji copied, you might be tempted to past it straight into the JSX of your React component.

The former has a handy “copy” feature that removes the need to click and drag. Online, however, you’re going to need to use an online resource or browser extension. On your phone, they’re probably build straight into your keyboard. Once you’ve settled an appropriate use case, now it’s time to find your emoji. Just a bit of flair to spice up your page, 👌? ( Note: That was an intentionally bad use of an emoji.) Finding emojis on the computer Because they display differently for different users, it is recommended that you only use emoji’s for non-essential or decorative purposes.

They are generally the same, but there are some major stylistic differences. Emoji’s render differently on different devices (Source: )

Smile emoji svg