Styling Emojis for Websites

  • posts
  • CSS

Emojis are the closest thing you can get to a universal language online. They are everywhere and used in any various ways. On the web, you can use emojis to replace icons. But, depending on your device the result will be different. Here are some ways to style emojis so that they blend with your design system.

Post header where default emojis are used

Apply this CSS filter to turn emojis in black and white.

[data-font="emoji"]{
filter: grayscale(1) saturate(2);
}

Post header where emojis are displayed in black and white

If you prefer to follow your primary color you can use the hue value inside the filter property like this.

:root{
--primary-hue: 170;
}

[data-font="emoji"]{
filter: sepia(1) saturate(2) hue-rotate(calc(var(--primary-hue) * 1deg));
}

Post header where emojis are displayed in blue

When using emojis, there are some important points to remember. First, consider that screen readers read the alt text aloud. So, imagine yourself reading your written content to someone else and ask yourself if it sounds comprehensible. Second, it’s crucial to understand that emojis are not universally understood. While commonly used emojis may be deemed safe, it’s always recommended to confirm how different users might interpret them.