Add Icons to React, Angular or Vue Apps in 3 Steps

A beginner's guide to using SVG icons as fonts

There are a lot of use cases wherein we need to control the styling of icons and images based on user behavior. These use-cases come into picture when the user interacts with the icons/images as hovering over it or clicking it.

We can achieve the desired results by using the SVG of the icon and manipulating the fillproperty of the SVG image. To be honest, that is too much work. It also reduces the readability of the code.

What can we achieve with it?

Impeccable user experience is one of the most important and deciding factor for user retention. A product’s success is not only gauged from the number of new users/visitors, but also from repeated/recurring users.

Therefore, practicing this method of importing icons as fonts will help you improve user experience. It is also easy for developers to work with icons/images as fonts in comparison with different images of different formats.

Once you have icons as fonts, you treat them as one. You are now equipped with all CSS properties of fonts and can now apply to them. Some of them are:

  1. Changing font-size (alters the size of the icon/image)
  2. Changing color
  3. Changing background-color


I’ll be using the following repo: Scalable Angular Folder Structure for demo. Clone it and follow along.

I’ll be adding icons from one of the most famous sources — Flaticon as fonts in the angular app.

Step 1: Download the icons

Download the desired icons from Flaticon. I’ll be downloading social media icons in .svg format.

  • Facebook
  • Instagram
  • LinkedIn
  • Twitter
  • YouTube
Social media icons in SVG format
Social media icons in SVG format

Step 2: Converting icons to fonts

For this, we’ll be using the services of Icomoon. This tool helps to not only convert the icons (svg) to fonts, but also helps to keep related icons in a group (or set as they call it). That is a pretty neat feature. We can also create an account and manage all our icons project-wise. To be honest, all this and that too in a free tool — IMPRESSIVE!

Start by visiting the Icomoon app.

Start with the icomoon app

ImImport SVG icons using the Import Icons button and it will create a list of all your icons in an Untitled Set.

Import Icons in Icomoon
Import Icons in Icomoon

Then, select all the icons by clicking on them.

Select icons
Selected icons will have a yellow border

Click on the Generate Font button in the bottom-right corner. This will generate fonts for your SVG icons and will give an option to download the fonts. The download option will come in the bottom-right corner.

Generate font and download

Step 3: Importing generated fonts in your app

After downloading the fonts, you’ll have a zipped file. Extract it and you’ll see a bunch of files and folders like below:

Icomoon fonts files

Moving to our application in the assets folder, create an icon folder. Put all the files from the fonts folder which you get from the Icomoon.

Adding font files to app's assets folder
Adding font files to app’s assets folder

Next, we create a folder scss, again inside the assets folder. We’ll add another nested folder inside scss folder — modules. There we’ll make a file _icon.scss

Creating stylesheet using the fonts
Creating stylesheet using the fonts

Next, copy all the contents from Icomoon generated style.css and paste it in the _icon.scss file.

Make sure you have the correct path while importing the fonts. I have also added a comment in the _icons.scss file so that you do not miss it.

– Aditya Tyagi

Now, you have all the icons as classes now.

  • Facebook — icon-facebook-logo
  • Instagram — icon-instagram-logo
  • LinkedIn — icon-linkedin-logo
  • Twitter — icon-twitter
  • YouTube — icon-youtube

Next, we import the _icons.scss file in our main stylesheet — style.scss

Step 4: Fire up the engine!

I have tried to use the fonts on the landing page and modified some CSS properties like color, font-size, and backgrounds of the icons. I have also added styling to the facebook icon when you hover over it. Check it out here.

Icons as fonts

Code for Landing Page – HTML

Code for Landing Page – SCSS

Step 5: Enjoy!

Okay, bye!

Thank you for your time. I hope I could bring value.

I’m reachable on some social media channels, so consider checking me on:

  • Twitter especially if you’re into programming and software development.
  • LinkedIn if you want to get in touch for some collaboration opportunity.

2 comments / Add your comment below

  1. hey, nice article, I didn’t know about iconmoon or svg to font thing. What I use to do is mask the svg image using background color but yes it has some compatibility issue but if our target audience is safari and chrome then it is quite handy.

Leave a Reply

Your email address will not be published. Required fields are marked *