For my site DeepSID, I have recently had a project going where I wanted to show focus icons for folder rows in a song list. Each folder would represent a collection of songs by one composer. The focus icons would be solid circles with a letter in it and would indicate whether the composer was a professional (P), a scener (S), was on Compunet (C) or on Battle of the Bits (B).

The first version just used CSS to put a font letter inside a DIV rounded as a circle. However, the letter didn’t always align well within the circle. Sometimes Firefox and Chrome disagreed on the exact position. I had a session with ChatGPT about it and it suggested some clever centering of the letter, but it was never perfect. Especially when zooming the site in or out, the letters wobbled a bit.

I wasn’t satisfied with this, so I decided to go with SVG icons instead. I started searching for SVG icons on the internet, and I found three good circles with letters inside them on Pixabay. They looked really good on the site and I knew this was the way to go.

I particularly liked these icons because the circle and the letter were each their own path layer. This meant that I could specify a unique color for each of these layers.

Unfortunately, there were only icons for the S, C and B letters. The letter P wasn’t there. I thought about making it myself using one of the other SVG as a starting point, but I have never created an SVG before and I barely know what all those parameters in the file mean.