Icons in a Joomla Template Without the Sprite Sheet Era

Why raster sprites lost

A PNG has one native size. Scale it down and edges break up; scale it up and it blurs. Add a second display density and you need a second sprite sheet. Vector formats have no such limit — the same file draws crisply at 12 pixels and at 120, and colour is a CSS property rather than something baked into the file.

That is the entire argument, and it is why both options below are vector.

What Joomla already gives you

Joomla bundles Font Awesome and uses it throughout the administrator interface. Before adding an icon library to your site template, check whether that one is already being loaded on the page — shipping a second icon library alongside it is a common and entirely avoidable waste.

If you do want it in the front end, register it through the web asset manager rather than hard-coding a link, so it participates in versioning and dependency resolution:

$wa = $this->getWebAssetManager();

if ($wa->assetExists('style', 'fontawesome')) {
    $wa->useStyle('fontawesome');
}

The cost of a full icon font

An icon font is one file for thousands of glyphs, of which a template typically uses a dozen. The visitor downloads all of it. For a content site that ships six icons, that is a poor trade.

Icon fonts also carry accessibility baggage: glyphs live in the private use area, so anything that reads the page without the font renders a box or a random character. Always mark them as decoration and put the meaning in text:

<a href="/feed">
    <i class="fa-solid fa-rss" aria-hidden="true"></i>
    <span class="visually-hidden">RSS feed</span>
</a>

The SVG sprite

For a handful of icons, a sprite of your own is smaller and simpler. One file holds each icon as a <symbol>:

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
    <symbol id="i-rss" viewBox="0 0 24 24">
        <path d="..." />
    </symbol>
</svg>

And each use references one:

<svg class="icon" aria-hidden="true"><use href="/media/templates/site/yourtemplate/images/icons.svg#i-rss" /></svg>

Make the icons inherit their surroundings, which is what you want almost every time:

.icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.125em;
}

currentColor is the part that matters: the icon takes the text colour of whatever contains it, so hover states, dark backgrounds and inverted headers need no extra rules.

Choosing between them

Fewer than about twenty icons, and you control the design — build a sprite. A large interface with icons appearing unpredictably across many extensions — take the library that is already loaded rather than adding another.

Either way, do not inline the same SVG a hundred times into the markup. It is the fastest option for one critical icon above the fold and the slowest for everything else, because none of it can be cached separately from the page.