[Solved] Why do you use custom font icons? [closed]

Question

There are a few primary reasons to use a custom icon font over SVGs:

An icon font lets you resize the icons simply by setting the font-size. An SVG is set with the width/height.
An icon font is easier to colorize with the color property.
- It is possible to color an SVG with CSS as well, but you generally have to embed the SVG code into your HTML (as opposed to just including it as an <img>.
The possibly biggest reason is it combines a bunch of different images into one file, which can allow for faster loading.
- This reason is becoming less important as HTTP/2, which handles concurrent requests much better, becomes more available, but it can still be helpful.
- This technique is similar to CSS spritesheets, which is another technique for combining multiple images into a single file (though generally not SVG).

Overall, font icons aren’t the end all, be all. They are just one more tool in your toolbox. I’ve used them quite successfully in the past for websites with lots of icons that have to be color-coded for certain aspects. For that, they’re great.

Other use cases may benefit more from individual SVGs, or even sprite sheets instead of SVGs. You really need to look at your site and it’s needs as a whole to determine what is the best.

Accepted Answer

There are a few primary reasons to use a custom icon font over SVGs:

An icon font lets you resize the icons simply by setting the font-size. An SVG is set with the width/height.
An icon font is easier to colorize with the color property.
- It is possible to color an SVG with CSS as well, but you generally have to embed the SVG code into your HTML (as opposed to just including it as an <img>.
The possibly biggest reason is it combines a bunch of different images into one file, which can allow for faster loading.
- This reason is becoming less important as HTTP/2, which handles concurrent requests much better, becomes more available, but it can still be helpful.
- This technique is similar to CSS spritesheets, which is another technique for combining multiple images into a single file (though generally not SVG).

Overall, font icons aren’t the end all, be all. They are just one more tool in your toolbox. I’ve used them quite successfully in the past for websites with lots of icons that have to be color-coded for certain aspects. For that, they’re great.

Other use cases may benefit more from individual SVGs, or even sprite sheets instead of SVGs. You really need to look at your site and it’s needs as a whole to determine what is the best.