litomore.me

LitoMore's Mind

Why Icons in Terminal Are Always Terrible

Tags = [ Font, Icons, Simple Icons, Terminal ]

Have you tried any terminal theme like Powerlevel10k? Or some funny prompts like Starship? Or some fonts like Nerd Font in terminals? If you have experienced them, you may find that no matter which one of them, the icon font display experience is more or less unsatisfactory.

What's the problem with icon font?

Let's simulate what would happen if the icon was displayed in the terminal (case 1):

icon-cloudflare icon-github icon-go

And even worse (case 2):

icon-cloudflare-worse icon-github-worse icon-go-worse

Some icons look too small, don't they? Especially the Go icon.

And this might be what you expected (case 3):

icon-cloudflare-expected icon-github-expected icon-go-expected

This is because most icon fonts bound the icon entity to a squared viewbox. So why there is an "even worse"?

The answer is the character rendering of the termianl emulator. For these icon fonts, we generally call them ambiguous characters.

Some characters, such as some Greek letters and Asian logograms, can take up either one or two cells in a terminal window. These characters are often referred to as ambiguous characters. By default, these characters are displayed with a narrow width in Terminal, which looks better in situations where perfect layout is important, such as in ASCII art. You can change your profile preferences to display ambiguous characters as wide, which can be better if you are reading running prose. (from: GNOME Help - Characters look too narrow)

Some terminal emulators support justification for such characters. For example, iTerm2 has a checkbox "ambiguous characters are double-width" to adjust the rendering of the font.

What you see in case 1 is double-width, while case 2 treats your icon as a regular ASCII character.

Is it possible rendering icons like case 3?

It's possible, but not exactly. To achieve such a display effect, we need to have a correctly produced font, they are no longer bounded in a squared viewbox.

Here I have built a preview in simple-icons/simple-icons-font#211 that has fonts rendered with the same height at the same font size.

If you try the fonts I provided, you will find that almost all terminal emulators cannot render this preview font correctly. This is because since I changed the viewbox of the icons, their width became unknown, the terminal emulator cannot automatically detect the width of the font, and it only supports regular width and double-width to render this font.

So why do say it still possible? The answer is the Inline Images Protocol. It's possible to use the imgcat tool to display images within terminal. You may also need the Simple Icons CDN for colorable and customizable icons.

Here is an example:

The viewbox=auto is to change the squared viewbox to the consistent viewbox in height. And the size is for rendering size.

But note this is not a solution for rendering icons in terminal, because the imgcat -u command is making a HTTP request to the remote. It takes some time to download then render the icon. The performance is not good for terminals. I had some topics at those terminal communities, and feel free to share your thoughts with them:

Expectations for the future of terminals

I'm going to learn the relevant knowledge of the terminal and try to understand its principles and development in depth. Of course, the development of the community also requires your actively participate in discussions and feedbacks.

Maybe one day, we can use inline font icons in terminals like this: icon-cloudflare-inline icon-github-inline icon-go-inline.