This post is also available in: Español (Spanish)
Greetings! The world wouldn’t go round without icons, so today I decided to write a pretty fast and straightforward design tutorial to create your own icon fonts with your favourite SVG pictures. It is a great and light way to integrate visual resources in vector format inside your projects and applications. Let’s start with it!
The importance of icons and icon fonts.
Previously, in our article with tips to identify and choose the right typeface, we mentioned some type of fonts that only offers symbols and drawings, called Dingbatsor Dingfonts. From the first Windows versions, there was an existing need of visual symbols to complete certain messages.
Today the use of icons is widespread and it would be difficult to find a website that does not require them: we have them in any management and user panel, in the hamburger menu of the responsive versions, and very often, as simple forms to illustrate the contents in our landings. Take a look, for instance, to this feature list from one of our developments landing:
Over time designers have tried to add icons on web pages using different methods. For a while, they used to be made in bitmap images with transparency (in GIF or PNG formats). But, of course, we already know that with bitmaps the issue of scaling tends to be a problem. Also, we are sometimes forced to export the same image in different sizes so that it can be adjusted to different contexts (something very common in the past for native mobile applications), which increases the weight the projects.
As the compatibility with vector images grew, the use of the SVG format became a standard for icons and logos, as it allows us a perfect scaling without losing any kind of detail, at a very low file cost. Praise the vectors!
However, there is still another frontier to surpass instead of directly inserting our vector as images: loading an icon font map.
What’s an icon font?
An icon font is nothing more than a file that gathers a set of vector codes associated with each character, which we can then invoke using certain mapping options or directly by its Unicode, as if it were any typeface.
I’m sure you’ve already heard about FontAwesome or LineIcons. These and many other libraries work exactly like that. We benefit from the ability to import fonts in our web browsers or applications so as to have easy access to an iconography library for our project.
For web development, we only require the font file(s) and a CSS file that will serve us as a map to help including the icons in a semantic way using classes. For what I know as a standard, icons tend to be inserted in <i></i> labels. It is also good practice to have any sort of documentation that can guide us finding the right icon for each moment.
In a nutshell, using an icon font is the simplest way of having an available and easily accessible lossless image library. Additionally, it has many more advantages than loading vector images in our project.
Pros of using an icon font.
- We can scale the icons to any size while maintaining perfect quality.
- We are able to use the same icon several times in different sizes and colours, based on the same reference.
- We save page loading time as we have all the possible icons unified in a pair of fails, so it is good for performance.
- It allows us a simple control version for the font, being able to add new icons in further versions.
- The design process is simplified as we can directly apply CSS properties (colours, gradients, shadows, etc.) without having to edit the icon, as the same principles apply as with typography. Many of those classes won’t work when inserting vectors from image labels.
- It is also easier for the browser to load an icon font than SVG files or in-line code. If you want to know more, here’s a link to a performance test.
But let’s not fool ourselves, not everything is perfect. When loading the image as a typographic character we may have some differences in the rendering according to each browser. It is also a bit trickier when it comes to aligning and positioning the element because it does not work the same as an image. However, it seems to me a very low price to pay for all the boons it brings us.
So, let’s start creating our own icon font!
Creating a custom icon font.
Step 1: Make a selection of icons.
The first thing you need to create your icon library is, obviously, content. So you’ll have to choose the icons you are going to include in it. If you’ve already designed them, perfect! If you are going to use third-party made icons, you can check pages like Flaticon, Iconfinder or Icon-icons.
Here is a piece of advice when choosing your icons:
- Start with the basics, the most obvious icons you are going to need, probably related to the interface (menu buttons, editing actions, favourites, email, phone, address, social media, etc.).
- Make a word list of concepts related to your brand, project or nearby topics, the larger the better. Don’t be afraid of having too many icons. I firmly believe that it always useful to have a well-nourrished library for future needs.
- Choose icons that are visually aligned. In other words, let them all have a similar style: if you go for curvy and thin line icons, don’t mix them with bold, straight-edged or solid icons. Make an integrated bundle.
- If you need your icons to be flexible in colours (which is a must IMO), pick them in black and white.
- Do not forget to attribute to their authors should the collected icons require it!
Step 2: Download the icons in SVG format.
You can download in SVG the files as you go and find them, or keep them in a collection and download them all bundled (some pages allow it). In any case, store all your vector files in a folder.
Note: webs like Flaticon allow you to create a font from a collection from their website. We are not going to explore that possibility because I think it is more interesting to have the freedom to choose icon from any kind of origin and be aware of the process.
Step 3: Create the font (using, for instance, Iconmoon).
Now we have our icon selection, we are ready to use a tool to create our font from it. Some of the tools I know to do this are Fontello, Fontasticand Iconmoon. I like the last one best for its simplicity and UX.
To start working we have to enter the IcoMoon App area.
In this panel, you’ll see that Icomoon offers you some basic icons you can add to your project if you like (and if they match the style you are looking for). Simply click on the ones you are interested in and they’ll be selected for your work in progress font. I also advise you to click on the “untitled project” text and start by giving your new font a name you can later identify your library with.
Let’s get to the important part now. Click on import icons to upload your collected SVG. You can also drag & drop them on the browser and they’ll appear en the library. Once you have them visible, you can select them one by one or clicking and dragging over the rows.
Once you’ve chosen your files, the next step is to click “Generate Font“! In this new tab, you can rename your icons with more intuitive or easy to remember words. This is important to make it easier to find them later. You can also customize the Unicode for each character if you like, though I don’t usually feel that need.
Another crucial part is the Preferences section. In this window you can choose how you want the font library to behave when it is added to a project. For instance, the Class Prefix means that all the names you’ve been writing will be preceded by it, in a .icon-NAME fashion, when adding them to your app. You can make the prefix simpler, if you like. I tend to go with .ic-NAME because it’s usually easier for me.
You can also customize the CSS selector that will inform the browser you are adding an element from your custom font. My preferred system is using classes, in this case .icon. That way, if I want to add another library in the future, I can easily differentiate them with that selector.
Last but not least is the option to numerate your font version. I think it is a handy detail so you can, later on, evolve it and add new elements, as you can also track its evolution.
As you see, you have a lot of additional options. You can even customize the advanced behaviour of ligatures among characters. Personally, I don’t complicate things much so I think what we’ve seen until now is more than enough to export our font. In order to do that, just click the “Download” button on the tab.
You’ll get a compressed file with the following structure.
The Read Me is just an explanation. The demo file and folder let you check your library, especially your names and codes paired with the corresponding icons. Selection.json is a backup in case you want to edit your library in IcoMoon again, and you don’t have it saved in an account or the website cookies. That way you won’t lose your project info.
In the end, the only files you need are the ones in the font folder and style.css.
Step 4: Install the .ttf font for local use in your computer (if you like).
This is pretty simple, or as simple as your OS makes it. Usually clicking with the mouse right-button opens a menu with the option to install your font files. Once that is done, you can use it in your programs! But… How can you choose the element you want? That’s where the codes you copy from your demo files or the IcoMoon website come in handy . You’ll usually see it as a generic square.
Copy the mysterious square of the desired icon.
Then paste it on the program you are using (Word, Illustrator or whatever), after -obviously- choosing the font you’ve just installed.
Step 5: Add your font to a web project.
As we mentioned before, to add the font and use it in web projects you will need the font folder and the styles.css file. Usually, styles.css is the name you’ll want to use for your own projects, so feel free to rename it otherwise. For instance, mi-font.css. No matter what you choose, the first step is to import your file in your website’s <head>..
// Import font stylesheet
<link rel="stylesheet" href="css/catcafe.css">The stylesheet will be responsible of loading the font files. If you alter the route or file structure, make sure you modify it in the @font-face property of your font’s CSS:
@font-face {
font-family: 'catcafe';
src: url('/fonts/catcafe.eot?3lrf4x');
src: url('/fonts/catcafe.eot?3lrf4x#iefix') format('embedded-opentype'),
url('/fonts/catcafe.ttf?3lrf4x') format('truetype'),
url('/fonts/catcafe.woff?3lrf4x') format('woff'),
url('/fonts/catcafe.svg?3lrf4x#catcafe') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}Lastly, invoke the icon you desire. With the setting we choose for our example, we should use the following system to load our icons.
// use the classes .icon and .icon-[NAME OF DESIRED ICON]
<i class="icon icon-cat"></i>And voilà! You are now ready to build your website with your own custom icons!
Demo landing and live example.
As usual, I applied these steps on the go and I am leaving you a demo landing and its corresponding repo link to see the live results. Check it for further details about the file structure and some of the nice things you can achieve with your new font.
And with this, the tutorial is over. You can now grace your projects with your favourite icons in a simple, quick and performant way! I hope this article was useful for you and I am eager to hear about what you get to do with this new potential.
Oh, and before we finish, we have to give the required attribution ; ). The icons we’ve chosen for this example were made, as you know, by Freepikat www.flaticon.com.
I wish you a great week! See you soon!