How to display Emoji in React App

I would like to display emojis on my webpage in a react chat app. The plan is to give the user a list of emojis to select from. How do I use the codes like '1F683' and have them display the emoji on the page? I need to support Chrome.

I am able to use css to show the emoji.

<div className="smiley"></div>

.smiley:after {
    content: "\01F683";
}

I can also have a list of images and map them to the code and display an img element per emoji.

Is there another way and which is the best way to do this?

All emojis are pretty much standardized with the format at Emoji Cheat Sheet, so your given example above (\01F683) maps to railway_car in the Emoji Cheat Sheet.

It might be a better idea to store your emojis with these identifiers and map it to the actual emojis later on, without worrying about encoding the actual emoji (🚃) themselves, or not being able to tell/remember the actual emoji represented by the Unicode sequence (\01F683).

If you wish to map this human-readable identifier to the actual Unicode sequence/symbol itself, you have a few options, using railway_car as an example:

Twemoji Awesome

Twemoji Awesome is like Font Awesome, but with Twitter Emojis.

You can then insert an emoji like this, just like Font Awesome.

<i class="twa twa-railway-car"></i>

This will output the corresponding SVG:

Emoji Dictionary

There's an npm package aptly named emoji-dictionary that allows you to map the emoji name to the Unicode character, if you wish to use default the browser's default emoji renderer.

The usage will then look like this:

emoji.getUnicode("railway_car");

This returns 🚃 (which would display on modern browsers/might break on older browsers/etc).