Free Tailwind CSS components: yieldui.com

Turning simple shapes into complex shapes

Dom Habersack
Dom HabersackMay 19, 2021

As I’m drawing more icons for my icon set, I want to share some tips on how you can learn to do the same. I never considered myself much of an artist. The icons are coming out much nicer and cuter than I thought I’d be capable of. It doesn’t take a lot of experience if you know how to use a few tricks.

Most of the icons I draw are made up of simple shapes. Let me walk you through the steps that lead up to a “stack of coins” icon.

Step 1: Draw a 24×24px canvas.

A 24*24px canvas.
A 24*24px canvas.

I draw all icons on a canvas of the same size. Limiting the available space helps me keep them at the same level of detail.

Step 2: Make the outer 2px a “safe area”.

Guides showing the outer 2px around the edges.
Guides showing the outer 2px around the edges.

For most icons, I avoid drawing on the outer 2px along the edges. That gives the icons some padding, and me some extra space in case an icon needs it. If one doesn’t work in the inner area alone, it can bleed into the safe area a little. The icon we’re drawing here fits into the inner area.

Step 3: Draw two 8×4px ellipses.

The first two ellipses on the canvas.
The first two ellipses on the canvas.

We start at the base of the stacks with two ellipses. Let’s leave some space between them horizontally.

Step 4: Cut off the top halves of the ellipses.

The ellipses with their top halves cut off.
The ellipses with their top halves cut off.

Because the coins at the bottom will be covered by others stacked on top of them, we cut off the parts we can’t see.

Step 5: Duplicate the half-ellipses a few times.

A few copies of the half-ellipses stacked.
A few copies of the half-ellipses stacked.

We add layers to the stacks by duplicating these half-ellipses a few times. By using different amounts of copies, we give the stacks different heights.

Step 6: Add two full 8×4px ellipses to the top of the stacks.

The stacks are topped off with a full ellipse each.
The stacks are topped off with a full ellipse each.

Because the top two coins are fully visible, be add two complete 8×4px ellipses at the top.

Step 7: Draw four vertical lines along the edges of the stacks.

Two vertical edges for each stack.
Two vertical edges for each stack.

By adding edges to the stacks, the individual lines start looking like stacks of coins.

Step 8: Cut out an 8×8px circle in the center between the stacks.

A circular spot cut out of the stacks.
A circular spot cut out of the stacks.

Next, we need to cut out an 8×8px circle in the center between the two stacks. That’s where we want to put a single sideways facing coin. If we didn’t cut out this part, the stacks would be visible through that coin.

Step 9: Draw an 8×8px circle in the spot we just cut out.

A coin in place of the empty spot we cut out before.
A coin in place of the empty spot we cut out before.

With the space for it empty, we can now add the sideways facing coin in that middle spot.

Step 10: That’s it, you’re done!

The finished result.
The finished result.

There are no more steps, our stacks of coins are complete.

We turned with a few ellipses, four lines, and a circle into stacks of coins. I found that once you know what to look for, it becomes a lot easier to see how icons are created.

The rest of my icons follow very similar rules. That speeds up the process of creating new icons and helps them follow a consistent style. The set is still not complete yet, but it’s constantly growing!

If you want to get into drawing icons and want to know the steps behind some of the others, hit me up! I’d be happy to create walkthroughs like this for a few more icons.

– Dom

Continue reading

#72January 20, 2021

Introducing Lovelicons

I am working on a set of 200+ icons that will be free for personal use. The paid version will include benefits that I have not defined yet.

Read all issues →