Icons
You can specify any HTML for an icon. It’s a popular choice to use Unicode icons because they are extremely fast to load and there are a lot of them, but OliveTin also support Iconify, and simple PNG, JPG, WEBP and similar images.

For a quick reference, here are some examples of how to use different types of icons in OliveTin;
config.yaml
actions:
- title: Unicode (emoji) alias icon
shell: echo "Hello!"
icon: smile
- title: Unicode (emoji) icon
shell: echo "Hello!"
icon: "😎"
- title: Iconify Icon
icon: <iconify-icon icon="ant-design:bug-filled"></iconify-icon>
- title: HTML Image (jpg/png/gif/etc) icon
shell: echo "Hello!"
icon: '<img src = "custom-webui/icons/mrgreen.gif" style = "width: 1em;" />'
Iconify Icons
Browse over 200,000 icons that can be used with OliveTin here; https://icon-sets.iconify.design/
Note, the icons are loaded from the internet, but should be cached by your browser afer the first load.
On the Iconfiy website, you should select Iconify Icon

Then copy this icon code, and place it in your config;
config.yaml
actions:
- title: Iconify Icon
icon: <iconify-icon icon="ant-design:bug-filled"></iconify-icon>
And you should get something that looks like this;

Unicode icons ("emoji")
Using simple emoji (unicode) icons from your browser’s font is extremely fast, and can look good on some platforms. However, the icons are platform specific, which mean’s they’ll look different between browsers and between operating systems.
There are great sites like symbl.cc - a list of "Emoji" in unicode.
For example, if you find "Smiling face with sunglasses" you can click on it to see it’s "HTML-code". In OliveTin, you’d setup the icon like this;
actions:
- title: Unicode (emoji) icon
icon: "😎"
shell: echo "You are awesome"
Full HTML icons (<img src …
)
You can also specify the full HTML for an image, like;
actions:
- title: HTML (jpg/png/etc) icon
icon: '<img src = "https://www.docker.com/sites/default/files/d8/2019-07/vertical-logo-monochromatic.png" width = "48px"/>'
shell: docker ps
Saving and serving icons for "offline" use
Sometimes you might want to store images to use as icons, with your installation of OliveTin. This can be useful when your installation is meant to be offline, or disconnected from the internet. This is easily done.
OliveTin will try to create a directory called custom-webui
in the same directory as the config.yaml
file. If this directory exists, OliveTin will serve files from this directory as if they were in the standard webui directory, in the same path as your OliveTin web UI.
Ideally, put your icons in a directory like <your-config-dir>/custom-webui/icons/
. If this directory contained a file called "mrgreen.gif", then it would be served at http://myserver:1337/custom-webui/icons/mrgreen.gif
. Below is a picture of Mr Green. Feel free to save his likeness and awesomeness for yourself, for future awesome offline usage.

In your OliveTin config, customize your command again using HTML, like this;
actions:
- title: Mr Green
icon: '<img src = "custom-webui/icons/mrgreen.gif" />'
shell: echo "I don't like the word 'emoji' "
This will result in a locally hosted icon that will work offline, that looks like this;
