In earlier days, frontend developers used raster files such as PNGs or JPGs when they needed to add an icon to a page. However, because of responsive web development, different mobile screen sizes, and retina display nowadays, it's hard to predict the screen size and as a result, the raster files appear pixelated. To prevent this issue, developers have to create multiple images to cater to different screen sizes, which has created a performance issue.
Luckily, using iconic fonts we can prevent many of the issues just mentioned, and it's much easier to use. Iconic fonts are just fonts that contain symbols and glyphs, and the developer can style them the same as regular text using CSS.
As well as this, using iconic fonts offers many benefits to us over raster files, and I have listed some of them here: