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.

Which Icons Fit Into Text Well? | picture
However, Bootstrap3 uses Glyphicons, which, for some unknown reason, are optimized for 24px.
Which Icons Fit Into Text Well? | picture

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:

 

Which Icons Fit Into Text Well? | picture

Bootstrap 4

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

Which Icons Fit Into Text Well? | picture

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.

Which Icons Fit Into Text Well? | picture

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.

Which Icons Fit Into Text Well? | picture

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

Which Icons Fit Into Text Well? | picture

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.




Try tools for creators by the Icons8 team:

Icons8

Icons8, a library of about 130K+ icons and clip art images

Offline app icons8

Offline app and plugins to drag’n’drop icons and clip art to any design tools

Moose

Moose, the big collection of high-quality stock photos

illustrations

Ouch! , a library of vector illustrations and collages

Background Remover

Background Remover, AI-based online tool for removing background from any photo

Mega Creator

Mega Creator, online tool for creating visual content from pre-made elements

Fugue

Fugue, royalty free music for videos of any kind

Lunacy

Lunacy, free graphic design software with built-in design resources

Smart Upscaler

Smart Upscaler, image upscaler to enlarge and enhance images using AI

Generated Photos

Generated Photos, unique, worry-free model photos generated by AI

Also, get the lists of free vector software and free photo editing software.
pinterest linkedin VK reddit