Which Icons Fit Into Text Well?

In short:

• Small-sized icons are not optimized for text, so choose them carefully
• For 14 pixel-sized text use FontAwesome
• For 24 pixel-sized text use Material
• For 16 pixel-sized text use our 1em set

Story Behind That

Regarding icons fonts, icon size usually adjusts to the size of the text in which it was inserted. So, text size becomes a decisive parameter. Take Bootstrap3, for example. Its base text size is 14px, so any icon inserted in this text icon will be scaled to 14px. And here lies the problem: not all icons are optimized for such small sizes. They look distorted, and often unrecognizable.

Let’s consider some of the most popular icon fonts below.

Glyphicons

Bootstrap3 is the most popular css framework. And it’s base text size is 14px. This means that icons should also correlate with this size.

However, Bootstrap3 uses Glyphicons, which, for some unknown reason, are optimized for 24px.

On top of that, Glyphicons is a standalone product with a separate license, which sometimes may complicate things a bit.

FontAwesome

FontAwesome icons are 14px, yet many of them don’t look that good in small sizes:

Bootstrap 4

In Bootstrap 4, the newer version of Bootstrap3, base text size is 16px.

Now we need 16px icon font. Where could we have it? We’ll talk about it later.

Material

Icons in material design are optimized for 24px. Even though the text size is 14 px.

Perhaps it’s because of Google’s desire to target Android Developers. But who knows.

Foundation

A bit less popular framework, Foundation, uses the very odd 14.4px size for icons. However, the icon’s placeholder or is still 16px.

Foundation icons are oriented for 16px text, yet the vectors themselves are not quite optimized: there are still small details that are not recognizable.

Missing Piece

So, as web developers, we need more good icon fonts, that are optimized for 16px text size. Or… Could we have at least one? Well, there is one.