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 iconfinder.com. 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 http://picsvg.com/ and http://picsvg.com/.

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 http://fontello.com/ or https://icomoon.io/. To demonstrate this, I am using icomoon here.

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

Icons

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:

CSS

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

Unicode

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

SVG

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.

Leave a Reply

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

seven + three =