Configure custom emoji

[Discourse]

This guide explains how to configure custom emojis on your Discourse site.

Required user level: Administrator

Configuring custom emoji

Want to change emoji for your Discourse site? Let’s take a look at how to configure custom emoji for your Discourse site, including selecting emoji sets, uploading new emoji, and adjusting emoji sizes.

Selecting an emoji set

Discourse comes with seven different emoji sets:

• Apple/International style
• Google style
• Twitter style
• Emoji One style
• Win10 style
• Google Classic
• Facebook Messenger

You can select an emoji set at /admin/config/emoji/settings?filter=emoji%20set along with other emoji-related settings.

Adding custom emoji

To add custom emoji:

1. Navigate to: Discourse Admin - Config - Emoji at /admin/config/emoji
2. You can:
   • Enter a name and click Add emoji to upload a photo as an emoji
   • Drag and drop up to 10 files into the Name field to bulk upload; filenames will be used as emoji names.

Resizing custom emoji

By default, all emoji are resized via CSS to 20x20, but this can be overridden with custom CSS. To maintain the correct aspect ratio and native size in posts, add the following CSS:

/* Make emoji normal size (don't force square) */
div.topic-post img.emoji[src*="uploads"], 
div.d-editor-preview img.emoji[src*="uploads"], 
div.emoji-modal img.emoji[src*="uploads"], 
div.d-editor-textarea-wrapper img.emoji[src*="uploads"], 
div.title-wrapper img.emoji[src*="uploads"], 
td.main-link img.emoji[src*="uploads"] {
    width: auto;
    height: auto;
}

To customize a specific emoji’s size, use:

img.emoji[title=":youremoji:"] { 
    height: XXpx; 
    width: YYpx; 
}

For resizing emoji in chat messages and user status in chats:

div.chat-message-text img.emoji[src*="uploads"], 
span.user-status-message img.emoji[src*="uploads"] {
    width: auto;
    height: auto;
}

Last edited by @martin 2025-01-23T05:07:38Z

Check document

Perform check on document:

[Roi]

I noticed that the custom emojis/smileys show 20x20 in chat messages and in the user status in chats. I solved it that way:

div.chat-message-text img.emoji[src*="uploads"] { /* Chat messages */
    width: auto;
    height: auto;
}

span.user-status-message img.emoji[src*="uploads"] { /* User status in chat */
    width: auto;
    height: auto;
}

Would you do it that way, too? If yes, it might be useful to add it to this wiki post above. If not, I am happy to optimize my CSS code.

[Vladislav_Jandric]

I customized new Emoji, but I can t it find among another Emojis.

[ondrej]

Have you scrolled all the way down in the emoji picker? That’s where your custom emoji groups live.