export function Emoji({ icon, label }) {
  return <span aria-hidden={!label} aria-label={label} role="img">{icon}</span>
}

Usage

With a label

If you include a label, it will set aria-hidden to false, and will fill in the aria-label with the intended task or action you are conveying with the emoji.

<Emoji icon='🛒' label='Add To Cart' />

Without a label

This will apply aria-hidden, telling screen readers they can skip it without missing any important information.

<Emoji icon='🙃' />