How to add and manage icons in web projects using SVG sprites

In this article, we'll go through the main steps of using SVG sprites, covering everything from their creation to their integration into a web project.

We'll also examine the pros and cons of this method to give you a well-rounded understanding of the technique.

Before diving into SVG sprites, 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 icon font

How SVG sprites work #

An SVG image sprite is a file containing multiple icons distributed in a grid, as shown below:

Like any other asset files, you can use these as background images in your CSS:

.icon {
  display: inline-block;
  background-image: url('../icons.svg');
  background-repeat: no-repeat;
}

To display an icon, specify the icon size (as in the sprite file) and its position within the sprite grid:

.icon {
  display: inline-block;
  height: 18px;
  width: 18px;
  background-image: url('../icons.svg');
  background-repeat: no-repeat;
  background-position: -18px 0px;
}

How to create SVG sprites #

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

Nucleo offers an easy way to do this: import your SVG icons by dragging them over the app, select them and press the 'Export' button. In the export window, choose 'SVG sprite' under the 'SVG' tab, and press 'Export Icons'.

The export panel allows you to customize the generated sprite file: 1) change the number of columns your sprite file should include; 2) add padding around each icon; 3) include the icons in two different colors.

How to use SVG sprites #

After creating your sprite file, place it in your project's assets folder.

Define a class in CSS for using the sprite as a background image, and then create specific classes for each icon, indicating their size and position.

.icon {
  display: inline-block;
  background-image: url('../icons.svg');
  background-repeat: no-repeat;
}

.icon-favs {
  height: 18px;
  width: 18px;
  background-position: -18px 0px;
}

Nucleo auto-generates these classes, simplifying the process.

To display an icon in an HTML file, all you need is its icon name:

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

Because finding the icon class names in a CSS file is impractical, the sprite 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 SVG sprite, 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 sprite).

CSS Customizations #

A limitation of using SVG sprites is their lack of CSS customization capabilities. For instance, if you wish to use the same icon in various colors, you need to include each color variation directly into the sprite file.

In the same way, to display an icon in multiple sizes, you must include every size variation within the sprite. An alternative approach is to resize the icon by scaling (using CSS transform property), but this doesn't change the icon's space in the document's layout, potentially leading to layout issues.

If your project requires extensive customization of icons, opting for inline SVGs or SVG symbols often proves to be a more effective solution compared to SVG sprites.

Adding/removing icons #

When using SVG sprite generators like Nucleo, updating your file to include new icons or remove old ones becomes pretty straightforward.

If you have created a project in Nucleo, you can add new icons by adding them to a project (right-click to open the icon context menu > select 'Add to Project'). You can delete icons by removing them from a project. You can also replace an icon if you want to preserve the class name value (right-click > select 'Replace Icon').

Once you have updated a project, you will need to re-export it as SVG sprite, and replace the old icons.svg file with the new file the app created.

Accessibility #

For meaningful icons (e.g., icons that need alternative text), add a title to the icon element:

<i class="icon icon-favs" title="Save to favourite"></i>

For decorative icons (e.g., an icon next to an explicit label), hide them from screen readers using the aria-hidden attribute:

<i aria-hidden="true" class="icon icon-favs"></i>

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

Pros and cons of using SVG sprites #

Pros:

• Easy to create using a sprite generator
• Single HTTP request to load all icons
• Icons are cached after the first HTTP request

Cons:

• Icons cannot be customized in CSS
• Unlike inline SVG, you can't animate individual icon elements
• To add/remove icons, you need to generate a new .svg sprite file

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