How to add and manage icons in web projects using icon fonts

In this article, we'll explore how to integrate icon fonts into a web project - from creating them to styling the icons in CSS - and what are their advantages/disadvantages.

Before diving into icon fonts, here're some different icon integration methods you could use:

• Add and manage icons in web projects using SVG symbols
• Add and manage icons in web projects using SVG sprites

How it works #

An icon-font is a font file that contains all your icons and is imported in CSS.

In HTML, displaying an icon is as easy as adding a couple of classes:

<i class="icon icon-heart"></i>

How to create an icon font #

To create an icon font, you need all your icons as separate SVG files, and an icon font generator, which is a tool that converts SVG icons into a font.

Most sets already provide the icons as SVG files. If your icons are in a Figma file, select all the frames and export them as SVG.

Once you have the SVG icons, you can generate an icon font using an app like Nucleo: import your SVG icons by dragging them over the app, then select them inside the app and press the 'Export' button. In the export window, select 'Icon font' as the export option, and press 'Export icons'.

The app will generate the font and the CSS file you need to import the icons.

How to import an icon font #

Import the .woff and .woff2 files created by the app into your project assets folder (e.g., 'assets/fonts/myfont.woff2'). Modern browsers will load only the .woff2 file, while the .woff file is a fallback for older browsers.

The CSS file contains the @font-face rule used to import the font, the 'base' .icon class definition, the class names of the icons, and other utility classes.

@font-face {
  font-family: 'foodie';
  src: url('../fonts/foodie.woff2') format('woff2'),
       url('../fonts/foodie.woff') format('woff');
}

/* base class */
.icon {
  display: inline-block;
  font: normal normal normal 1em/1 'foodie';
  color: inherit;
  flex-shrink: 0;
  line-height: 1;
  max-width: initial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* icons */
.icon-apple::before {
  content: "\ea02";
}

.icon-banana::before {
  content: "\ea13";
}

.icon-pear::before {
  content: "\ea21";
}

How to use an icon font #

Now that you have successfully created and imported the icon font, to display an icon all you need is its class name:

<i class="icon icon-banana"></i>

Because finding the icon class names in a CSS file is impractical, the font generators give you an HTML demo file where you can view the icons and copy their classes.

The problem with these demo files is that they're often lost or become obsolete if you add new icons to the set.

Nucleo offers an elegant alternative to the demo file: the Nucleo projects.

If you add the icons to a project (select the icons > right-click > add to project) and then export it as an icon font, you can copy the class names directly within the app. To change a class name, edit the icon name in the info panel (then remember to export a new version of the font).

CSS Customizations #

The icon fonts allow you to edit the size, color, and opacity of the icons.

The basic icon size, given by the .icon class, is 1em, which means the icon inherits the parent font size. To change the icon size, you can either create some utility classes or specify a font size in CSS:

/* utility classes */
.icon-sm {
  font-size: 16px;
}

.icon-md {
  font-size: 24px;
}

.icon-lg {
  font-size: 32px;
}

/* setting the icon size on an element */
.component-icon {
  font-size: 20px;
}

To change the color, use the color property:

.icon-red {
  color: red;
}

Finally, use the opacity property to modify the opacity value.

Unlike other methods like 'importing the icons as inline SVG', icon fonts don't offer deeper customization options because you can't target specific icon elements.

Adding/removing icons #

Chances are your website will evolve over time and you'll need to add/remove icons. To do so, you'll have to generate a new icon font, replace the old files with the new ones, and update your CSS.

Updating your icon font is way smoother if you use an app like Nucleo. You can add new icons to a project by dragging them over the app (with the project selected). You can delete icons by removing them from a project. You can also replace an icon if you want to preserve the class name (right-click to open the icon context menu > select 'replace icon').

You'd still need to export a new font file and replace the old one on your server, as well as update the CSS because you have new class names. However, you won't need to go through the whole process of finding all your icons in some folder, importing them into a font generator, and exporting a new font and demo files.

Accessibility #

To make the icon accessible to screen readers, add a title to the icon element:

<i class="icon icon-heart" title="heart"></i>

If you don't want the icon to be announced (e.g., because there's a label and the icon would be redundant), add aria-hidden="true" to the icon:

<a href="#0">
  <i class="icon icon-twitter" aria-hidden="true"></i>
  Follow us on Twitter
</a>

For additional tips on icon accessibility, check our guide to creating accessible icons.

Pros and cons of using icon fonts #

Pros:

• Easy to use
• Icon customizations in CSS
• The icons are scalable vectors
• Good page speed performance

Cons:

• Support limited to SVG icons (e.g., you can't create an icon font using PNG icons)
• Fewer customization options compared to inline SVGs
• Unlike inline SVG, you can't animate individual icon elements
• To add/remove icons, you need to generate new files and update the CSS

The end! Check our documentation tutorials page for more articles on working with icons.