Doodling with the Mac’s command icon – alexwlchan

The command key (⌘) has been a ubiquitious part of the Mac for over forty years. It was chosen by legendary icon designer Susan Kare, who picked it from a symbol dictionary – this shape was already being used in Sweden to highlight an interesting feature on a map. It’s an abstract and pleasant shape, and can still be seen today on road signs and keyboards alike.

I spend a lot of time doodling shapes that look like the command icon. The original shape is quite easy to draw, and then I try variations like making the loops bigger or smaller, or changing the number of loops in the shape. While I’ve been bored and had a pen and paper, I’ve drawn dozens of little looped squares.

But part of the beauty of this symbol is the rotational symmetry, and that’s hard to capture that consistency in a free-hand sketch – at least one of my loops or lines would look different to the others. But computers are very good at drawing repetitive, symmetric shapes, so I wanted to see if I could draw the command icon and its variants in SVG.

I started with Susan Kare’s original pixel icon from System 1.0, and I tried to recreate that as an SVG path. I had to re-read the MDN tutorial on SVG arcs several times, but I did manage to write a <path> that reproduces the original icon as a smooth curve:

Leave a Comment