PostCSS Color Emoji

✏ Emoji in full color!

Depending on the font, some emojis are rendered as their text variation instead of the colored version you know and love. This PostCSS plugin gives you full access to the system emojis on macOS, Windows, and Linux.

/* Input */
.example {
  font-family: color-emoji;
}

/* Output */
.example {
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

Check out the visual test.

Install

# npm
npm install --save-dev postcss postcss-color-emoji

# or yarn
yarn add --dev postcss postcss-color-emoji

Usage

Add it to your PostCSS work-flow, whatever way you choose to.

// Using a postcss.config.js
const colorEmoji = require('postcss-color-emoji');

module.exports = {
  plugins: [
    colorEmoji
  ]
};

Then use the color-emoji font-family name where ever you need it.

.one {
  font-family: sans-serif, color-emoji;
}

/* Using custom properties */
:root {
  --emoji: color-emoji;
}

.two {
  font: var(--emoji);
}

Credits

• Nick Galbreath for his article on the CSS Color emoji stack
• Mark Dotto for his piece on shipping system fonts to GitHub.com

License