Using IcoMoon To Convert SVG Icons Into Icon Fonts

Neerav Mehta

Founder & CEO

Icon Fonts are popular vector-based graphics that can be used in projects by applying CSS styles. They are scalable, small in size and browser-friendly. Icon fonts differ from conventional fonts because they don't feature numbers or letters. Instead, they feature glyphs and symbols.

IcoMoon allows you to build custom icon fonts that can be used in projects of your choice. In this article, we will import SVG icons and convert them into icon fonts.

1.Go to https://icomoon.io/app/#/select.

2.After the page loads, click “Import Icons” on the top left:

3.We are importing 4 files: UpArrow-01.svg, RightArrow-01.svg, DownArrow-01.svg and BreadCrubmsArroe-01.svg. Select them and click "Open":

4.The newly added SVG icons will appear under “Untitled Set”.

5.Select the icons you wish to convert by clicking them. They will now be marked with an orange border. Click “Generate Font”:

6.In the new page, details of the icons you selected will be shown. All you have to do is download them. Click “Download” on the bottom right:

7.An icomoon.zip file will be downloaded.

8.Unzip it to get the following files:

icomoon/fonts: A directory that contains all the generated files.
icomoon/demo-files: A directory Stores files needed by “demo.html”.
icomoon/demo.html: An html file that may be of use at a later stage. You can refer it when necessary. demo.html and demo-files are not really important at the moment.
icomoon/Read Me.txt: A set of instructions.
icomoon/selection.json: A json file that stores your configuration details. This file can be used to update your font on IcoMoon whenever you wish to.
icomoon/style.css: This is the file your CSS will need to incorporate the newly created icon fonts.

9.Copy and save the fonts folder to your theme folder.

10.Copy and save the style.css file to your theme’s css file.

11.We can now use the icon fonts in our project. Here, we are using font-family and css content attributes to show the DownArrow-01 SVG icon that was added by us: