Now that your icon set is ready, you can move on to the next step!Ĭreating an icon font on your own sounds difficult, but there are lots of tools out there that make the task quick and painless. Select SVG from the dropdown menu and make sure the option “Use Artboard” is checked.

Convert paths to filled shapes by using Expand (Object>Expand Object>Path >Outline Stroke).

use the Pathfinder panel to combine overlapping shapes.

Take these things under consideration before saving:

This will come in handy when you save your files because it will be the name of the SVG file!

As you draw, give each artboard a logical name. Using the “Number of Artboards” option, you can indicate the amount of artboards you want to create.ĭraw an icon on each artboard. You can start with a 64圆4px Illustrator document. You can use any software you want to create vector files – but now I will show you how to do it using Adobe Illustrator. The first step is to design your icons and save them as SVGs. This type of design uses thin lines as the basic form, so just make sure you take this into consideration when you set the weight of your strokes in Illustrator. Minimal, flat, and light design seems to be a popular trend for iconography nowadays, so you might start with this one. Some popular themes are: business, technology, sports, or social media. Think about the theme of your icons and the style that you want to achieve. To create an icon font, you need to design your icons first and then turn them into a font. SVG, your icons will look great on retina

Retina display: since the icon font uses.

Lightweight: icon fonts are more efficient because they require only one http request to load one font file.

Effects: you can add CSS3 effects and animations to them.

Fast loading time: since they have a small size, your website will load much faster than it would load if you used bitmap images.

Scalability: because they are vector graphics, you can easily scale them up or down without losing their quality There are some great advantages to using icon fonts instead of bitmap images: Each character or symbol can be easily displayed in HTML or CSS. Icon fonts are typical fonts that simply contain symbols and glyphs instead of letters or numbers. Today, we’re going to learn how to create a custom icon font using the icon set of your choosing. Icon fonts are an incredibly useful way to implement your favorite icons quickly and in almost any environment, from Photoshop to the web.

Free icon font