# Emoji mention theme component
**URL:** https://meta.discourse.org/t/emoji-mention-theme-component/90125
**Category:** Theme component
**Created:** [June 18, 2018, 2:48pm UTC](https://meta.discourse.org/t/emoji-mention-theme-component/90125 "2018-06-18T14:48:29Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [June 18, 2018, 2:48pm UTC](https://meta.discourse.org/t/emoji-mention-theme-component/90125/1 "2018-06-18T14:48:29Z")
This is a simple component that will automatically add an emoji (or other text, if you’d like) to a `@mention` in a post
[Github repo](https://github.com/awesomerobot/discourse-emoji-mention): `https://github.com/awesomerobot/discourse-emoji-mention`
[Installing a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682)
## How to
To configure it, add items to the list in the format of `@username, emoji` (You can copy and paste emoji from [https://getemoji.com/](https://getemoji.com/) or [https://emojipedia.org/](https://emojipedia.org/))
There’s also an option to show the emoji after the mention, instead of before.
That’s all it does!
---
### Author:  [@barreeeiroo](https://meta.discourse.org/u/barreeeiroo)
#### Post date: [July 26, 2018, 8:43pm UTC](https://meta.discourse.org/t/emoji-mention-theme-component/90125/2 "2018-07-26T20:43:55Z")
Would be possible to use this with custom emojis?
As we provide support from our community, it would be nice to add our logo before mentioning one of the staff
---
### Author:  [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [July 26, 2018, 9:36pm UTC](https://meta.discourse.org/t/emoji-mention-theme-component/90125/3 "2018-07-26T21:36:29Z")
> [@barreeeiroo](#):
>
> Would be possible to use this with custom emojis?
Not using the current structure because the setting uses unicode for emojis.
---
### Author:  [@barreeeiroo](https://meta.discourse.org/u/barreeeiroo)
#### Post date: [July 26, 2018, 9:43pm UTC](https://meta.discourse.org/t/emoji-mention-theme-component/90125/4 "2018-07-26T21:43:13Z")
Mmm, and maybe it could be changed? 😅
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [July 27, 2018, 3:09am UTC](https://meta.discourse.org/t/emoji-mention-theme-component/90125/5 "2018-07-27T03:09:50Z")
This component is kind of a super basic template on finding content in a post and appending something to it. There’s probably a way to grab existing emojis, but I don’t know it off the top of my head.
What would work is replacing the header.html file in the component with this, which would just append an image after a mention instead (that image could be a little logo).
```JS
```
Using a setting like this
---
### Author:  [@jimkleiber](https://meta.discourse.org/u/jimkleiber)
#### Post date: [January 6, 2022, 12:32am UTC](https://meta.discourse.org/t/emoji-mention-theme-component/90125/6 "2022-01-06T00:32:32Z")
I really like this concept!
Two things that come to mind, not sure if currently possible but what I’d love to have:
1. The ability to use this for group mentions? I just tried it for my admins group but didn’t seem to work.
2. The ability for the user to choose their own emoji in their preferences and then it would show every time they’re mentioned. Maybe it could even be a perk to give to more engaged users at higher trust levels.
Edit:
> 1. The ability to use this for group mentions? I just tried it for my admins group but didn’t seem to work.
I figured out how to do this but don’t know how to do a PR request so for now, I’ll just post the code below:
**`common.scss`** adds `.mention-group:after` and `.mention-group:before`
```plaintext
@if $show-after-mention == "true" {
.mention:after,
.mention-group:after {
content: attr(data-emoji);
display: inline;
}
} @else {
.mention:before,
.mention-group:after {
content: attr(data-emoji);
display: inline;
}
}
```
**`header.html`** adds this to the end:
```plaintext
$.each(emoji, function(key, value) {
api.decorateCooked($elem =>
$elem
.find("a.mention-group:contains(" + key + ")")
.attr("data-emoji", value)
.addClass("with-emoji")
);
});
```
---
### Author:  [@jimkleiber](https://meta.discourse.org/u/jimkleiber)
#### Post date: [January 6, 2022, 7:06pm UTC](https://meta.discourse.org/t/emoji-mention-theme-component/90125/7 "2022-01-06T19:06:58Z")
I wanted the ability to also use custom SVGs as the icon next to a mention, something that I’ve seen on Guilded for the staff and something I wanted to have there but couldn’t have—yet another reason why I’m liking Discourse so much is that I can actually hack together something that may work instead of hoping and waiting the devs will add it.
So I hacked together the following solution. It’s not foolproof by any means, probably requires the SVG you upload to have a SCSS variable that starts with `svg` and yet it seems to work enough for me now 🙂
If someone wants to take this code and run with it, incorporate it to make it fancier, I’d be grateful!
Possible things to improve
1. Make it work for all SVG icons, meaning all the Discourse ones and all that are uploaded by don’t start with `svg`.
2. Clean up the code.
3. Improve the styling, as I’ve kinda hacked together the CSS to work and may not work in all situations.
Regardless, here’s an example of a mention with me using the custom icon I have for Emotional Self-Defense as the staff mention icon:
Here’s the code I added:
**`header.html`**
```plaintext
// Add SVG icons as an option, as long as they're included in assets and uploaded
// Creates an object of all the assets and iterates to find which links have the data-emoji
// attribute equaling the asset variable name then adds the URL for it
// convert object to key's array
const keys = Object.keys(settings.theme_uploads);
// print all keys
console.log(keys);
// iterate over object
keys.forEach((key, index) => {
console.log(`${key}: ${settings.theme_uploads[key]}`);
api.decorateCooked($elem => {
var url = settings.theme_uploads[key];
console.log("key: " + key);
console.log("index: " + index);
console.log("url: " + url);
console.log(JSON.stringify(settings.theme_uploads));
$elem
.find("a[data-emoji^='" + key + "']")
.css("--svg-icon", "url('" + url + "')");
}
);
});
```
**`common.scss`**
```plaintext
@if $show-after-mention == "true" {
[data-emoji^="svg"]:after {
content: 'hey ';
color: transparent;
height:5px;
width:15px;
background: var(--svg-icon) no-repeat center;
background-size: contain;
display: inline;
}
} @else {
[data-emoji^="svg"]:before {
content: 'hey ';
color: transparent;
height:5px;
width:15px;
background: var(--svg-icon) no-repeat center;
background-size: contain;
display: inline;
}
}
```
This also requires you to:
1. Create an `/assets` folder
2. Add `svg` files in the `/assets` folder, like `/assets/esd-heart.svg`
3. Update the `about.json` file to link to those assets with something like:
```plaintext
"assets": {
"svg_esd_heart": "assets/esd-heart.svg"
}
```
---
### Author:  [@Jongin](https://meta.discourse.org/u/Jongin)
#### Post date: [January 7, 2024, 2:14am UTC](https://meta.discourse.org/t/emoji-mention-theme-component/90125/8 "2024-01-07T02:14:00Z")
Is there any way for the emoji to only appear for the chosen user? If you have a user with the name Taylor and TaylorLife, the emoji appears for both
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [February 5, 2026, 6:43pm UTC](https://meta.discourse.org/t/emoji-mention-theme-component/90125/9 "2026-02-05T18:43:38Z")
Looks like this is an official theme component 🎉
The Github link redirects to the Discourse repository and it’s listed in official.txt in the all-the-themes repo. Would it be possible to update the links in the OP? Then the update\_from\_meta script in that repo would be able to match the component as being official and wouldn’t try to add it to the third-party file. It was removed from third-party.txt in December after it was added by accident in a prior update. Changing the URL of the repository could prevent that from happening again.
In addition, the #official tag and a first post with the typical elements of an official component would be nice.