Skip to main content
Web Development

3 Steps to Create your Own Font Icon from Photoshop Icon

In the history of the Web, designers have tried a variety of methods to use icons and images on websites. This includes, to name a few: importing bitmap image files (usually transparent PNGs), vectoring SVG files, or even using web fonts containing symbols instead of typical characters from the alphabet.  Using non-standard fonts has become the standard in web development in recent years, leading to the rise of icon fonts.

Advantages of Font Icons

Displaying icons through fonts is no different from using alternative fonts for headers, titles, and paragraphs. Implementing icons as a web font has many advantages:

  • Icons are scalable without loss in definition
  • There is no need to worry about Retina displays
  • It is easy to apply CSS properties without editing the icon itself (color, gradient, shadows, etc.)
  • You can use the same icon in different sizes and colors to save time and space
  • Better page speed performance (i.e. fewer http requests)
  • Icon fonts load faster than background or inline SVG’s

Now, let’s create a font icon…

Related: What you need to know about how we use state-of-the-art technologies coupled with best coding standards to increase productivity and quality of the applications

Creating Icons

In order to create a font icon, the icon has to be in the SVG (Scalable Vector Graphics) format. You can download SVG icons from various sites like But here I will tell you how to create icons from Photoshop, then convert this to SVG format and as a final step, convert the SVG format to font.

Step 1.

First, we need to create nice icon in Photoshop then save as PNG.

Photoshop Icon

Step 2.

After saving the image you have to convert the PNG image to SVG image. To do that you have lot of online image converter tool – among them and

Upload your image:

Pic Svg

Choose proper filters and download the converted SVG icon.

SVG Icon

Step 3

Converting to SVG is done. Now we have to convert that SVG to font by using or To demonstrate this, I am using icomoon here.

Import your saved SVG icon in icomoon clicking on “Import Icons” button.


You can arrange, enter Meta details and change grid size etc. by using right side hamburger menu:

Scalable Vector Graphic

If you want to edit, move, or delete the icon, you can do it by choosing the button which is highlighted in the following snapshot:


After all the editing is completed,  click on `Generate font’:


Rename all the icons and define a Unicode character for each (optional):


Download the generated files:

cross-browser compatibility

That’s it!!! The icon font you have just generated consists of various font formats (for cross-browser compatibility) and demo files, including HTML and CSS.

Raghavendra Hegde

Raghavendra Hegde

Raghavendra Hegde works as Sr. Web Developer with Trigent Software. He comes with over 8+ years of experience in both web and mobile application designing (UI and UX) & development along with expertise in responsive design applications. He has worked on several web development languages such as HTML/HTML5, CSS/CSS3, Bootstrap and jQuery, etc. and Graphic design applications such as Adobe Photoshop, CorelDraw and Adobe Illustrator. Working closely with the marketing function, Raghavendra has been recognised for his knowledge of Google Analytics, social media and digital marketing.

6 thoughts to “3 Steps to Create your Own Font Icon from Photoshop Icon”

  1. Hi there, I found your web site via Google even as searching for a related topic, your site came up, it appears great. I have bookmarked it in my google bookmarks.

  2. It??s really a cool and useful piece of information. I am happy that you simply shared this useful info with us. Please keep us informed like this. Thank you for sharing.

  3. Wonderful work! This is the type of info that should be shared around the web. Shame on the search engines for not positioning this post higher! Thanks

  4. Amazing Article! To people who directly jump into the comment section, kindly give a read! It’s beautifully written!

  5. Many thanks for making the effort to discuss this, I feel strongly about this and enjoy studying a great deal more on this matter. If possible, as you gain expertise, would you mind updating your webpage with a great deal more details? It’s extremely beneficial for me.

  6. Hi, Thanks for your page. I discovered your page through Bing and hope you keep providing more good articles.

Comments are closed.