This guide explores various methods to integrate SVG icons into HTML, examining the advantages and disadvantages of each approach.
Integration methods covered in this guide:- SVG as an external file
- Inline SVG icons
- SVG symbols
- Icon Font
- SVG sprites
SVG as an external file #
Like other assets, SVGs can be imported as external files. Simply create an icon.svg file and import it using the <img> element in HTML:
<img src="../icon.svg" alt="Icon description"></i>When importing SVG icons using the <img> tag, the image's initial size will match that of the original SVG file. To modify this default size, you can adjust the width and height properties of the <img> element within your CSS.
Pros: easy to implement and maintain. You only need to update a single .svg file to modify the icon appearance.Cons: icons are not customizable in CSS.
Working with SVG icons?Take your designs to the next level with the Nucleo icons →Inline SVG icons #
For inline SVG icons, copy the SVG code and insert it into your HTML document where you want the icon to be visible:
<p> <svg viewBox="0 0 64 64" width="64" height="64" aria-hidden="true"> <!-- svg code here --> </svg> This is a label</p>If you are using an icon organizer like Nucleo to store all your icons, you can copy the SVG code from the context menu (right click icon -> Copy SVG Code):
Inline SVG icons can be customized using CSS. For example, to change the size of an icon, you can use the width and height attributes.
You can define those attributes either in HTML:
<!-- svg size set to 32px --><svg width="32" height="32" viewBox="0 0 64 64"> <!-- svg content here --></svg>or in CSS:
svg { height: 32px; width: 32px;}Pros: simple implementation and customizable icons.Cons: maintenance is challenging as the SVG icon code may be repeated multiple times in the HTML document.
SVG symbols #
The SVG symbol technique is based on the use of two elements: <symbol> and <use>.
The <symbol> element stores all the SVG icons, while the <use> element renders them in HTML:
<!-- store icons - this element won't be visible inside the HTML file --><symbol id="icon-expand" viewBox="0 0 16 16"> <path d="M2.854,8.146a.5.5,0,0,0-.847.272l-1,6A.5.5,0,0,0,1.5,15a.454.454,0,0,0,.082-.007l6-1a.5.5,0,0,0,.272-.847Z"></path></symbol><!-- render the icon --><svg><use href="#icon-expand"/></svg>You can store all your icons in a single hidden <svg> element: group each icon into a <symbol>; each <symbol> needs to have an ID that is used to reference the icon inside your HTML document with <use>.
<!-- store icons - not visible inside the HTML file --><svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <symbol viewBox="0 0 48 48" id="heart"> <title>heart</title> <!-- svg icon code --> </symbol> <symbol viewBox="0 0 32 32" id="check"> <title>check</title> <!-- svg icon code --> </symbol> <symbol viewBox="0 0 48 48" id="home"> <title>home</title> <!-- svg icon code --> </symbol></svg><!-- render the heart icon --><svg><use href="#heart"/></svg>If you are using an icon organizer like Nucleo to store all your icons, you can create the SVG symbols list directly within the tool: select the icons, then export them as SVG <symbol>.
If you plan on including icons as SVG symbols, here's the complete guide on managing icons in web projects using SVG symbols.
Pros: reuse icons without repeating code.Cons: SVG code optimization is required to customize icons in CSS.
Icon Font #
An icon-font is a font file that contains all your icons and is imported in CSS:
@font-face { font-family: 'foodie'; src: url('../fonts/foodie.woff2') format('woff2'), url('../fonts/foodie.woff') format('woff');}In HTML, displaying an icon is as easy as adding a couple of classes:
<i class="icon icon-heart"></i>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.
If you are using an icon organizer like Nucleo to store all your icons, then you can create the icon font files directly within the tool: select the icons, then export them as icon font.
If you plan on including icons as icon font, here's the complete guide on managing icons in web projects using icon fonts.
Pros: easy to use and icons are customizable in CSS.Cons: requires a font generator tool.
SVG sprites #
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; height: 18px; width: 18px; background-image: url('../icons.svg'); background-repeat: no-repeat; background-position: -18px 0px;}Manually creating an SVG sprite file can be a challenging task. It involves organizing each icon within a <g> element and translating them appropriately to form a grid:
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="18" viewBox="0 0 72 18"> <g> <!-- svg icon code --> </g> <g transform="translate(18 0)"> <!-- svg icon code --> </g> <g transform="translate(36 0)"> <!-- svg icon code --> </g> <g transform="translate(54 0)"> <!-- svg icon code --> </g></svg>If you are using an icon organizer like Nucleo to store all your icons, you can create the sprite image directly within the tool: select the icons, then export them as SVG sprites.
If you plan on including icons as SVG sprites, here's the complete guide on managing icons in web projects using SVG sprites.
Pros: all icons are stored in one file.Cons: icons cannot be customized in CSS.
The end! Check our documentation tutorials page for more articles on working with icons.
