This article covers Best Free Online Icon Font Generator Websites To Create Icon Font. Icon fonts are just fonts which contain symbols and glyphs instead of letters and numbers. Those are ideal for websites because of their advantages over bitmap images. Icon fonts are vector graphics and load faster because of their small size. You can also style them with CSS as well.
To use icon fonts, a website only needs to send a single or a few HTTP request(s). The main advantage of using icon fonts instead of bitmap images in a website design is, it reduces the load time and makes the design more responsive.
Here is a tutorial on How To Export Icons From Icon Fonts As PNG Images.
Here Are Best Free Icon Font Generator Websites
Using these websites, you can create a custom icon font by including only those icons which you need. This will reduce the overall icon font size. And, a smaller size is always good.
You need to create an account on these websites in order to generate icon font(s). Some of these icon font generator websites give you an HTML code module to directly use icon font in your website design along with free icon hosting (for non-commercial use only). With these websites, you can also generate icon font or, SVG Sprite or both, in case you want to do things manually. All these websites (except WeLoveIconFonts which is totally free and crowdsourced website) also offer premium services with more icons and features, like SSL Links, Font Hosting and more.
Fontastic
Fontastic is one of the popular icon font generator websites. It has lots of icon fonts with thousands of free icons. By default, there are 9 icon fonts listed on the Fontastic and you can add more free as well as premium icon fonts. Their free icon font library is massive and it can easily fulfill usual needs. You can also import icon font or SVG icons from your local storage to Fontastic and use them in your custom icon font.
To generate custom icon font with Fontastic, you just have to follow three simple steps which will only take a couple of minutes.
Select
Select the icons which you want to include in your icon font. You can browse more free icon-sets by activating those under ‘Add More Icons‘ section. After selecting all the desired icons, move to ‘Customize‘ section.
Customize
As Fontastic also generates an HTML code to directly embed your custom icon font in your website design, thus it gives you options to name the icons for CSS Class Mapping and Character Mapping. Evaluate the mapping and customize them as per your preference. You can skip this if you want, but then you have to do it later one by one, so it seems easy to do it here.
Publish
Here, you can publish your selected icons as ‘Icon Font‘ or as ‘SVG Sprite‘. In either case, you can publish your icon font on Icon Font Cloud, or you can download it for manual installation (or for other use). Publishing on Icon Font Cloud generates an HTML module which you can directly paste in your website’s HTML header to use your icon font. Fontastic also gives you instructions for manual installation as well.
In Fantastic, you can share your icon font with others and can also transfer the ownership of your icon font. Fantastic also offers free icon hosting for non-commercial use only.
Try Fontastic Icon Font Generator here.
Fontello
Fontello is a GitHub project-based website which offers simple icon font generator tool to create custom icon font. It has a decent range of free icon-sets to start with. On top of that, you can upload SVG icons and SVG fonts from your computer as well.
To build a custom icon font, select the icons you want to include in your icon font. You can select as many icons as you want. After selecting the desired icons, you can download that custom icon font with their default names and codes.
And, if you have a naming scheme that you want to use for these icons, you can do that in ‘Customize Names‘ and ‘Customize Codes‘ sections. In the ‘Customize Names‘ section, you can rename the icons as per your preference and can also set a universal prefix for all selected icons. And, in the ‘Customize Codes‘ section, you can give a unique hexadecimal name to each icon for character mapping.
You can also select the size for your icons. With the slider at the top, you can set icon size anywhere between 12px to 30px. You can download the complete icon font by clicking on ‘Download‘ button. And, if due to some reason, you only want the config data file, then click the tiny ‘bottom-arrow‘ along with ‘Download‘ button to download the config.json file.
Build your custom icon font with Fontello Icon Font Generator here.
IcoMoon
IcoMoon app is an online platform to generate icon fonts. It has an icon library with thousands of free icons along with paid icon-sets. You can also import icons to IcoMono app from your local storage. By default, the main page only shows the IcoMoon icon-set but you can add more free icon-sets from IcoMoon library.
The process to generate icon font here is same as others. First, select the icons from one or more icon-sets. You can select the size of icons for each icon-set with the tiny eye shape in front of their names. You can select 16px, 32px, 48px or 64px size for your icon font. Unlike others, you can re-position, delete or edit icons here. In the icon edit option, you can rotate the icon, change the alignment and scale the icon.
After selecting the icons, you get two options; one to generate SVG & more, and other is to generate icon font. Each option has different naming scheme accordingly.
Generate SVG & More
In this option, you can specify various CSS styling parameters, such as class prefix and suffix, set class selector and add a background color to the icons. And, you can export your custom icon font in any of the following formats:
- PNG
- Polymer
- XAML
- Photoshop Custom Shapes (CSH)
- Tiles (CSS sprite)
Generate Icon Font
Here, you can add ligatures to each icon along with the hexadecimal number for character mapping. You can add support for IE 6, IE 7 and IE 8, and generate Sass, Less and stylus variables. Apart from this, you can add and specify the following options:
- CSS Selector
- Font Metrics
- Metadata
- Version
With all these free features, you can generate a very highly customized icon font. If you want more, you can subscribe to their premium plans and enjoy unlimited font & SVG hosting, SSL links and more.
Generate icon font with IcoMoon here.
Pictonic
Pictonic has an online ‘Font Builder‘ where you can build your own custom icon font. It has more than 2700 paid icons and 362 free icons. You can not upload your icons to Pictonic, but the free icons include most of the popular icons and enough to make a general purpose icon font.
Generating icon font with Pictonic Font Builder is easy, as it does not have additional customization features like Fontastic and Fontello. Select the icons from the free icons and create a custom icon-set. Click on ‘Selected Icons‘ overlay and select ‘Save Set‘. You can save it as new icon-set or add it to existing icon-set. Enter a name for the icon-set and click the check icon to save it. After that, Pictonic shows you all of your custom icon-sets with a download, delete and share options. Click the download button to generate an icon font and download it to your computer.
You can try Pictonic Icon Font Generator here.
Glyphter
Glyphter is another online icon font generator with thousands of icons. It does not categorize the icons as paid or free, instead, it has a limit of 88 icons for free use. If you need more than that, you need to subscribe to their premium plan.
To generate icon font, simply drag and drop icons into the grid boxes. Then, name the icon font and click save button to save it to your Glyphter account. Click on the ‘Font‘ button to download your custom font to your computer. As a free user, you can only generate a single icon font at Glyphter.
Try Glyphter Icon Font Generator here.
We Love Icon Fonts
We Love Icon Fonts has a crowdsourced library with hundreds of icons. As of now, it has a limited number of icon-sets. You can select any icon-set to generate icon font. Note that, you can not select icons from multiple icon-sets here. When you select an icon-set, it displays that on the bottom bar. Click on the ‘Use‘ button to generate an HTML module for embedding the selected icon-set in your website design.
We Love Icon Fonts does not create downloadable icon font or SVGs; it only creates the HTML module to use the selected icon-set. Although it provides free icon font hosting, it is a public gamma, so it’s not reliable for productive systems. But you can use it for mockups, reduced test-cases or CodePens.
Check out We Love Free Fonts here.
Final Verdict
With all these icon font generator websites, you can easily generate custom icon fonts. Fontastic and Fontello are my personal favorites because of more free icons and customization features. Try them out and tell us which one you like and why.
