# Help creating icons/emojis **URL:** \ **Category:** Help\ **Created:** [July 10, 2021, 7:57pm UTC](https://talk.jekyllrb.com/t/help-creating-icons-emojis/6227 "2021-07-10T19:57:30Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![Pechu317](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/pechu317/32/3352_2.png) [@Pechu317](https://talk.jekyllrb.com/u/Pechu317)\ **Post date:** [July 10, 2021, 7:57pm UTC](https://talk.jekyllrb.com/t/help-creating-icons-emojis/6227/1 "2021-07-10T19:57:30Z")
I want to be able to use custom emoji in my Jekyll site without having to always write `![icon](/path/to/icon.png)`. Is there a way I could set some placeholders for my icons (e.g. `{{ icons.smiley }}`)? ---
**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\ **Post date:** [July 10, 2021, 8:08pm UTC](https://talk.jekyllrb.com/t/help-creating-icons-emojis/6227/2 "2021-07-10T20:08:04Z")
Emojis are unicode characters that can be used in code. No need to escape them or insert as images. ```auto

hello 🌍

``` ```auto **hello 🌍** ``` ```auto console.log("hello 🌍") ``` ---
**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\ **Post date:** [July 10, 2021, 8:13pm UTC](https://talk.jekyllrb.com/t/help-creating-icons-emojis/6227/3 "2021-07-10T20:13:03Z")
If you still need to insert icons from your assets, I’d recommend an include file. Typically HTML for more control but you can rename as .md if you need. Also what’s nice about HTML is it won’t automatically convert text to a p tag (which means an awkward line break) > **[Includes](https://jekyllrb.com/docs/includes/)** > > The include tag allows you to include the content from another file stored in the \_includes folder: `_includes/icon.html` ```auto {%- capture path -%} {{ site.baseurl }}/assets/icons/{{ include.name }}.png {%- endcapture -%} Icon ``` Note use of link tag to tell you at build time if a path is broken. Then use as ```auto Hello {% include icon.html name="world" %} ``` ---
**Author:** ![chuckhoupt](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/chuckhoupt/32/523_2.png) [@chuckhoupt](https://talk.jekyllrb.com/u/chuckhoupt)\ **Post date:** [July 10, 2021, 8:13pm UTC](https://talk.jekyllrb.com/t/help-creating-icons-emojis/6227/4 "2021-07-10T20:13:54Z")
You could use a Liquid include, something like: ```auto {% include icon.html name="smiley" %} ``` ---
**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\ **Post date:** [July 10, 2021, 8:15pm UTC](https://talk.jekyllrb.com/t/help-creating-icons-emojis/6227/5 "2021-07-10T20:15:13Z")
I do something similar here with logo.html and referencing items in logos directory. Except I am using SVG and also I am actually embedding the finished SVG into the HTML and not load loading by URL. So it less jarring than seeing icons load one at a time > ---
**Author:** ![mmistakes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/mmistakes/32/2169_2.png) [@mmistakes](https://talk.jekyllrb.com/u/mmistakes)\ **Post date:** [July 11, 2021, 3:54am UTC](https://talk.jekyllrb.com/t/help-creating-icons-emojis/6227/6 "2021-07-11T03:54:23Z")
There is a plug-in you can install. It even supports custom emoji images. I believe it’s officially supported by GitHub Pages which is a plus if you host there. > **[jekyll/jemoji](https://github.com/jekyll/jemoji)** > > GitHub-flavored emoji plugin for Jekyll. Contribute to jekyll/jemoji development by creating an account on GitHub. ---
**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\ **Post date:** [July 11, 2021, 8:39am UTC](https://talk.jekyllrb.com/t/help-creating-icons-emojis/6227/7 "2021-07-11T08:39:43Z")
I believe that plugin is specifically to support text to emoji conversion ```auto :smiley: ``` Becomes 😀 * * * But as mentioned before, you can also just insert the emoji directly into the text. using your system’s on screen keyboard. Mac has ctrl + cmd + spacebar to bring up the emoji keyboard. And I like a VS Code extension which does something similar letting you search for am emoji and insert either the plain text or unicode version. And it shows a visual preview of your plain text emojis on the page. > ---
**Author:** ![mmistakes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/mmistakes/32/2169_2.png) [@mmistakes](https://talk.jekyllrb.com/u/mmistakes)\ **Post date:** [July 11, 2021, 1:05pm UTC](https://talk.jekyllrb.com/t/help-creating-icons-emojis/6227/8 "2021-07-11T13:05:18Z")
I think OP was asking how to insert “custom” emoji using placeholders. If using the system emoji picker those can’t be customized… Using the plugin provides a simple way of inserting them using text placeholders. The images that are replaced can be customized and you can even add your own placeholders. Or Jekyll includes could be used as already suggested. ---
**Author:** ![Pechu317](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/pechu317/32/3352_2.png) [@Pechu317](https://talk.jekyllrb.com/u/Pechu317)\ **Post date:** [July 18, 2021, 4:40pm UTC](https://talk.jekyllrb.com/t/help-creating-icons-emojis/6227/9 "2021-07-18T16:40:45Z")
No, jemoji supports custom emojis. I ended up using jemoji, but thanks for all of the help!