Web icons in 2021
It's 2021. We made it! We're only a few days in, and change takes time, but I hope your new year has started off well.
This issue will be all about icons. We'll look at the different options that you can consider, and why you really should be using SVG in 2021.
In modern web apps icons are heavily leaned on by designers to convey state, functions, or actions. Even if you've got a simple website you'll most likely want to include some links to social media platforms, or maybe contact information. Icons come in handy here too, making content & links stand out visually from the rest of the page. The strategies I cover in this issue are best suited to websites that need just a few icons sprinkled around the site rather than larger web apps (which tend to lean more heavily on icons).
Like many things in web development, you've got a few options if you need to add icons to your website:
- Use raster images (like PNG)
- Use a CSS sprite (when you create a single image file containing all the icons you need, then load them by manipulating the image position in CSS)
- Use an icon font (like Font Awesome)
- Use SVGs
Raster Images & CSS Sprites
Using raster images, either as a single file or through a CSS sprite, has one major drawback. Due to the nature of raster images, they don't scale very well. This might not be a problem if the icons on your site will be a fixed size across all displays. However, you'll reach a point where the image starts to pixelate the moment you need to adjust the size in either direction.
Another drawback of using raster images is that they result in more requests on the network, which can slow down site performance (especially if you use them at the top of your page). CSS sprites solve this somewhat because only a single file is downloaded & then reused repeatedly. Images do allow you to utilise caching to speed things up for repeat visitors.
To use raster images for icons on your site you load them like you would any other image, using the
<img> HTML tag. If you'd like to use a CSS sprite instead there's a good beginners guide on CSS Tricks.
If you've been in web development for any length of time you've probably used an icon font at some stage. They offer more flexibility when compared to raster images, especially since they can be controlled by the same CSS properties that govern regular fonts.
The CSS files that power most icon fonts are hosted on CDNs. You link to these fairly early on in your HTML document (especially if you're using icons above the fold). Once upon a time this did mean that more popular icon font libraries benefited from caching, but that is no more a thing. Being hosted externally means the requests for these font files go cross-origin (to another domain that's not our own), and open us up to a host of issues that third-party resources can cause (see Issue 2).
What's more, some browsers block custom fonts or just don't handle them well. This is hard to pick up in testing since you can't possibly test on every iteration of every browser. So, if the browser blocks the resource from loading, or there's a network failure somewhere along the line then your icons will be replaced by those empty little boxes you've no doubt seen from time to time.
SVG offers a lot of flexibility that raster images & icon fonts simply can't match. Firstly, and as the first word of the name suggests, they're scalable. That means that they'll look as crisp on smaller mobile screens as they do on a large 4K monitor.
They're also easier to manipulate, animate, and are far more accessible to screen readers & assistive technologies (especially when compared to icon fonts). You (or your graphics designer) can also easily create customised (or edit existing) SVG icons using tools like Adobe Illustrator or Figma.
Another benefit of SVG is that you can inline them directly into the HTML of your page (if you have access to that). This results in fewer network requests, which can help slightly speed up page loading performance. Of course that does add some extra weight to you HTML file. Using compression tools like SVGO (command-line tool) or SVGOMG (visual interface) allows you to minify your SVGs just like you would do to any other image.
There are also a lot of sources online that you use to find and download/copy the SVG icon code for free. I've listed a few good ones below that I often reach for:
You can even add SVGs to a sprite, and easily call them from within your code. Florens Verschelde has a really detailed rundown of how you can create & use SVGs as icons on your website which I strongly recommend you check out.
- CSS Sprites: What They Are, Why They’re Cool, and How To Use Them - CSS Tricks guide to using image sprites in CSS.
- Optimised #2 - Third-party resources - A cautionary tale - Issue 2 of this newsletter if you'd like a quick refresher on the perils of third-party resources.
- SVGO & SVGOMG - Command-line and visual tools you can use to minify SVGs.
- How to work with SVG icons - Florens Verschelde's detailed guide on how to create and use SVG icons on your website.
How to run a WebPageTest test
I'm including just one article this week, but boy is it a good one! Matt Hobbs has put together a comprehensive rundown of various options available when using WebPageTest to test for page performance. Definitely a resource worth bookmarking 🔖.
The next issue of Optimised will be in your inbox on January 22nd. In the meantime, I'd really appreciate it if you could share this email with a friend. As always if you've got any feedback or specific topics you want to be covered then just reply to this email.
Keep safe, stay well.