Styling Emojis for Websites

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. Here are some ways to style emojis so that they blend with your design.

After adding emojis to website, you can end up something like this:

Each emoji have its own color and depending on the operating system will have a different visual design. To get consistent colors we can use the filter CSS to transform in black and white.

/* CSS */
.emoji {
  filter: grayscale(1) saturate(2);
}

You can also use the hue value of your primary color to give the same tint to emojis.

/* CSS */
:root {
  --primary-hue: 170;
}

.emoji {
  filter: sepia(1) saturate(2) hue-rotate(calc(var(--primary-hue) * 1deg));
}

Here we are combining sepia(), saturate() and hue-rotate() to achieve this result.

When using emojis, there are some important points to remember. First, consider that screen reader user will hear an alternative text. So, imagine yourself reading your written content to someone else and ask yourself if it sounds comprehensible.