An Introduction to Icon Fonts with Font Awesome and IcoMoon

Share this article

Icon fonts are all the rage nowadays, with more and more developers taking advantage of them in their designs. If you haven’t yet looked into icon fonts, this article can get you started.

I’ll demonstrate the great things we can achieve using icon fonts but first I’ll take a look at what icon fonts are and what are their pros and cons. Then, we’ll examine two popular icon fonts and we’ll see different examples showing how we can use them in our projects.

What are Icon Fonts?

Icon fonts are just fonts. However, instead of containing letters or numbers, they contain symbols and glyphs. You can style them with CSS in the same way you style regular text which has made them a popular choice on the web.

Pros and Cons for Icon Fonts

There are some significant benefits to using icon fonts instead of bitmap images in your projects. Here are some of those:

  • You can apply any CSS effects to them.
  • Because they are vector graphics, they’re scalable. That means you can scale them up or down without losing their quality.
  • You send one single or few HTTP request(s) to load them instead of multiple HTTP requests that bitmap images might require.
  • They load fast because of their small size.
  • They’re supported in all browsers (even back to IE6).

So, are icon fonts appropriate for all cases? No, of course not. They’re an excellent way to enhance the design of a project but they also have limitations. For example, if you want to show a complex image on your project instead of a simple icon, then icon fonts aren’t the best solution.

They’re also usually limited to a single color, unless you apply some CSS tricks. Moreover, icon fonts are designed according to specific grids, for instance 16px16, 32×32, 48×48, etc. If for some reason you change the grid system to 25×25, you’ll probably not get crisp results (specific CSS properties can also help).

Beyond icon fonts, it’s worth mentioning that there’s also another popular solution for vector icons: SVG icons. These have the ability to overcome some of the problems that icon fonts may have. For example, you can apply more than one color to them.

In the rest of this article, we’ll cover the basics of the following two icon font libraries:

We’ll show four different examples that use icon fonts.

Font Awesome Icons

Font Awesome is a rich collection of 439 icons. This library is completely free either for personal or commercial use. Originally, it was designed for Bootstrap, however you can use it in any of your favorite frameworks.

Getting Started with Font Awesome

The simplest way to include Font Awesome in your project is through a Content Delivery Network (CDN). If, however, you’re working off-line, you’ll have to download the icon pack.

You also have to find and include the CSS file and the generated fonts folder containing the different font formats. Then, you have to add the CSS file to your HTML document. Finally, you have to verify that the @font-face src URL paths in your CSS file correspond to the appropriate folder. For a complete list of all the possible ways to set these icons for your projects, see their getting started guide.

In order to use the icons, you have to place them inside either a span or an i element. Then, you have to assign them two classes. The fa class plus a second class, which should be the name of the icon you want to add to your project, for instance fa-home. In their cheat sheet you can see the names of all the available icons in the package.

Additional predefined classes allow you to easily customize the icons. For more information regarding these classes as well as examples of how to use them, go here.

Let’s now see in action three different examples that use the Font Awesome icon pack.

Font Awesome Example #1

In this first example, we are creating a vertical navigation menu. First we wrap the icons inside an i element and we double their size relative to their container’s size, using the predefined fa-2x class. Then, we style them using CSS.

The HTML for two nav items would look like this:

    <a href="#" data-name="Home">
        <i class="fa fa-home fa-2x"></i>
    <a href="#" data-name="About">
        <i class="fa fa-bullhorn fa-2x"></i>

And here’s the relevant CSS:

nav li {
    background: #ededed;
    height: 80px;
    width: 80px;
    line-height: 80px;
    text-align: center;

nav li:not(:first-child) {
      margin-top: 1px;

nav li a {
    outline: none;
    position: relative;
    width: 100%;
    height: 100%;

nav i {
    color: steelblue;
    vertical-align: middle;

nav li a:after {
    background: #ededed;
    content: attr(data-name);
    display: none;
    margin-left: 1px;
    width: 160px;
    height: 80px;
    left: 80px;
    position: absolute;
    font-size: 1.2em;

nav li a:hover:after {
    display: inline-block;

And the result is in the demo below:

See the Pen Font Awesome Icon Font example #1 by SitePoint (@SitePoint) on CodePen.

Font Awesome Example #2

In this next example, we will create a simple social network panel. For this, we wrap the icons inside an i element and we double their size relative to their container’s size, using the predefined fa-2x class. Then, we style them using CSS.

The HTML for a single icon will look like this:

<a href="#" title="Like us!">
    <i class="fa fa-facebook fa-2x"></i>

And the CSS to style the icons:

section a {
  padding: 7px;
  color: black;

section i {
  vertical-align: middle;
  transition: color .3s ease-in-out;    

section a:nth-child(1):hover i {
  color: #3b5998;

Here’s a demo:

See the Pen Font Awesome Icon Font Example #2 by SitePoint (@SitePoint) on CodePen.

Font Awesome Example #3

In this third example, we use the icons on a login form. We use the icons in the same way as the previous examples. We just apply another predefined fa-fx class to icons to set them a fixed width (approximately 1.25em).

The HTML and CSS are similar to the previous examples, and here is the result:

See the Pen Font Awesome Icon Font Example #3 by SitePoint (@SitePoint) on CodePen.

Notice the icons in use on the form as well as on the social links.

IcoMoon Icons

IcoMoon is another popular icon font solution. It comes with two icon packs, one open source and one premium (essential and ultimate options). For more information about these packs, go here. Depending on the package you choose, the number and the format of the available icons will be different. For example, the number of the icons for the free pack is 450, but for the ultimate pack it’s 1266.

Beyond these packages, IcoMoon provides an online app where you can search and download more than 3500 icons for free. This app provides a few basic editing options, including options to rotate them, change their color, and more.

There’s also the option to import your own icons or even to create your own custom icon fonts. Finally, there are some free and paid (basic and unlimited options) plans.

Getting Started with IcoMoon

The package you select for download includes icons in different formats (for instance SVG, PSD, AI). Using the web application, once you select the icons you want, you can download them either in SVG format (we won’t use this option) or as icon fonts.

As soon as you download the icons, you have to include in your projects the CSS file and the generated fonts folder containing the different font formats and verify that the @font-face src URL paths in your CSS file correspond to the appropriate folder.

There’s also the option of a quick usage link that you can directly add to your HTML document (think about it as a link to a CDN) and then you’re able to use the icons you selected. However, this option is permanent only for the premium plans. Basic plan offers also this option, but usage is limited to one day.

Similar to font awesome icons, in order to use IcoMoon icons you have to place each of them inside a span element. Then you have to assign a class, which should be the name of the icon you want to add to your project, for instance icon-home. You can also customize the icon names (instead of the default prefix, you can set your own prefix) from the Preferences tab, before you download the icon fonts.

Let’s look at an example.

IcoMoon Example

In this example, we will use the icons to create a section related to the working process of our company. We wrap the icons inside a span element and we style them using CSS.

The HTML for two icons looks like this:

    <span class="icon-pencil"></span>
<li> + </li>
    <span class="icon-paint-format"></span>
<li> + </li>

Our CSS:

section li:nth-child(even) {  
  color: #ededed;
  width: 6%;
  font-size: 2.5em;
  height: 63px;
  margin-top: 31.5px;
  line-height: 63px;

section span {
  padding: 15px 0;
  font-size: 5em;
  display: block;
  color: steelblue;
  transition: all .2s ease-in-out;

section li:hover span {
  transform: translateY(-10px);

And the demo:

See the Pen IcoMoon icon font example by SitePoint (@SitePoint) on CodePen.


I hope you found this tour of two of the most popular icon fonts interesting and maybe this will encourage you to use one of them in an upcoming project.

If you know any other icon fonts or web projects that take advantage of these in order to create interesting designs, feel free to share them in the comments.

Frequently Asked Questions (FAQs) about Icon Fonts, Font Awesome, and IcoMoon

What are the main differences between Font Awesome and IcoMoon?

Font Awesome and IcoMoon are both popular icon font libraries, but they have some key differences. Font Awesome is known for its extensive collection of icons, with over 7,000 available in its free version. It’s also widely used and recognized, making it a safe choice for many developers. On the other hand, IcoMoon offers a more customizable experience. It allows users to create their own icon sets from SVG files, which can be a major advantage if you need specific or unique icons. IcoMoon also has a smaller footprint, which can lead to faster load times.

How can I use Font Awesome icons in my project?

To use Font Awesome icons in your project, you first need to include the Font Awesome stylesheet in your HTML file. This can be done by adding a link to the Font Awesome CDN in your head tag. Once the stylesheet is included, you can add Font Awesome icons to your HTML by using an i or span tag with the appropriate class. For example, to add a camera icon, you would use the following code: <i class="fa fa-camera"></i>.

Can I use IcoMoon icons in a commercial project?

Yes, you can use IcoMoon icons in a commercial project. IcoMoon offers both free and premium icon packs, and both can be used in commercial projects under the terms of their respective licenses. The free icons are licensed under a Creative Commons Attribution 4.0 International license, which requires attribution. The premium icons come with a royalty-free license, which does not require attribution.

How can I customize Font Awesome icons?

Font Awesome icons can be customized using CSS. You can change the size, color, and other properties of the icons by targeting the i or span tag in your CSS. For example, to change the color of an icon to red, you would use the following code: .fa { color: red; }. You can also use Font Awesome’s built-in classes to rotate, flip, or animate icons.

How can I create my own icon set with IcoMoon?

To create your own icon set with IcoMoon, you first need to upload your SVG files to the IcoMoon app. Once your files are uploaded, you can select the icons you want to include in your set, adjust their properties, and then download your custom icon font. The downloaded package will include the necessary font files and CSS, which you can include in your project.

Are there any alternatives to Font Awesome and IcoMoon?

Yes, there are many alternatives to Font Awesome and IcoMoon. Some popular ones include Google’s Material Icons, Bootstrap Icons, and Feather Icons. Each of these libraries has its own strengths and weaknesses, so the best choice depends on your specific needs.

Can I use Font Awesome and IcoMoon icons together in the same project?

Yes, you can use Font Awesome and IcoMoon icons together in the same project. However, keep in mind that each library has its own CSS, so you’ll need to include both stylesheets in your HTML. Also, be aware that using multiple icon libraries can increase your page load time.

How can I search for specific icons in Font Awesome or IcoMoon?

Both Font Awesome and IcoMoon have search features on their websites. On the Font Awesome website, you can use the search bar at the top of the page to search for icons by name or category. On the IcoMoon website, you can use the search bar in the icon library to search for icons.

Can I use Font Awesome or IcoMoon icons in a WordPress theme?

Yes, you can use Font Awesome or IcoMoon icons in a WordPress theme. To do this, you’ll need to include the appropriate stylesheet in your theme’s header.php file. Then, you can add the icons to your theme’s HTML using the appropriate HTML tags and classes.

Are Font Awesome and IcoMoon icons accessible for users with disabilities?

Yes, both Font Awesome and IcoMoon icons can be made accessible for users with disabilities. To do this, you should include appropriate alt text for each icon, and use ARIA attributes to provide additional information for screen readers.

George MartsoukosGeorge Martsoukos
View Author

George is a freelance web developer and an enthusiast writer for some of the largest web development magazines in the world (SitePoint, Tuts+). He loves anything related to the Web and he is addicted to learning new technologies every day.

custom iconsicon fontsLouisLweb fonts
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week