svg

Why not make your own SVG icons?

last modified at 2024-12-02by Jonas Brems

Here are some SVG icons:

What these icons have in common is that they are incredibly easy to make yourself!

In fact, they are so easy to make that I will just put their code here, and I am confident you will understand it without any additional information.

<svg width="40" height="40" viewBox="0 0 10 10">
  <line x1="1" y1="2" x2="9" y2="2" stroke="goldenrod" stroke-linecap="round" />
  <line x1="1" y1="5" x2="9" y2="5" stroke="goldenrod" stroke-linecap="round" />
  <line x1="1" y1="8" x2="9" y2="8" stroke="goldenrod" stroke-linecap="round" />
</svg>

<svg width="40" height="40" viewBox="0 0 12 12">
  <circle cx="6" cy="6" r="5" stroke="goldenrod" fill="none" />
  <line x1="4" y1="6" x2="8" y2="6" stroke="goldenrod" stroke-linecap="round"/>
  <line x1="6" y1="4" x2="6" y2="8" stroke="goldenrod" stroke-linecap="round"/>
</svg>

<svg width=40 height=40 viewBox="0 0 10 10">
  <circle cx="5" cy="4" r="2" stroke="goldenrod" fill="none" />
  <rect x="2" y="4" width="6" height="4" rx="1" fill="goldenrod" />
</svg>

ViewBox

One thing that might be slightly confusing is the viewBox.

The viewBox defines the raster on which the elements of the SVG will be placed.

The four numbers represent the origin coordinate's X and Y values (often 0 0), the width, and the height of the viewBox.

A viewBox of 0 0 10 10 will generate a raster with origin coordinates (0, 0), 10 columns (width) and 10 rows (height).

0 1 2 3 4 5 6 7 8 9 10 0 1 2 3 4 5 6 7 8 9 10

Within this viewBox you can define the components that make up your SVG.

<svg width="40" height="40" viewBox="0 0 10 10">
  <line x1="1" y1="5" x2="4" y2="3" stroke="goldenrod" stroke-linecap="round" />
  <line x1="1" y1="5" x2="9" y2="5" stroke="goldenrod" stroke-linecap="round" />
  <line x1="1" y1="5" x2="4" y2="7" stroke="goldenrod" stroke-linecap="round" />
</svg>
0 1 2 3 4 5 6 7 8 9 10 0 1 2 3 4 5 6 7 8 9 10 (1, 5) (4, 3) (4, 7) (9, 5)

The viewBox is only used to define the position of the components on the raster. In our example the lines are positioned on a 10px by 10px raster but are scaled to a 40px by 40px icon due to the width and height values of the SVG.

Edge values

You might have noticed that all icon definitions stay at least 1 viewBox unit away from the edge of the viewBox.

This is because strokes are centered around their path. A horizontal line with Y = 5 will be drawn from half a unit above to half a unit below the Y5 line. A line on the Y0 line will therefor lose half of its width.

Also, the stroke-linecap (the rounded endings of the line) are drawn half a unit past the line's endpoints.

<svg viewBox="0 0 10 10">
  <line x1="1" y1="0" x2="9" y2="0" stroke="goldenrod" stroke-linecap="round" />
  <line x1="0" y1="2" x2="8" y2="2" stroke="goldenrod" stroke-linecap="round" />
  <line x1="1" y1="4" x2="9" y2="4" stroke="goldenrod" stroke-linecap="round" />
</svg>
0 1 2 3 4 5 6 7 8 9 10 0 1 2 3 4 5

Paths

If you are worried about the size of the SVG element in the HTML file or you just dislike repeating the same stroke and stroke-linecap rule over and over again, you can use a path element which uses a sort of encoding to define lines, arcs, and curves.

Certain animations can also require you to use a path instead of separate lines, circles, or rectangles.

You can learn more about the SVG path element in this MDN tutorial.

<svg width="40" height="40" viewBox="0 0 10 10">
  <path d="M1 2h8M1 5h8M1 8h8" stroke="goldenrod" stroke-linecap="round" />
</svg>

<svg width="40" height="40" viewBox="0 0 12 12">
  <path d="M6 1A5 5 1 0 0 6 11M6 1A5 5 0 0 1 6 11M4 6h4M6 4v4" stroke="goldenrod" stroke-linecap="round" fill="none" />
</svg>

Since you cannot draw complete circles with the arc syntax, we draw 2 semicircles instead.

Q & A

Q: Where is the XML namespace (xmlns="http://www.w3.org/2000/svg")?

A: When using SVG elements in an HTML5 context you do not need to specify the namespace.

Q: Why are all icons defined as squares?

A: This is personal preference. It preserves the width and height of the SVG element when rotating the icon (at least when rotating by steps of 90 degrees).

vs