htmlcssunicodeemoji

Color for Unicode Emoji


It's possible to include Emoji characters in modern browsers, but how can one make it a single color and choose that color?

For example, here is some Emoji and some regular (plane 0) Unicode symbols. All should be red, but only the symbols are rendered in red.

Emoji color attempt

Associated HTML + CSS:

<p>
  🐘🐧🐼
  ♥★ℹ
</p>

p {
  font-size: 3em;
  color: red
}

Solution

  • Yes, you can color them!

    div {
      color: transparent;  
      text-shadow: 0 0 0 red;
    }
    <div>🚀🎭😻</div>