Convert Simple Icon Designs from Paper Sketches to SVG Code
Tags: webdev, frontend, tutorial
Published: 2024-02-28 13:00:00

When building an app, we sometimes find ourselves needing an icon but don’t have one at hand. Perhaps it’s for a ‘back’ or ‘home’ button. Or maybe we need a star for a ‘favourite’ button. One option is to find one we need in any of the numerous available online resources, e.g. [Font Awesome](https://fontawesome.com/) or [Noun Project](https://thenounproject.com/). Another is to handcraft your own.

In this article, we’ll look at how you can impart your design skills not only in crafting your code, but also in your app’s icons too. Taking the example of a simple icon, we’ll go from sketching it on paper, all the way to creating an SVG of it.

## Sketching the Icon

First off, we need some grid-lined or dotted paper to work on. If you don’t have any, there are many websites you can download graph paper from to print.

In this example, we’ll create an arrow pointing leftwards. You can see our design in Image 1. The gridlines are faint but note that all corners of the arrow occur at where they cross. This is important because it will make the translation to SVG much easier.

![An outline of an arrow pointing leftwards overlaid on a grid](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v647tsed29s5d45w4gsd.png)

<figcaption>
Image 1: The initial icon design
</figcaption>

## Transferring to SVG

### Adding Boilerplate Code

Now we have our design, we can transcribe it as an SVG. The first step is to find the co-ordinates of each corner of the shape in our image. The origin point, i.e. (0,0) in an SVG is at its top-left corner. In image 2, we’ve added some numbers along the axes of our icon design to help.

![An outline of an arrow pointing leftwards overlaid on a grid with co-ordinates marked](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xjbgvxrytq0kzpzdvs05.png)

<figcaption>
Image 2: Our icon design with co-ordinates marked
</figcaption>

The following code is for a simple Web page; the part we’ll focus on is the `svg` tag and its contents.

``` html
<!doctype html>
<html lang="en-US">

<head>
  <title>SVG Demo</title>
</head>

<body>
  <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <path d="" stroke="#000"></path>
  </svg>
</body>

</html>
```

Breaking it down, our SVG:

* Has a width of `100`.

* Has a height of `100`.

* Declares itself and its contents to be in the SVG namespace `http://www.w3.org/2000/svg`.

It contains a `path` tag, which has two attributes:

* `stroke` defines the outline colour; this is currently `#000` (black).

* `d` defines the outline to be drawn. We’ll add data for our arrow icon here.

### Transcribing the icon

Let’s think about how we drew the icon on paper. The process will be difficult to follow when described with words, but the steps are also visualised in Image 3.

1. We first moved our hand (with the pen off the page) to a point on the page.

2. We then put the pen tip to the page and drew a diagonal line, moving upwards and rightwards.

3. Without lifting the pen, we then drew a vertical line downwards.

4. Then a horizontal line rightwards.

5. Then a vertical line downwards.

6. Then a horizontal line leftwards.

7. Then a vertical line downwards.

8. And finally, we finished the shape by closing our outline.

![An outline of an arrow pointing leftwards overlaid on a grid with key points marked](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lk9mjz1b2dppjg8ma6gl.png)

<figcaption>
Image 3: The stages involved in drawing the icon
</figcaption>

We can transcribe these steps using SVG path syntax and our grid co-ordinates.

1. **M**ove without drawing to (0,5).

2. From there, draw a **L**ine to (7,0).

3. Draw a **L**ine to (7,3).

4. Draw a **L**ine to (15,3).

5. Draw a **L**ine to (15,7).

6. Draw a **L**ine to (7,7).

7. Draw a **L**ine to (7,10).

8. The command for closing an open shape in SVG is **Z**. To help with remembering this, think of the last command in drawing our shape corresponding with the last letter of the alphabet.

Putting this together, we have:

```
M0,5 L7,0 L7,3 L15,3 L15,7 L7,7 L7,10 Z
```

Let’s enter this as our path data:

``` html
<path d="M0,5 L7,0 L7,3 L15,3 L15,7 L7,7 L7,10 Z" stroke="#000"></path>
```

### Adjusting the Icon Colour and Scale

When rendered in a browser, two things become apparent:

* The arrow’s body is coloured black.

* It’s rather small.

Luckily, these are easy to remedy. To change our arrow’s body colour, we only need specify its `fill`. We’ll use `#ff0` (yellow) in our example:

``` html
<path d="M0,5 L7,0 L7,3 L15,3 L15,7 L7,7 L7,10 Z" stroke="#000" fill="#ff0"></path>
```

To zoom into our icon, we can use the `viewBox` attribute. This takes four arguments, all based on its content:

* The leftmost co-ordinate.

* The topmost co-ordinate.

* The width of the content.

* The height of the content.

These need to be based on the co-ordinates within the image, rather than the actual size it’s displayed at. Looking at our data points, we can see:

* The leftmost point in our data is `0`. To ensure it is shown, we want the left co-ordinate of the `viewBox` to be `-1`.

* The topmost point is `0`. For it to be seen, we’ll use `-1` as the top co-ordinate for our `viewBox`.

* The rightmost point is `15`. To include it, we’d want the rightmost co-ordinate to be `16`. But because the `viewBox` starts at `-1` and we’re specifying total width, this becomes `17`.

* Our SVG has both a width and height of `100`. To preserve the 1:1 aspect ratio, that of our `viewBox` should also match: a width of `17` means the height should also be `17`.

Adding this to the markup will give us the following, which will produce results as shown in Image 4.

``` html
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"
     viewBox="-1 -1 17 17">
  <path d="M0,5 L7,0 L7,3 L15,3 L15,7 L7,7 L7,10 Z" stroke="#000" fill="#ff0">
  </path>
</svg>
```

![An arrow pointing leftwards, with a black outline and coloured yellow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yfq83p0vp2lagy82fuax.png)

<figcaption>
Image 4: Our SVG icon rendered in a browser
</figcaption>

## Summary

Raw SVG data can look complex. But the core data format is relatively simple, and transcribing an icon from a paper sketch can be a straightforward task.

By designing an icon on graph paper, you have a way of referencing co-ordinates of key points within it. With those, you can mimic the way it was drawn by using a series of commands in SVG markup. In addition, you can specify colours for the icon’s outline and fill.

Finally, you use the viewBox attribute to adjust both the icon’s position and scale to add the finishing touches.

---

Thanks for reading!

This article is from my [newsletter](https://webdeveloperdiary.substack.com/?sd=pf). If you found it useful, please consider subscribing. You’ll get more articles like this delivered straight to your inbox (once per week), plus bonus developer tips too!