A CSS snippet to replace the hardcoded Twitter emoji on Mastodon with the local font

mastodon-replace-emoji.css

/*
==UserCSS==
@name             Mastodon - change emoji in emoji picker
@match            https://mastodon.social/*
@version          1.1.1
==/UserCSS==
*/

/* NOTES:
 *
 * For this to work, you will need to have an emoji font installed
 * locally. You will need to block e.g. static-cdn.mastodon.social/emoji in
 * your ad blocker of choice. I suggest uBlock for this.
 *
 * This uBlock filter will work around uBlock's "hide placeholders" option:
 * ||static-cdn.mastodon.social/emoji/*$empty
 *
 * Furthermore to load the background image, you'll need to upload it to your
 * Mastodon instance (if not mastodon.social). You can then link it from your
 * post's media attachment. You can't use an external link because Mastodon
 * uses a service worker that fails on external links thanks to CORS.
 *
 * As of July 2025, the emoji spritemap has been patched by Mastodon to be
 * compatible with Emoji 15.1, and now has 32x32 emoji (with 1px margins).
 * The spritemap I've linked below has the Noto Color Emoji, which are the
 * emoji used on vanilla Android phones. If you use different emoji on your
 * system, you will need to regenerate the spritemap yourself.
 */


.emoji-mart-emoji:not(.emoji-mart-emoji-custom) > span {
  background-image: url(https://files.mastodon.social/media_attachments/files/114/856/668/082/994/629/original/dd1db336520baac4.png) !important;
}

img.custom-emoji {
  margin-bottom: -3px !important;
}

img.emojione {
  vertical-align: initial;
}