# Best way to implement custom emoji

**URL:** <https://discourse.gohugo.io/t/best-way-to-implement-custom-emoji/17514>\
**Category:** support\
**Created:** [March 11, 2019, 2:41pm UTC](https://discourse.gohugo.io/t/best-way-to-implement-custom-emoji/17514 "2019-03-11T14:41:37Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![jaclyntan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jaclyntan/32/6626_2.png) [@jaclyntan](https://discourse.gohugo.io/u/jaclyntan)\
**Post date:** [March 11, 2019, 2:41pm UTC](https://discourse.gohugo.io/t/best-way-to-implement-custom-emoji/17514/1 "2019-03-11T14:41:37Z")

</div>

Hello  
What would be the best way to implement custom emojis on a site?

Ideally, I would like it to be similar to the emojify feature and write something like :haha: to display a custom emoji, in markdown.

How would one go about implementing something like this?

Thank you!

Jaclyn

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [March 11, 2019, 3:23pm UTC](https://discourse.gohugo.io/t/best-way-to-implement-custom-emoji/17514/2 "2019-03-11T15:23:00Z")

</div>

@jaclyntan

I like your timing. 😃

I have just submitted a PR over here: [Update HugoBasicExample Content by onedrawingperday · Pull Request #45 · gohugoio/hugoBasicExample · GitHub](https://github.com/gohugoio/hugoBasicExample/pull/45) that documents a technique to achieve the use of non Unicode emoji in Hugo.

The following quote is from the file over [here](https://github.com/gohugoio/hugoBasicExample/pull/45/commits/8833a20e52bc488ebef1a7a661a44be29e37e5a9#diff-aea8ed5cee7503d11d754521fb745dbe):

> If you feel restricted by Unicode Standard emoji and want to use custom emoji the [`replaceRE`](https://gohugo.io/functions/replacere/#readout) function makes it easy to perform Static Image Replacement in Hugo.
> 
> In this example we will be using emoji from the [Mutant Standard](https://mutant.tech/) set.
> 
> - Do not use `enableEmoji` in your Hugo project’s configuration
> 
> - Store the icons of the custom emoji set under `/static/`
> 
> - Use the shorthand codes provided by the custom emoji set in your content files e.g. `:orc:`
> 
> - In your templates execute the Image Replacement like so:
> 
> `{{ replaceRE “(\:([a-zA-Z0-9_]*)\:)” <img class="emoji" src="/${2}.svg" alt="${1}" title="${1}"> .Content | markdownify | safeHTML }}
> {{< /highlight >}}`
> 
> **N.B.** The above RegEx captures all alphanumerics and underscores within two colon `:` characters (amend it according to your custom emoji set’s specification).

---

<div class="post-metadata">

**Author:** ![jaclyntan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jaclyntan/32/6626_2.png) [@jaclyntan](https://discourse.gohugo.io/u/jaclyntan)\
**Post date:** [March 11, 2019, 3:55pm UTC](https://discourse.gohugo.io/t/best-way-to-implement-custom-emoji/17514/3 "2019-03-11T15:55:11Z")

</div>

That sounds perfect, I’ll definitely check it out. Thank you so much!!! \<3

---

<div class="post-metadata">

**Author:** ![alcarazr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/alcarazr/32/11576_2.png) [@alcarazr](https://discourse.gohugo.io/u/alcarazr)\
**Post date:** [December 27, 2020, 12:34pm UTC](https://discourse.gohugo.io/t/best-way-to-implement-custom-emoji/17514/4 "2020-12-27T12:34:59Z")

</div>

Hi there, sorry to reopen this after so long. I just started to use [Twemoji](https://twemoji.twitter.com) in [my website](https://rodrigoalcarazdelaosa.me/en/) thanks to [`hugo-mod-twemoji`](https://github.com/jakejarvis/hugo-mod-twemoji). [I’m looking for a way](https://discourse.gohugo.io/t/looking-for-feedback-on-a-hugo-module-for-twemojis/24625/6) to include custom SVGs in a simple way and found this, which would be great since the custom SVGs could be included just using some escape characters before and after the name of the icon (filename).

I’m wondering if the `replaceRE` function can be used in a shortcode. In my website I’m using [Wowchemy](https://wowchemy.com), which implements [this shortcode](https://github.com/wowchemy/wowchemy-hugo-modules/blob/master/wowchemy/layouts/shortcodes/icon.html) to include icons. It’d be great if I could use the technique documented here to easily include custom SVGs.

Could you share an example of using this so it can detect custom codes and replace them with SVGs? Ideally normal emojis should still be able to work, so perhaps the escape characters could be different (not `:`).

Thank you very much in advance,

Rodrigo

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [December 27, 2020, 1:04pm UTC](https://discourse.gohugo.io/t/best-way-to-implement-custom-emoji/17514/5 "2020-12-27T13:04:30Z")

</div>

> [@alcarazr](#):
>
> Could you share an example of using this so it can detect custom codes and replace them with SVGs?

The example is in the above linked GitHub Pull Request.

> [@alcarazr](#):
>
> In my website I’m using [Wowchemy](https://wowchemy.com), which implements [this shortcode](https://github.com/wowchemy/wowchemy-hugo-modules/blob/master/wowchemy/layouts/shortcodes/icon.html) to include icons.

I am afraid that I do not have the time to look into the Wowchemy theme.

> [@alcarazr](#):
>
> Hi there, sorry to reopen this after so long.

Last but not least, we discourage bumping old topics because people who participated in these discussions some time ago, may not be around or may have moved on.

In my case I am still around in this forum, but emoji is really low in my priorities at the moment.

Thanks for the understanding.

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [December 27, 2020, 1:04pm UTC](https://discourse.gohugo.io/t/best-way-to-implement-custom-emoji/17514/6 "2020-12-27T13:04:34Z")

</div>