Adding emojis to your React app - LogRocket Blog (2024)

Unicode has enabled the internet as we know it! It has largely resolved the issues with Mojibake (garbled text) between different character sets being used.

Unicode is essentially a huge dictionary with mappings (for example, U+058E) that point to symbols we can use (֎). In the past, there were issues when different countries, corporations, or individuals all had different ideas about which character mapping should correspond to which symbols.

This means you’d often try to read webpages ��like�� thisⅇ↫⋀₿≝┿⣶⤚⹭⺬⨺➄⧻⒏⥱➯⢃⢻⽱⓽⅘␶⋵⿠⟖➝⹣⚠❐≷↼Ⲝ┃ℵ⚔☪⸺⧷ⱟℱ⥹⧖⿞⏗ₓ⡐⟄⏪┸⓳⡷⊢⠒┣⋰⡫.

Messy, right?

Unicode compliance now allows us to not only reliably use different languages other than English, but it also enables us to use other unique characters, like Egyptian hieroglyphics (𓀀 𓂕 𓁎), Sumerian Cuneiform characters (𒀖 𒁝𒃿), or emojis (😃).

You can look at every emoji defined in the Unicode character set here.

Using emojis has been proven to boost engagement by 25.4% in certain situations, which explains why — based on 6.7 billion tweets over the last decade — emoji use has never been higher.

But just knowing that Unicode has enabled consistent emoji use isn’t enough – there are still plenty of questions around including emojis, such as:

  • How can we create reusable React components for them?
  • How can we ensure the emojis are accessible for screen readers?
  • What are the best practices when using them?
  • Should we be using the emojis themselves or use the mapping instead?

Let’s dig in! ⛏️

Emoji usage in React

There are multiple ways to include emojis in a codebase, but some are better than others.
Some of your options are:

  • To copy and paste the emoji inline: 😃
  • To reference the Unicode identifier/mapping of the emoji HTML entity, like: & #x1F603;
  • To copy and paste the emoji inline, then wrap it in a HTML element: 😃
  • Install a dependency to deal with it

All of these would work! But “making it work” isn’t always the optimal solution, so let’s discuss the benefits and drawbacks to each of these approaches.

Using emojis inline

This is probably the simplest solution.

Copy and paste the emoji, and then the job’s done.

In addition, screen readers are smart enough to know how to read emojis. So, simply doing this would leave your application utilizing emoji, and, for the most part, they’d be accessible.

But emoji often aren’t as plain as screen readers can describe. They often take on a second meaning.

For example, do you know these “second meanings” of emojis?

  1. 🐐
  2. 🐍
  3. 👏

The goat emoji is an acronym for the Greatest Of All Time, so people may often say something like the greatest rapper of all time (GOAT) is Tupac, or the greatest hockey player of all time (GOAT) is Wayne Gretzky.

Over 200k developers use LogRocket to create better digital experiencesLearn more →

The snake emoji is commonly used to describe people backstabbing, or being two-faced.

The clapping hands are commonly used to emphasize a point, like 👏 this 👏 between 👏 each 👏 word. Note that this particular type of writing is terrible for screen readers and discouraged for keeping your content friendly to screen readers. If you are interested in reading more about accessible emoji usage, here is an excellent resource, and so is this one.

But screen readers can’t convey that meaning. Even if they did, with language changing so much, the definition could be wrong and would need to constantly be updated.

It’s for this reason I would advise against using emoji inline.

That’s one emoji approach ticked off. Let’s talk about another.

Use the HTML entity Unicode mapping

You can use emojis hex or decimal code points from Unicode directly in your code, so that something like this:

<!DOCTYPE html> <div> <h1>Unicode Character</h1> <h3 style="display: inline">(U+1F436)</h3> <h3 style="display: inline">Dog Face</h3> <h3 style="display: inline">&#128054;</h3></div>

Would render the below:

Adding emojis to your React app - LogRocket Blog (3)

You could find these hex/decimal representations pretty easily, too. Here is an example of a huge list of emoji HTML hex codes.

Or you can find them via a lookup table available here.

Even using this method still doesn’t fix the issues we mentioned about second meanings being lost, and, as a developer, I think it is harder to work with.

It’s much easier to see the emojis in your code like this: 😃, rather than read their mappings like so: & #x1F603;

When you copy/paste an emoji directly, you immediately know what the emoji is and the context in which it is used. Emojis keep their semantic meaning a little better, and I’d argue that they are simpler to work with.

Wrap the inline emoji in a DOM Element

This is the best approach. You can simply wrap an inline emoji with a basic DOM element, something like this:

<span role="img" aria-label="dog">🐕</span>

This allows you to add better alt text if you think what a screen reader would pick is unclear with your writing.

More great articles from LogRocket:

  • Don't miss a moment with The Replay, a curated newsletter from LogRocket
  • Learn how LogRocket's Galileo cuts through the noise to proactively resolve issues in your app
  • Use React's useEffect to optimize your application's performance
  • Switch between multiple versions of Node
  • Discover how to animate your React app with AnimXYZ
  • Explore Tauri, a new framework for building binaries
  • Compare NestJS vs. Express.js

If you are unsure what a screen reader would read for each emoji, you can search on Emojipedia, and the title of the emoji is what a screen reader would likely say.

Some examples are:

  • 🥰: Smiling face with hearts
  • 🌏: Globe showing Asia-Australia
  • 🕴️: Person in suit levitating

Writing quality alt text is hard, and if you decide to re-word what the default text is slightly to better convey your meaning, remember that emotion matters.

For optimal reuse, you could make a very simple functional component that passes in all the necessary meta-data, something like this:

import React from 'react';const Emoji = props => ( <span className="emoji" role="img" aria-label={props.label ? props.label : ""} aria-hidden={props.label ? "false" : "true"} > {props.symbol} </span>);export default Emoji;

Then this component could be imported and used in a standardized way throughout the codebase:

<Emoji symbol="🐑" label="sheep"/>

With this method, you ensure a consistent and reusable pattern to use emoji in your codebase, and because <span> displays inline by default, it can be used right in the middle of text with minimal CSS rework.

You can provide sensible defaults for the components properties, such as defaulting the aria-hidden to false if that also suits your use cases.

Doing so ensures your emojis are accessible, where you can explain any second meanings or extra explanation you want to accompany your emoji.

Install a dependency to deal with it

Installing a dependency makes the job easier, but it is generally less configurable if you need to do something specific or as a unique use case just for you.

There are several great npm packages available: emoji-picker-react, Unicode Emoji, or node-emoji. They are all easily and similarly installed.

For example, emoji-picker-react has a really simple setup. To include it in your dependencies, simply run npm i emoji-picker-react. It offers a dropdown option for the emoji you want to choose.

Adding emojis to your React app - LogRocket Blog (4)

The npm package does use React Hooks, so you will need to use React 16.8 or higher!

The docs have a useful explanation of how to include it also:

import React, { useState } from 'react';import Picker from 'emoji-picker-react';const App = () => { const [chosenEmoji, setChosenEmoji] = useState(null); const onEmojiClick = (event, emojiObject) => { setChosenEmoji(emojiObject); }; return ( <div> {chosenEmoji ? ( <span>You chose: {chosenEmoji.emoji}</span> ) : ( <span>No emoji Chosen</span> )} <Picker onEmojiClick={onEmojiClick} /> </div> );};


I hope this has been informative! 🤓

There are multiple ways to add emojis into your React app, but with accessibility and reusability in mind, a simple functional component should fit almost every single use case.

Full visibility into production React apps

Debugging React applications can be difficult, especially when users experience issues that are hard to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.

LogRocket is like a DVR for web and mobile apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.

The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.

Modernize how you debug your React apps — start monitoring for free.

Adding emojis to your React app - LogRocket Blog (2024)


How do I add Emojis to textarea react? ›

React InputEmoji provides a simple way to have an input element with emoji picker support. Click the picker button next to the input field and select an emoji from the popup window. Done!

How do you change Emojis On react? ›

Change Your Reaction

Android, iOS: Long-press the message you reacted to, then select a different emoji.

How do you add emoji to react native? ›

  1. yarn add react-native-emoji-board.
  2. yarn add react-native-vector-icons if you don't have it.
  3. yarn add @react-native-community/viewpager if you don't have it.

How do I add Emojis to my website? ›

Emojis can be inserted in HTML documents by specifying charset to UTF-8 that will be used while displaying the web pages in the browser. This character encoding information is specified by using <meta> tag in the head section. After declaration of charset, emojis can be added in HTML by using <p> and <span> tags.

Can you put Emojis in LaTeX? ›

As shown in the examples below, you can insert emoji using suitable fonts and commands provided by LaTeX packages.

How do I add a Unicode character to a React? ›

Unicode can be added to React. js by passing the Unicode characters into JSX brackets. When rendered, the Unicode values will be outputted correctly.
  1. We pass %C9ire inside the name prop. ...
  2. Inside our render function, {} successfully renders our string and its Unicode characters.
27 Apr 2020

How do I add a style to a reacted page? ›

To style an element with the inline style attribute, the value must be a JavaScript object:
  1. Insert an object with the styling information: class MyHeader extends React. ...
  2. Use backgroundColor instead of background-color : class MyHeader extends React. ...
  3. Create a style object named mystyle : class MyHeader extends React.

How do you add Emojis to JavaScript? ›

In JavaScript you need to specify the innerHTML by pasting the Emoji. /* You need an HTML element with the class 'element' */ document. querySelector(". element").

How do I import social media icons into React? ›

To include the icons, you'll use a package called react-font-awesome , which provides Font Awesome support for React.
You'll need these three packages:
  1. @fortawesome/react-fontawesome.
  2. @fortawesome/fontawesome-svg-core.
  3. @fortawesome/free-brands-svg-icons.
11 Dec 2019

How do you put Emojis in a text field? ›

To insert a 🙂 emoji, either: Type a colon followed by a keyword, e.g., :smile , then press Enter or Return to add the highlighted emoji, or click the desired emoji from those displayed, or. Select the emoticons toolbar button to open the picker, and use the tabs or search bar to browse, then click the desired emoji.

How do I import a logo into React? ›

This is done by specifying the relative path from the file to the image we are importing: import Logo from './images/react-logo. png'; const App = () => { return ( <div> <img src={Logo} alt="React Logo" /> </div> ); };

How do I add emojis to my blog? ›

Using Emojis in WordPress on Android

On the keyboard, tap on the Emoji button to switch to the Emoji keyboard. You'll now see the emoji keyboard where you can search or browse to find the emoji that you want to add.

Do emojis help SEO? ›

Emojis are allowed, but it's highly unlike Google will display them. There's no SEO advantage to using them, either. The only potential benefit to emojis is an improved click-through rate, so that's something you'll have to weigh out when deciding if they're worth using.

How do you add new emojis? ›

How to Get New Emojis on Android
  1. Update to the Latest Android Version. Each new version of Android brings new emojis. ...
  2. Use Emoji Kitchen. 2 Images. ...
  3. Install a New Keyboard. 2 Images. ...
  4. Make Your Own Custom Emoji. 3 Images. ...
  5. Use a Font Editor. 3 Images.
18 Oct 2022

Which icon library is best for react? ›

9 Best React Icon Libraries in 2022
  • Unicons. Get Unicons. ...
  • Font Awesome. Font Awesome is a popular icon library, with over 2,000 free and open-source icons. ...
  • React Feather. ...
  • Material UI. ...
  • Styled Icons. ...
  • IconPark. ...
  • CoreUI for React. ...
  • Iconify.
13 Sept 2022

How do I add widgets to react app? ›

Getting started
  1. Open up a terminal on your computer and navigate to the directory where you want your app to be.
  2. Type the following three commands: $ npx create-react-app my-app # create the application named my-app. $ cd my-app. ...
  3. Edit the App. js file so that it says “My Custom widget” instead of “Edit src/App.

Are React Icons free? ›

Learn about a React library called React Icons that provides thousands of free, Open Source icons that you can use in your next project.

Can you use emojis in react? ›

To include it in your dependencies, simply run npm i emoji-picker-react . It offers a dropdown option for the emoji you want to choose. An emoji dropdown selector found here. The npm package does use React Hooks, so you will need to use React 16.8 or higher!

Can you code with emojis? ›

Emojicode is an object-oriented programming language that we can code with emojis. The use of emojis makes programming fun in Emojicode. It is a strongly typed programming language with first-class support for the class.

Is there Emmet for React? ›

Easy way to enable emmet for React

It's already included for all HTML and CSS files by default in VS code but we need to do some extra configuration to enable it for React. 4. Once opened, add "javascript": "javascriptreact" under “ emmet. includeLanguages ” and save the file.

Can I add vanilla JavaScript to React? ›

You can build a custom bundle, include it using the <script src=...> HTML tag, and use without the React framework (for example, with Vanilla JavaScript, jQuery, or other JavaScript frameworks that use direct DOM manipulation).

How do you dynamically change CSS on React? ›

These are the steps that we will follow in the process:
  1. Create a new React. ...
  2. Adding a custom variable to change the React. ...
  3. Getting property of a CSS custom property with JavaScript.
  4. Setting up the value of a CSS custom property with JavaScript.
  5. Dynamically resizing the logo with a custom CSS Property.
24 Nov 2021

Can React be used for styling? ›

Styling in React applications describes how React components or elements are displayed on screen or any other media. The whole essence of building frontend UIs with React is how flexible it is to build these UIs especially as components and also style them to give us a great look and experience.

How do you add an inline style to a React? ›

To set inline styles in React: Set the style prop on the element to an object. Set the specific CSS properties and values to style the element. For example, <div style={{backgroundColor: 'salmon', color: 'white'}}> .

Can JSON store emojis? ›

If you want to send send an emoji item through JSON, first you need to formate DB to UTF-8 AND in IOS you need to encode for NSUTF8StringEncoding. So first make sure your DB formate to UTF-8 then encode parameters to NSUTF8StringEncoding.So here is a sample request when sending the message.

What is the HTML code for emojis? ›

Emoji Characters

Emojis are also characters from the UTF-8 alphabet: 😄 is 128516. 😍 is 128525. 💗 is 128151.

How do I add emojis to Unicode? ›

How to Input Unicode/Emoji
  1. Insert Emoji. Press ❖ Window + . to open emoji panel. Windows 10 emoji panel.
  2. Character Map. Press ❖ Window then type charmap to open the character map panel. ...
  3. To insert Unicode by hexadecimal. Suppose we want to insert this character: ...
  4. To Insert Unicode by Decimal. Press and hold Alt.
25 Jun 2017

How do I import all material icons into React? ›

Here we are using the Material Icons alongside the texts.
  1. Step 1: Start a New React Project.
  2. Step 2: Install Material UI (MUI) package.
  3. Step 3: Install Material Icons Package.
  4. Step 4: Start Using MUI Icons!
9 Dec 2021

Is React good for social media? ›

Yes, It's good approach to build Social networking App in React. The React Social Network is an open-source project relying on React. React is a powerful javascript library for building the user interface.

Is Instagram coded in React? ›

IT is all there in the API of the app – and is really impressive. Instagram is completely based on the ReactJS library and has let fans fully adapt to its amazing features.

Can you use Emojis in App Store description? ›

Conclusion: You can use Emojis in the app store description, do not use it in screenshots, logos, videos or inside of your app as part of the UI!

How do you text custom Emojis? ›

Personalize messages with your emoji
  1. Open the Messages app and create a new message.
  2. Tap the Enter message field and the on-screen keyboard will appear.
  3. Tap the smiling emoji icon, and then tap your AR Emoji.
  4. You'll see GIFS of your very own avatar. Select your desired emoji, and then tap the Send icon.

Where can I type Emojis? ›

Access the emoji keyboard by pressing Windows key + . (period). Navigate through emoji category tabs at the bottom of the window, or type a word (e.g., smile) to search for an emoji. Click any emoji to insert it.

Is it better to use SVG or PNG in React? ›

Instead of using . png or . jpeg files in your React Native app, you should be using the SVG format. SVG is a vector-based format that can scale infinitely without compromising quality.

Can you use PNG in React? ›

It is usually best to colocate images right next to the components that use them to make sure you don't have dangling images if you end up deleting or changing the component. You can use this approach to import and use png , svg , webp , jpg , etc, images in your React app.

How do I make my blog aesthetically pleasing? ›

How to Make a Blog Look Good: 9 Design Tips
  1. Use a Professional Domain Name.
  2. Choose a Self-Hosted WordPress Blog.
  3. Create a Beautiful Blog Logo.
  4. Pick a Color Palette for Your Brand.
  5. Use a Professionally-Designed Blog Theme.
  6. Install the Best WordPress Plugins for Bloggers.
  7. Add High-Quality Images.
29 Jul 2022

Can you add emojis in CSS? ›

Emojis in CSS

All you have to do is remove the U+ from the unicode endpoint and add the \0 (slash zero) characters just before it.

How do I add plugins to my blog? ›

To manually add a plugin to your WordPress website:
  1. Download the desired plugin as a . ...
  2. From your WordPress dashboard, choose Plugins > Add New.
  3. Click Upload Plugin at the top of the page.
  4. Click Choose File, locate the plugin . ...
  5. After the installation is complete, click Activate Plugin.
24 Jan 2022

Do emojis increase open rates? ›

The open rate of emails with emojis in the subject line is 56% higher compared to the plain subject lines. [Experian] 44% of users are more likely to purchase products advertised using emojis.

Do posts with emojis perform better? ›

🌟 Do posts with emojis perform better? Posts with emojis do perform better. As per YouGovAmerica reports, 57% of Facebook posts with emojis get more likes, and 33% have more shares and comments. While Instagram posts and tweets with emojis increase engagement rate by 48% and 25%, respectively.

Do emojis boost engagement? ›

Boost social media post engagement

SproutSocial reported that by using an emoji on Twitter, brands can increase engagement rates by 25%. On a Facebook post, emojis can boost engagement by 57%!

Is there an app for more emojis? ›

Microsoft SwiftKey

The built-in emoji keyboard has every emoji you'll ever need and more. Microsoft SwiftKey learns your favorite emoji so you can always send your friends the right reactions. Microsoft SwiftKey caters to all typing tastes, with free designs and themes to fit any style.

Can new emojis be created? ›

You can create each emoji in a three-step process: Select the overall shape and color of your emoji. Pick a face for the picture in your emoji. Download your emoji, ready to use in your messages.

What is import {} In React? ›

Since we have a default export, importing anything from that file will provide us with a person object. For imports from the info. js file, we will import from two different constants. Therefore, we use {} to precisely target specific things from that file.

Can we use innerHTML in textarea? ›

For div and span, you can use innerHTML, but for textarea use value.

Should you still import React? ›

You no longer need to import React from "react" . Starting from the release 17 of React, JSX is automatically transformed without using React. createElement . However, other exports like hooks must be imported.

Should I always import React? ›

Note: From React version 17 you don't even need to import React from “react” for smaller projects but earlier versions of React projects need to import it. JSX transformer internally takes care of converting a JSX to React elements but you may still need to import it for using hooks like useState and useEffect.

How do I add Emmet to React? ›

Go to settings > extensions > emmet > include languages and add javascript as the item and javascriptreact as the value.

How do I set up Emmet for React? ›

To setup Emmet with React in VSCode:

Go to Code (at the top of your screen), then Preferences, then Settings in VSCode. In the options on the left, select Extensions, then Emmet. Scroll to the Include Languages section, add in the item input, javascript and in the value input, javascriptreact and hit Add Item.

Does Emmet work with JSX? ›

Emmet does not work in js/jsx files for VS Code 1.62.

Why you shouldn't use innerHTML? ›

'innerHTML' Presents a Security Risk

The use of innerHTML creates a potential security risk for your website. Malicious users can use cross-site scripting (XSS) to add malicious client-side scripts that steal private user information stored in session cookies.

What is the disadvantage of innerHTML? ›

Disadvantages of innerHTML

It is very slow because as inner HTML already parses the content even we have to parse the content again so that's why it takes time. When we have used the event handlers then the event handlers are not automatically attached to the new elements created by innerHTML.

What to use instead of innerHTML in React? ›

dangerouslySetInnerHTML is an attribute under DOM elements in React. According to the official documentation, dangerouslySetInnerHTML is React's replacement for using innerHTML in the browser DOM to set HTML programmatically or from an external source.

Does React have built in icons? ›

A built-in library of icons is provided by React, by using it we can include any number of icons in our project.

How do you add a font face to React? ›

How to add fonts to a React app
  1. Create a new folder called fonts in your src folder.
  2. Download the fonts locally and place them inside the fonts folder.
  3. Open your index. css file and include the font by referencing the path.
16 Jul 2022

Top Articles
Latest Posts
Article information

Author: Barbera Armstrong

Last Updated:

Views: 5536

Rating: 4.9 / 5 (59 voted)

Reviews: 82% of readers found this page helpful

Author information

Name: Barbera Armstrong

Birthday: 1992-09-12

Address: Suite 993 99852 Daugherty Causeway, Ritchiehaven, VT 49630

Phone: +5026838435397

Job: National Engineer

Hobby: Listening to music, Board games, Photography, Ice skating, LARPing, Kite flying, Rugby

Introduction: My name is Barbera Armstrong, I am a lovely, delightful, cooperative, funny, enchanting, vivacious, tender person who loves writing and wants to share my knowledge and understanding with you.