Coding SVG icons by hand

Creating icons and simple figures by handcrafting SVG code is not as hard as it sounds.

Aleksandr Hovhannisyan has written a good primer on the topic called SVG Tutorial: How to Code SVG Icons by Hand.

Here's a quick Moomintroll that I created using my new and refreshed SVG skills:

Code:

<svg
  viewBox="0 0 24 24"
  style="
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
  "
>
  <!-- Body -->
  <path
    d="
      M 1 23
      s 3 -35.5 7 -16
      h 3
      s 3 -15 5 3
      a 7 6 0 1 1 -7 8
    "
    fill="none"
  />

  <!-- Left eye -->
  <circle cx="8"   cy="12"   r="2"   fill="none" stroke-width="0.5" />
  <circle cx="8.5" cy="11.5" r="0.5" />

  <!-- Right eye -->
  <circle cx="13"   cy="12"   r="2"   fill="none" stroke-width="0.5" />
  <circle cx="13.5" cy="11.5" r="0.5" />
</svg>

I used smooth cubic Bézier curves (not covered in Aleksandr's article) which required some trial and error. But look how lovely he is!

Read Aleksandr's SVG Tutorial and start coding icons by hand!