3 Simple Steps to a Setting up an Icon Grid That Works

If you’ve ever scoured the internet researching icon grids, you may have seen extremely overdone examples that look more like a puzzle than a usable grid.

Unfortunately these examples are used far too often and though they do have some validity, it’s common to assume they were made before the design was complete.

Complex grids are the result of alignment work after an initial icon has been worked up. The final grid is simply showing how the designer aligned everything to make the final product.

Grids do not have to be difficult. In fact, when it comes to icon sets, you’re putting more unnecessary limitations on your work the more complex you make the grid.

Let’s walk through three simple steps for setting up a basic icon grid. This grid will not only allow you to get started quickly, but I hesitated to even call it basic. I’ve made entire icon sets with this simple grid system and I know you can do the same.

1. Use Custom Guides as a Base

To get started, you’ll need to learn how to create custom guides that are not limited to lines spanning the entire canvas.

Also take note that there is a distinct advantage to using guides rather than drawing shapes, because guides can be locked and will remain on top of your work at all times. They also remain thin and stay out of your way, unlike shapes with outlines.

To begin, make a box the full size of your icon with an outline so you can start to see what the guides will look like.

In this example I’m making a 128x128px icon set.

 

icon-grid-blog-step-1

 

Next, draw lines that represent the center points of your icon. This simple step will come in handy as you begin to work with multiple icons and need to center multiple objects.

 

icon-grid-blog-step-2

 

At this point, it’s safe to convert this base layer to guides. If you’re using Illustrator, select the two lines and the box, then go to View > Guides > Make Guides to convert them.

This basic grid will serve you well, but there are a few more types of icons to consider, so let’s cover those.

2. Determine the Ideal Minimum Width and Height

All subject matter does not allow for a perfect width and height. In fact, most of the time there will be more varying icons than uniform square icons.

To plan for those, it’s a good idea to determine your ideal minimum width and minimum height. It’s important to note here you’re looking for sizes that should fit the majority of icons in a set. It’s nearly impossible to make sure every icon fits the mold.

Once you have your ideal minimums planned, it’s time to add them to the grid.

Make a rectangle within the grid that denotes the minimum width.

 

icon-grid-blog-step-3

 

Now do the same for the minimum height.

example pic

Finally, convert both to guides by going to View > Guides > Make Guides again.

Now you can deal with icons that lend themselves to being taller or wider than most other icons.

3. Build a Circle Buffer

Some icons are in the form of a circle or have rounded areas. This is where we get into something a bit more complex, but it the extra layer of polish it adds to your icon sets is worth the effort.

Here are two examples. One of these shape sets uses the circular buffer, and the other doesn’t.

 

icon-grid-blog-step-5

 

As you can see, a slight modification goes a long way it making your icons flow together.

The trick is to allow rounded objects more room that hard edge objects. That sounds easy enough, but there are a few things to consider when beginning this process:

  • You’ll need to be consistent across the set
  • The icon box size (128x128px in this case) cannot change for any reason.
  • This new addition to the grid will determine a new max width and height for square or rectangular icons

These considerations might change a few things about our original grid. For example, you may want to change the min-width or min-height guides created earlier to compensate for this adjustment. Although, I typically don’t find that to be necessary.

To begin, copy the grid you’ve made so that you have two grids side-by-side. If the grid is locked and cannot be moved, go to View > Guides > Lock Guides to toggle the locked state of the grid.

In one box, draw a circle that fills the entire square. In the other, draw a box that fills the entire square.

 

icon-grid-blog-step-6

 

Now, hide the guides by going to View > Guides > Hide Guides. It’s time to do some visual adjustments.

Because the circle cannot increase in height or width, we’ll need to make adjustments to the square. As you change it’s size proportionally, you’ll start to see a balance happening.

Once you’re happy with this balance, leave the shapes as they are and unhide the guides.

Delete the circle and select the square you’ve drawn. Convert it to guides, and just like that you have a buffer for circular objects.

 

icon-grid-blog-step-7

 

This simple grid will stand up to the basic layout of an entire icon set. Of course there will be special situations where visual adjustments need to be made, but more often than not, this system works great.

I hope you’ll begin to implement this into your icon set projects. It not only removes a lot of frustration as the set grows, but also allows for easier expansion later on.

 

Can I send you something?

The Icon Designer's Handbook has radically changed the way many UI/UX designers approach icon design and I hope it will be valuable for you as well.

Cart

Your cart is currently empty.

Your cart is currently empty.

Return To Shop