Free illustrated icons about web development, drawn and coloured by hand.



Here are some free illustrated icons that I have created in my spare time. I tore off a couple of pages from my beloved A3 hardback sketch book and threw some shapes down in ink using what came to mind first.

It’s nice to just draw without even thinking about it sometimes. Then a quick crayon scrub. I never seem to remember to try and stick to a colour palette. I get too eager! It took me about two hours to draw the illustrations and colour them with crayons. I didn’t use any pencil for drafting I went straight to the inking. I knew that the actual drawn sizes of the images would be greater than their preview on screen even if I drew them small. It’s great combining the knowledge of code and the childhood creativity. Really enjoying the time off work.

After adding as much light as possible to the desk area of my room, I took photographs with flash of the illustrations. It was night time.

These were taken on iPhone 6. Afterwards the editing work and the coding work took altogether about 4 to 6 extra hours. The scripts for the CSS transition I had already written for the footer of this website. So I just re-used the CSS animations with these new images. As for the code, I also wrapped them in a Bootstrap tooltip for the hover text. I am satisfied by how quick they were to create and code, but the actual blog post writing creating a new template for this page, editing, writing 300 words, fixing bugs and alignments is where all the spare time goes.

It’s funny how it takes more time to document the work than actually doing it.












A Photo of the illustrator Archibald Butler