How to display icons in React
By: Ariana Milasincic
Tags: Reactjs, JavaScript, Programming, Javascript Tips, React

While learning React.js I have asked myself multiple times what is the best practice of displaying icons on my website?

If you are a web developer you know that the icons are integral part of UI design. We use them almost everywhere, from the social media icons to the hamburger menu. It is not so strange to ask yourself which set of icons to use.

Before, we just used images for icons but soon came to realize that using images creates poor performance in terms of resolution and had poor scalability. Image formats like JPEG and PNG had the dramatic loss in rendered quality when they were scaled (up or down). Also, what I think is the biggest drawback is that if the website used multiple images for icons, each of them would trigger a new HTTP request — which seriously downgraded performance.

Now, we usually go for either Icon Fonts or SVG Icons (my preference).

Icon Fonts

When they first came around in 2012, everybody was thrilled. Icons fonts could scale up to any resolution without loss of visual quality. They are really easy to use because they are just that — fonts on which you can apply any CSS styling rule and easily change the size, color, animations or transitions. Really good free icon fonts are the ones from: Font Awesome (right now they are coming out with v6!), Material Design Icons, etc. The downside to using the icon fonts is that they can lead to the generation of multiple server requests, but the more frustrating one is that it can also lead to invisible text flashing during the period when to font libraries are still loading. Also, if for whatever reason browser doesn’t comprehend the icon font, instead of the icon, there will be a blank space.

So, why SVG?

SVG stands for Scalable Vector Graphics, and SVG icons system has showed to have high rendering quality, better performance and great customization. Instead of image or font, SVG is a block of XML code directly served to a browser. When having a SVG you can animate or color each individual bit of and SVG icon, unlike icon font where you edit/animate the whole icon. The positive thing of using SVG is that it is just a block of code, their size is much lower than the image (JPEG,PNG). In the case of of SVG vs. image you should always use SVGs if you can, but in comparison to icon fonts — icon font usually wins. But, the difference is not that notable and can be ignored. And if anybody is concerned about the browser support, SVGs are covering 99%+ user base as they are supported for IE9+ and Android 2.3+.

SVG in React

My go to with displaying icons in React is by using react-icons package. With this package you can include any icon from their library that they support, and if you take a look, they support a lot of them! Some the Icon libraries are: Font Awesome, Material Design, Ionicons, Feather, etc. Just search on their website what icon you need and choose from one of them.

For example, I want to display a Facebook icon in my React app. I type Facebook in their search bar and press Enter. These are the results I get:

Let’s say I like the first one. I press on it and the name of the icon copies itself — AiFillFacebook. The first two letters tell me from where should I import them. Ours is “ai”, so our React app should look like this:

And if you would like to change the sizing and color, it would look something like this:

That is just my preference, what is yours?