Make your sites more accessible by setting max icon widths

How to make your sites just a little bit better, without much effort

Here's a quick usability tip: When using #SVG icons in your #HTML, please make sure to set an explicit max width on them.

Why? It is quite possible for users that only the markup will be loaded, due to an issue with the stylesheets (bad CDN, low-end hardware, unreliable network, etc).

If your icons don't take up the entire page the user will still be able to browse the markup and access at least some of your content.

Some context

For example, one of the news sites I often use has an intermittent problem with their CDN, so stylesheets won't load. I'm on a good computer with a fiber connection, and this still affects me. The news part of the site still work without styles, as the HTML loads, but I need to scroll very far down as there are about a dozen icons in the navigation menu that each take up the entire screen. If they had set a max width, this wouldn't have been as big of a problem.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
     class="icon icon-small" width="24" height="24">

Conclusion

In conclusion, a good way to design resilient websites is to make sure that they are still usable even without stylesheets.

This doesn't just apply to icons, but to all images and other elements that can take up a lot of space. It's a small thing that can make a big difference for some users!