How to use

Here are some tips on using IcoFont in your project


There are two ways to download icons from IcoFont. You can either download the icons by clicking on the download button from the site navigation which will provide you the entire collection or you can browse the icons, add to your collections and then download. This will download only the icons that you selected.

You will be provided with a zip file after downloading. Extracting the zip file will give you three folders: css, example, and fonts. All the css files are stored in the css folder and the fonts are stored in the font. The example folder contains a HTML file showing you the downloaded icons with their unicodes.

Using on the web

You need to copy the entire IcoFont directory into your project folder. In the <head> of your html, reference the location to your icofont.min.css.

Here’s an example:
<link rel="stylesheet" href="myProjects/webProject/icofont/css/icofont.min.css">

Using in Graphic software like Photoshop, Sketch or Illustrator

After extracting the zip file you will find a .ttf file inside the fonts folder. You should be able to install the font by double clicking on the .ttf file. Now, go to the IcoFont website, copy the icon you need to use and paste it in your graphic softwares (including Sketch, Photoshop or Illustrator). Please note, when you paste the icon, you need to have Type tool selected. After pasting the icon, select it, and then change the font family to “Icofont”. This will do the work.