Skip to content
⚛️ An accessible Emoji component for React applications
TypeScript JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Add workflow Jun 11, 2019
src Rename props interface Sep 5, 2019
.gitignore Add lib to .gitignore Jan 14, 2019
LICENSE Add license Jan 5, 2019 Update props interface Sep 5, 2019
jest.config.js Add tests Jan 5, 2019
package.json Patch bump Sep 5, 2019
tsconfig.json Change build target to ES6 Jun 11, 2019
yarn.lock Bump mixin-deep from 1.3.1 to 1.3.2 (#6) Sep 4, 2019


npm npm bundle size (minified) npm

⚛️ An accessible Emoji component for React applications


Emojis can add a light playfulness to your project but require some specific formatting in order to ensure they are accessible for all users. a11y-react-emoji's reusable Emoji component helps you do that quickly and painlessly.


The Emoji component wraps the provided symbol in a span with a role="img" attribute. If a label is provided, then it is passed as an aria-label to the span. If not, then aria-hidden is set to true.

<span aria-label="a rocket blasting off" role="img">🚀</span>
<span aria-hidden="true" role="img">🤫</span>

This follows the pattern recommended by Léonie Watson and used by eslint-plugin-jsx-a11y.


Add a11y-react-emoji to your project:

npm install --save a11y-react-emoji
# or
yarn add a11y-react-emoji


Import Emoji, a default export, from a11y-react-emoji and add it to your code:

import Emoji from 'a11y-react-emoji'

function HeartFooter() {
    return (
            Made with
            {' '}
            <Emoji symbol="💕" label="love" />
            {' '}
            by Sean McPherson

Emoji component

The Emoji component consumes two props: symbol and label. Every other prop is spread to the top-level JSX element, in this case a <span>.

interface Props extends React.HTMLAttributes<HTMLSpanElement> {
    label?: string; // optional
    symbol: string; // required


If you are using a11y-react-emoji with a CSS-in-JS library like styled-components or emotion, keep in mind that all additional props are passed to the JSX element.

Styling an Emoji with styled-components

import styled, { css } from 'styled-components'
import Emoji from 'a11y-react-emoji'

const StyledEmoji = styled(({ isSpinning, ...props }) => <Emoji {...props} />)`
    font-size: 32px;

    ${props => props.isSpinning && css`
        animation: spinning 1s linear infinite;



You can’t perform that action at this time.