How to Convert Font Awesome Icon to Image?

Font Awesome is one of the popular icons available on the web. You can either use CDN links or host them on your server to use on your website or projects. The problem here is that you need to link the entire CSS and font files even though you only wanted to use few of them. The solution is to convert the font icon to an image so that you can independently use anywhere.

Icon to Image Converter Tool

We have launched a free tool that will help you to convert Font Awesome icons to images. At this point the tool still use the old version 4.7.0 to make it simple as the version 5+ has different structure.

There are more than 650+ icons that you can select from and convert to a transparent PNG image.

Finding Your Favorite Icon

Open the icon to image converter site and it is very easy to use on your own. On the home page, you have many options to filter the fonts.

Font Icon to Image Converter Tool
Font Icon to Image Converter Tool

Use Search Box

The search box is an easy way to filter the required icons. For example, type in heart and the tool will instantly filter all heart icons.

Sorting the Icons List

There are four sorting options available beside the search box. Click on the required way to filter the icons list.

  • Sort by name – sort the icons list in ascending order starting from the numbers to letters.
  • Sort by most viewed – click on this to sort the icons based on the most viewed icons at first.
  • Sort by most downloaded – click to sort based on the most downloaded icons in the first.
  • Sort by popularity – use this filter to view the popular icons based on view and downloads.

Icons List

The icon to image converter tool has more than 650 font icons. You can click on any of your favorite icon to start the conversion process.

How to Convert Font Icon to Image?

Click on the icon to go to the image generator page. Here you can customize and download the image to your device. The image generator tool has two major sections – preview and customization.

Icon Preview

The chosen icon preview will be shown with the default options in the left side preview pane. The colors and background are default; you can customize every element on the preview.

Icon Preview Pane
Icon Preview Pane

Customizing Icon

You have the following options to customize your icon.

Background Settings

Click on the “Customize Background” button to view the options.

Customize Background of Icon
Customize Background of Icon
  • There are six shapes you can choose for your image – circle, square, diamond, hexagon, octagon and decagon.
  • You can create image with minimum size of 40×40 pixels to the maximum of 1000×1000 pixels.
  • Drag the opacity slider to the level you want. The preview pane will show all your changes instantly to help in seeing the changes lively.
  • Enter the color for your background in the “Color” text box. You can either use hex code values like #333333 or type in the color description like black or brown.
Customizing Icon

Now that you have finished the background setup and the next step is to setup the icon styles. Click on the “Customize Icon” button to view the options.

Customizing Icon
Customizing Icon
  • Set the size for your icon. The percentage value indicates the size within the background portion. Drag the slider to view the size in the preview.
  • Similar to background choose opacity and color for your icon image.
Shadow Customization

The tool by default adds a shadow of the icon with 45-degree angle to full depth. Here you can choose the depth, angle, opacity and color for the shadow. If you don’t want the shadow for your image simply make the depth % to 0.

Customize Shadow
Customize Shadow
Customizing Border

The last option for customizing is to setup the size, opacity and color for your border. Border is inside the width of the background, so the maximum size of the image will be the size you select under background settings.

Customize Border
Customize Border

Reset and Download

Play around with the tool to create different custom icon images. If you don’t like your customizations, click on “Reset Icon” button to remove the customizations and reset the image back to initial state.

When you are done, click on the “Download Icon” button to generate a PNG image from the preview pane.

Other Features in the Tool

  • Transparent PNG Image – the tool will convert the customized icon to an image in PNG format. If you have chosen shape of the icon image other than square then the background portion of the icon image will be transparent. Since PNG image format is the only format that supports transparent background, the tool offer the image conversion in PNG format.
  • The “-O” in the icon name indicates that it is an outline icon. Note that the Font Awesome version 5 has different structure and these outlines icons were removed and renamed.
  • The icon to image converter tool will work on all devices like Windows PC, Mac, iPhone and Android devices. On desktops, the icon image will automatically download to when you click on “Download Icon” button. On mobile devices, the toll will show the generated image on the screen and you may need to save it to required folder depending on the device.

Example Images

The tool can help you in creating smaller to larger size images in different shapes. Below are some of the images generated with the tool.

Editorial Staff at WebNots are team members who love to build websites and share the learning with webmasters community. Follow us on Facebook and Twitter.

Leave a Comment