# Emoji selector and custom Emoji

**URL:** https://meta.discourse.org/t/emoji-selector-and-custom-emoji/22725
**Category:** Feature
**Tags:** emoji, rfc, spec
**Created:** [12월 1, 2014, 10:28오후 UTC](https://meta.discourse.org/t/emoji-selector-and-custom-emoji/22725 "2014-12-01T22:28:34Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [12월 1, 2014, 10:28오후 UTC](https://meta.discourse.org/t/emoji-selector-and-custom-emoji/22725/1 "2014-12-01T22:28:34Z")

</div>

This is a [Discourse 1.2 feature](https://meta.discourse.org/t/discourse-version-1-2/20859).

## Phase 1: select emoji style

In the admin, site settings, offer a choice of emoji sets

 ![](https://global.discourse-cdn.com/meta/original/3X/6/5/65dd3ed4396eb73611be72a46a8a6aa2304966ac.png) 

Choices are: **Apple/International** , **Google** , **Twitter** , **Emoji One** and **None**.

Does not need to be pretty and graphical selector, can be a drop-down with text choices for now.

## Phase 2: add per-site custom emoji

In the **admin, customize, Emoji** offer a way to add a custom emoji for your Discourse instance:

- define the new emoji word used, e.g “fired”, which will equate to `:fired:` in text.

- add the image and associate it with the emoji word, e.g. `fired.png`

- provide a basic UI for browsing, editing, and adding these custom emoji. Can be admin only for initial release.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [12월 1, 2014, 10:31오후 UTC](https://meta.discourse.org/t/emoji-selector-and-custom-emoji/22725/2 "2014-12-01T22:31:32Z")

</div>

Twitter Emoji:  
[https://github.com/twitter/twemoji](https://github.com/twitter/twemoji)

Emoji One (our current default):  
[https://github.com/Ranks/emojione](https://github.com/Ranks/emojione)

Google emoji:

> **[Google Emoji List — Emojis for Android, Gmail, ChromeOS, YouTube](https://emojipedia.org/google)**
>
> Every emoji supported by Android and other Google platforms such as ChromeOS, Meet, and Gmail. Compare Google emojis with Apple, Samsung and Windows. Update to ...

Apple emoji:  
[https://github.com/tmm1/emoji-extractor](https://github.com/tmm1/emoji-extractor)

(if anyone knows better links for Apple or Google, feel free to reply.)

---

<div class="post-metadata">

### Author: ![meglio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/meglio/32/71444_2.png) [@meglio](https://meta.discourse.org/u/meglio)
#### Post date: [12월 2, 2014, 12:06오전 UTC](https://meta.discourse.org/t/emoji-selector-and-custom-emoji/22725/3 "2014-12-02T00:06:42Z")

</div>

2 things are in the wishlist of most of our users:

1. A better emoji selector box in the message editor: with a search box and no captions (so many icons can be shown per row) and a scrollbar (currently only 5 are shown). Maybe with an additional comma-separated per-icon search terms configurable by admin.
2. A special page where users can see all emoji that are currently available on the website, their codes, and with click-and-copy possibility.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [12월 2, 2014, 12:10오전 UTC](https://meta.discourse.org/t/emoji-selector-and-custom-emoji/22725/4 "2014-12-02T00:10:39Z")

</div>

for #2 there is already

> **[Emoji.Codes — Emoji Combinations, Codes, Meanings & Daily Picks](https://emoji.codes/)**
>
> Copy thousands of emoji combinations — daily Keyword, Group, FAQ and Horoscope picks, plus trending combos from TikTok, Discord and Instagram.

So just bookmark that or put it in your FAQ or welcome message on the site.

As for #1 that’s not in scope for 1.2, unfortunately. I do agree we could improve the pop-up emoji selector more in the future though.

---

<div class="post-metadata">

### Author: ![meglio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/meglio/32/71444_2.png) [@meglio](https://meta.discourse.org/u/meglio)
#### Post date: [12월 2, 2014, 12:22오전 UTC](https://meta.discourse.org/t/emoji-selector-and-custom-emoji/22725/5 "2014-12-02T00:22:15Z")

</div>

What if we add a small button to the toolbox so that when it is clicked, the ` :` is typed automatically and a simple full list of all emoji icons is output in a scrolled area?

Users keep asking “how do I embed smiles” even with a very detailed FAQ topic about it.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [12월 2, 2014, 12:24오전 UTC](https://meta.discourse.org/t/emoji-selector-and-custom-emoji/22725/6 "2014-12-02T00:24:35Z")

</div>

They could try typing `:)` and find out…

---

<div class="post-metadata">

### Author: ![meglio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/meglio/32/71444_2.png) [@meglio](https://meta.discourse.org/u/meglio)
#### Post date: [12월 2, 2014, 12:36오전 UTC](https://meta.discourse.org/t/emoji-selector-and-custom-emoji/22725/7 "2014-12-02T00:36:52Z")

</div>

Yes, that’s what I keep telling them, but they simply do not understand that some piece of code is converted into an image - in Ukraine the computer education is falling back 😄

What’s more, the hardest part for them is to discover the way to let the popup show different set of icons. The problem is that they do not know / use English letters at all, so it’s difficult for them to guess what they should type. They’d rather pick by a mouse in a big list. But they do not understand how to do it.

Sorry not trying to be annoying… Just explaining the case in detail. It annoys me as well but I can’t tackle it even by linking them to a 3rd party website. They just want "a button to insert an image, just like they do to insert images in their posts).

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [12월 2, 2014, 1:46오전 UTC](https://meta.discourse.org/t/emoji-selector-and-custom-emoji/22725/8 "2014-12-02T01:46:41Z")

</div>

Related, I kind of want us to convert emoji unicode codes to images when you bake posts… that way when I am on my iPhone / iPad I can simply switch to the emoji keyboard and type away.

I think we should try to do this if its technically simple enough, not critical for 1.2 though

I do also agree an “emoji” toolbarry thing with much cleaner browse functionality would be awesome. Also not critical for 1.2 but very useful. Finding the right emoji now is 😵

---

<div class="post-metadata">

### Author: ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [12월 2, 2014, 2:06오전 UTC](https://meta.discourse.org/t/emoji-selector-and-custom-emoji/22725/9 "2014-12-02T02:06:54Z")

</div>

Whetever you do, please do _not_ have a pop-up containing them all. There are just way too many of them for that IMHO

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [12월 2, 2014, 2:33오후 UTC](https://meta.discourse.org/t/emoji-selector-and-custom-emoji/22725/10 "2014-12-02T14:33:52Z")

</div>

Slightly off topic - I apologize

@meglio, not sure if this will help your users, but you can use the Composer Help Window Plugin, I just finished.

> [@Composer Help Button](https://meta.discourse.org/t/composer-help-button/22748/1):
>
> I’ve now completed my work on a composer help button. [https://github.com/cpradio/composer-help-button](https://github.com/cpradio/composer-help-button) It adds a button to the composer window [image] and a setting in the Admin area: Clicking on that icon, will open a modal window with the content from the first post at the URL set in the Admin area The only caveat, is that you need to store the Topic in a publicly accessible location so ALL of your members can see it. Otherwise, they’ll get an access denied error.

That will at least add a button your users can click, and you can have the content of that window show the “common” smilies that they can copy and paste.

---

<div class="post-metadata">

### Author: ![meglio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/meglio/32/71444_2.png) [@meglio](https://meta.discourse.org/u/meglio)
#### Post date: [12월 3, 2014, 9:40오후 UTC](https://meta.discourse.org/t/emoji-selector-and-custom-emoji/22725/11 "2014-12-03T21:40:50Z")

</div>

A good example from Skype:

![](https://global.discourse-cdn.com/meta/original/3X/a/3/a365d9d19cdd30943786786c81a814ae9a61e903.png)

Adding a one-liner with buttons to switch between categories in the box would solve the problem of having too many icons. Just like here:

 ![](https://global.discourse-cdn.com/meta/original/3X/7/c/7c2a85e2e3afa42e0e770f11694096b8843117f2.png)

---

<div class="post-metadata">

### Author: ![zogstrip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zogstrip/32/512781_2.png) [@zogstrip](https://meta.discourse.org/u/zogstrip)
#### Post date: [12월 11, 2014, 4:13오후 UTC](https://meta.discourse.org/t/emoji-selector-and-custom-emoji/22725/12 "2014-12-11T16:13:13Z")

</div>

**Phase #1** is now available 🪲

[https://github.com/discourse/discourse/commit/e6e794861767721ff0ece7714c2f7564a6cc61b1](https://github.com/discourse/discourse/commit/e6e794861767721ff0ece7714c2f7564a6cc61b1)

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [12월 11, 2014, 9:03오후 UTC](https://meta.discourse.org/t/emoji-selector-and-custom-emoji/22725/13 "2014-12-11T21:03:56Z")

</div>

😘 thanks! 💝

we are now on twimoji here 🙂 at least to test it out.

---

<div class="post-metadata">

### Author: ![zogstrip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zogstrip/32/512781_2.png) [@zogstrip](https://meta.discourse.org/u/zogstrip)
#### Post date: [12월 23, 2014, 12:31오전 UTC](https://meta.discourse.org/t/emoji-selector-and-custom-emoji/22725/14 "2014-12-23T00:31:27Z")

</div>

**Phase #2** is now available :discourse: 🕶

[https://github.com/discourse/discourse/commit/45dbdb689620096d348f6a2b1d2cbb081fa4d948](https://github.com/discourse/discourse/commit/45dbdb689620096d348f6a2b1d2cbb081fa4d948)

---

<div class="post-metadata">

### Author: ![fantasticfears](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fantasticfears/32/119608_2.png) [@fantasticfears](https://meta.discourse.org/u/fantasticfears)
#### Post date: [12월 23, 2014, 3:51오전 UTC](https://meta.discourse.org/t/emoji-selector-and-custom-emoji/22725/17 "2014-12-23T03:51:37Z")

</div>

➡ 🆒  
👍 @zogstrip 🎢

Added a howto:

> [@Configure custom emoji](https://meta.discourse.org/t/configure-custom-emoji/23365):
>
> bookmark This guide explains how to customize emojis on your Discourse site through selectable emoji sets, uploading new emoji, configuring site settings, and adjusting emoji sizes. person_raising_hand Required user level: Administrator Selecting an emoji set Discourse currently supports five emoji sets: Fluent UI Noto OpenMoji Twemoji Standard (Unicode) For an overview on how the different sets look, you can take a look at [this emoji set comparison](https://www.supermathie.net/~michael/emoji.html). You can configure the emoji\_set s…

---

<div class="post-metadata">

### Author: ![fantasticfears](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fantasticfears/32/119608_2.png) [@fantasticfears](https://meta.discourse.org/u/fantasticfears)
#### Post date: [12월 25, 2014, 3:01오전 UTC](https://meta.discourse.org/t/emoji-selector-and-custom-emoji/22725/18 "2014-12-25T03:01:54Z")

</div>

Could emojis show their original size, instead of the standard size? Just like photo collection. I also got complaints about its not showing two custom emojis.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [12월 25, 2014, 3:10오전 UTC](https://meta.discourse.org/t/emoji-selector-and-custom-emoji/22725/19 "2014-12-25T03:10:39Z")

</div>

What do you mean? Emojis are all consistent sizes.

---

<div class="post-metadata">

### Author: ![Chili](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chili/32/40331_2.png) [@Chili](https://meta.discourse.org/u/Chili)
#### Post date: [12월 25, 2014, 9:12오전 UTC](https://meta.discourse.org/t/emoji-selector-and-custom-emoji/22725/20 "2014-12-25T09:12:28Z")

</div>

When you use a custom emoji it will scale the image down to the standard size which makes slightly larger ones look odd.

---

<div class="post-metadata">

### Author: ![fantasticfears](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fantasticfears/32/119608_2.png) [@fantasticfears](https://meta.discourse.org/u/fantasticfears)
#### Post date: [12월 25, 2014, 10:09오전 UTC](https://meta.discourse.org/t/emoji-selector-and-custom-emoji/22725/21 "2014-12-25T10:09:58Z")

</div>

I get it. I think he is asking for sticker or emotion support. The idea is different from emojis. But it seems logic to put them altogether?

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [12월 25, 2014, 7:13오후 UTC](https://meta.discourse.org/t/emoji-selector-and-custom-emoji/22725/22 "2014-12-25T19:13:50Z")

</div>

Not sure how to do this using the custom emoticons but I solved it with my plugin using the following css style

[https://github.com/cpradio/vb\_emoji/blob/master/assets/stylesheets/vb-emoji.css](https://github.com/cpradio/vb_emoji/blob/master/assets/stylesheets/vb-emoji.css)

Granted all of my emoticons have a ‘vb’ prefix, if custom emoticons have a prefix too then this should work

[다음 페이지](https://meta.discourse.org/t/emoji-selector-and-custom-emoji/22725.md?page=2)
