Hand-coded Icons

Path Optimization

Do your best to write your SVGs with the least amount of code possible. For example, an “X” symbol,

Could be writen in the following ways:

<line x1="25" y1="25" x2="75" y2="75" />
<line x1="25" y1="75" x2="75" y2="25" />

<path d="M25,25 75,75" />
<path d="M75,25 25,75" />

<path d="M25,25 75,75 M75,25 25,75" />

Similarly, a rounded rectangle,

Could be written in a number of different ways as well:

<rect x="25" y="25" width="50" height="50" rx="8" ry="8" />

<path d="M25,33 a8,8 0 0 1 8,-8 H67 a8,8 0 0 1 8,8 V67 a8,8 0 0 1 -8,8 H33 a8,8 0 0 1 -8,-8z" />

Even if the path version was shorter, you might opt for using the rect for legibility, or because it’s easier to code.

Taking pains to write your code as simply and short as possible will help keep your file size down.

Close Icon

Menu Icon

Helm Icon

More Icon (Vertical Ellipsis)

Notification Icon

Arrow Icon

Circle

The arc path formula to draw a full circle is:

M(cx - radius),cy
a(radius),(radius) 0 0 0 (radius * 2),0
a(radius),(radius) 0 0 0 -(radius * 2),0

The rotation, arc, and sweep flags must be identical for both arcs. So converting a circle at cx="15" and cy="45" with a 12 pixel radius would be:

M3,45
a12,12 0 0 0 24,0
a12,12 0 0 0 -24,0

<path d="M3,45a12,12 0 0 0 24,0a12,12 0 0 0 -24,0" />

Egg

<path d="m19,59 a30,34 0 0 0 66,0a10,17 0 0 0 -66,0" />

Crescent

<path d="m16,13 a47,47 0 1 1 0,74a38,38 0 1 0 0,-74z" />

Torus

<svg width="200" height="200" viewBox="0 0 100 100" fillRule="evenodd">
  <path d="M5,50a45,45 0 0 0 90,0a45,45 0 0 0 -90,0M30,50a20,20 0 0 0 40,0a20,20 0 0 0 -40,0" />
</svg>