Icon fonts vs. svg icons
We can all agree that using png sprites for icons is not the most modern (or best) way to present icons on the web. Png is a rasterized format which means that if you try to make the image (or icon) larger, the quality will become worse. When browsers started properly supporting @font-face and svg some people chose to use icon fonts to serve their icons, others chose svg sprites to do this. These methods share the big benefit of scalability. This matters because our websites get viewed on many devices and you want your icons to be crisp on every device, not just the ones you optimized for by hand. This post is intended to give an overview of these two methods and to explore the benefits and drawbacks of each method. At the end of this post you will hopefully have an understanding of both svg icons and iconfonts and you’ll be able to choose one of these icon delivery methods for your own projects.
TL;DR: The comparison is very close, both have their big upsides and no real big downsides. I’d say iconfonts win because they’re a bit easier to use. Svg icons are a easier to position and manipulate. The code for this blogpost is on Github.
Reply
You must be logged in to post a comment.