I was not prepared for this journey. Figuring out an icon set led me to rethink some preconceived notions. Those of design, performance, and accessibility I will talk about these but first, let’s document what happened.
My Experience Using Astro Icon
This is a great tool as it will embed inline SVG for you
I wanted this to work for me. Yet, it was not meant to be. Installing was easy enough. Playing around, I was able to get the icons to load.
My issue was that the icons would not obey my CSS. I used them in a horizontal navigation with my social profiles. For the life of me, I could not inline the unordered list items.
The blog no longer has a social menu. I have a personal website instead with all my profiles.
Trying Font Awesome
My next move was working with Font Awesome. This popular icon font has hundreds of free glyphs. This is a front-end developer’s go-to resource. So I went.
I decided not to use it for the following reasons.
Why I’m No Longer Using Icon Fonts
I mentioned there were three considerations at the start of this chapter. These are my thoughts.
How many icons do you need? Some websites use icons in only a few ways. Also, they are loading all the icons. Even the ones that you are not using. Making them rather large. You don’t need to load a whole library.
There is one thing that I’ve learned from Google’s PageSpeed Insights. Render-blocking resources slow down the loading of your website. Adding Font Awesome styles or scripts block the download until processed.
It is easy to drop an icon using one of these fonts. We may forget that accessibility is something we still need to care about. There are a few patterns that you can use for SVG elements. It is not added as part of an icon font.
Straight up, inline your SVG if you are going to only use a few. This reduces HTTP requests. Don’t forget to add the markup for accessibility.
There are some other ways to load SVG that could apply to your specific situation. This answer from Stack Overflow covers many of the use cases. It gives you strategies depending on the size of your files and how many you have.
You can add icons yourself if you can’t get Astro-Icon to work. Or if that is your preference. Iconify will give you an option to copy the code for an inline SVG. You don’t need to download anything to use them.