What are the icon fonts, how do they work, how a font can be an image?

“Icon Fonts”, the name itself describes what it is. Fonts which look like icons or you can say icon images, which have been converted to fonts. But are they really fonts or images? If they are fonts, then how do they look like images? How can we resize them without losing the quality? What are they exactly and how do they work? These are few very common questions about icon fonts and today I will try to omit those confusions from your mind.

So, let start with the most common question, “What”. Icon fonts are really fonts, not images. Actually they are made by vector graphics which is sort of an algorithm. Normal images deal with “dots” or pixels. But vector graphics deal with shapes. To be very specific, icon fonts uses Scalable Vector Graphics or SVG which iimage-vs-svg images nothing but a markup language. It is just like an XML file which can be created and edited by using any text editor.

Now if you ask, “How” the icon fonts appears in the browser, this answer is also SVG. Yes! It has been possible to implement icons as fonts, via SVG only. Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics that has support for interactivity and animation. SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted, and, if need be, compressed. The CSS of icon fonts are just making vector images as it is defined in that particular .svg file, and this operation is done exactly how the browsers read the normal HTML or XML files and put the pixels accordingly in your screen. Though the SVG primarily focuses on vector graphics markup language, but its design includes the basic capabilities of a page description language (PDL), like Adobe’s PDF. It contains provisions for rich graphics. SVG is an ideal PDL for print-oriented uses, as it contains all the functionality required to place each glyph and image in a chosen location on the final page.

It’s hard to create SVG icons using text editors, so you can use inkscape or similar drawing programs.

To learn how to implement the icon-fonts in your web page please read the Tutorial.

About This Author

Hello! I am Paul Shan, a JavaScript Expert, Full Stack and DevOps Engineer cum Consultant based out of Bengaluru, India.