How to Use SVG Icons like FontAwesome

Almost web application contains some type of icons for user interactions. Many of them use .png images which takes some time to load, and others are using sprite image generated by some tools which takes less time compared to .png images but still takes.

Another major con of images is that you can not use same image for different color means some time you need to change color of icon when hover mouse on button/icon, you need to use two different icons for that.

SVG(Scalable Vector Graphics) is one of the best feature of HTML5 using which we can define vector-based graphics for the Web. There are various SVG Fonts are available that we can use. Following are 2 most conmanly used

I personally preferred FontAwesome just because of its  Open source and it also updates frequently. To use those fontanic icons you just need to use CDN for this fonts or download and place it under your website’s directory.

 <link href="" rel="stylesheet" crossorigin="anonymous" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" > 

After adding this CDN to your page you need to use predefined classes of FontAwesome. For example of you want to use Copy, Heart, Dropbox icons then use it like below.

<i class="fa fa-copy"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-dropbox"></i>


Where fa is prefix for all of FontAwesome class, Here <i> tag was however you can use any other tags too but <i> tag was suggested. FontAwesome also provides some classes for changing font size like fa-2x. For example

<i class="fa fa-pencil"></i>
<i class="fa fa-2x fa-pencil"></i>
<i class="fa fa-3x fa-pencil"></i>
<i class="fa fa-4x fa-pencil"></i>


Even FontAwesome provides classes for animated icons that can be used in Loading or splash screens. For this we just need to use fa-spin class. For example

<i class="fa fa-spin fa-refresh"></i> 
<i class="fa fa-spin fa-cog"></i>



Leave a Reply

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