How to Create Custom Icons Using Font Awesome


This article explains how to use the awesome font icon; and how to convert a PNG file to an SVG file. Font Awesome is fully Open Source.

You can also contribute to your own icons. Font Awesome supports.

Scalable Vector Graphics

Why use Font Awesome?

There are many great reasons to use Font Awesome. The beauty of this is that you can make them as large or small as you like without any breakdown in quality. You will never see the pixelation that you would typically see when magnifying an image. Each icon can also be customized. Their size, color, drop shadow, in fact just about anything can be changed with the power of CSS.

How to use it?

Step 1. Create a PNG file for your icon. The PNG file should be greater than 216px*216px for quality icons. You can use

Photoshop or download an icon PNG file from the internet.


Step 2. If you have created a PNG file then you will need to convert the PNG file to SVG to import to Awesome Icons. You can use Inkscape software to convert the PNG file to an SVG file.

Use the following procedure to convert a PNG to an SVG file using Inkscape.

Open Inkscape and open the PNG file.

Go to the path and then click on"trace bitmap".


When you click onTrace bitmap a new window of Inkscape is opened then click on "Update" then"OK" and then close it.

Trace bitmap

Save this file.

Note. Remove the file extension from the name when you save this file.

Open a new Inkscape import the icon SVG file and set the dimensions of the icons.

SVG file

Step 3. Now you upload the SVG file and create some CSS strips.

Open the Icomoon page to upload the SVG file. Click on "Import icons".


When you import the SVG icon select the icon.

SVG icon

Go to the footer and click on "Font".


Click"Download" to download the Awesome font icon file.


Extract the icomoon file; you can see it in the files.

Icomoon file

Now you create an HTML file.


<!DOCTYPE html>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <title>Awesome fonts icons </title>
      <link href="style.css" type="text/css" rel="stylesheet" />
      <!--[if lte IE 7]><script src="lte-ie7.js"></script><![endif]-->
         .awesomefonts li{list-style:none; float:right; margin-left:15px;}
         .x{font-size:20px; color:#0591e5;}
         .two_x{font-size:30px; color:#ff6600;}
      <ul class="awesomefonts">
         <li class="icon-user x"></li>
         <li class="icon-user two_x"></li>
         <li class="icon-user three_x"></li>
         <li class="icon-user four_x"></li>
         <li class="icon-user five_x"></li>
         <li class="icon-user six_x"></li>



You can change the color with CSS.