# How to Create a Hanukkah Themed Icon Pack in Adobe Illustrator

In today’s tutorial we’re going to break away from the regular stuff that we've done in the past and tackle something different, even special you may say, since we’re going to recreate some iconic objects and symbols from the Jewish holiday of Hanukkah.

That being said, if you’re a proud kippah owner, put it on and get ready for a touch of awesomeness.

Oh, and don’t forget you can always expand the project by heading over to GraphicRiver where you can find some awesome Hanukkah themed icon packs waiting to be grabbed.

## 1. How to Set Up a New Document

Since I’m sure that you already have Illustrator up and running in the background, bring it up and let’s set up a New Document (File > New or Control-N) using the following settings:

• Number of Artboards: 1
• Width: 800 px
• Height: 600 px
• Units: Pixels

• Color Mode: RGB
• Raster Effects: Screen (72ppi)
• Preview Mode: Default

Quick tip: some of you might have noticed that the Align New Objects to Pixel Grid option is missing, which is because I’m running the new CC 2017 version of the software, where great changes have been made to the way Illustrator handles the way shapes snap to the underlying Pixel Grid.

## 2. How to Set Up a Custom Grid

Since we’re going to be creating the icons using a pixel-perfect workflow, we’ll want to set up a nice little Grid so that we can have full control over our shapes—that is if we’re running the older version of the software.

### Step 1

Go to the Edit > Preferences > Guides & Grid submenu, and adjust the following settings:

• Gridline every: 1 px
• Subdivisions: 1

### Step 2

Once we’ve set up our custom grid, all we need to do in order to make sure our shapes look crisp is enable the Snap to Grid option found under the View menu, which will transform into Snap to Pixel each time you enter Pixel Preview mode.

Now, if you’re new to the whole “pixel-perfect workflow”, I strongly recommend you go through my how to create pixel-perfect artwork tutorial, which will help you widen your technical skills in no time.

## 3. How to Set Up Layers

With the new document created, it would be a good idea to structure our project using a few layers, since this way we can maintain a steady workflow by focusing on one icon at a time.

That being said, bring up the Layers panel, and create a total of four layers, which we will rename as follows:

• layer 1: reference grids
• layer 2: dreidel
• layer 3: sufganiyot
• layer 4: menorah

## 4. How to Create Reference Grids

The Reference Grids (or Base Grids) are a set of precisely delimited reference surfaces, which allow us to build our icons by focusing on size and consistency.

Usually, the size of the grids determines the size of the actual icons, and they should always be the first decision you make on you start a new project, since you’ll always want to start from the smallest possible size and build on that.

Now, in our case, we’re going to be creating the icon pack using just one size, more exactly 128 x 128 px, which is a fairly large one.

### Step 1

Start by locking all but the reference grid layer, and then grab the Rectangle Tool (M) and create a 128 x 128 px orange (#F15A24) square, which will help define the overall size of our icons.

### Step 2

Add another smaller 120 x 120 px one (#FFFFFF) which will act as our active drawing area, thus giving us an all-around 4 px padding.

### Step 3

Group the two squares composing the reference grid using the Control-G keyboard shortcut, and then create two copies at a distance of 40 px from one another, making sure to align them to the center of the Artboard.

Once you’re done, lock the current layer and move on to the next one where we’ll start working on our first icon.

## 5. How to Create a Dreidel Icon

We’re going to kick off the project by creating the little wooden toy that normally bears the four Hebrew letters  נ (Nun), ג (Gimmel), ה (Hey), and ש (Shin), only we’ll going to be presenting just the third one. That being said, make sure you’re on the right layer (that would be the second one) and then zoom in on the first reference grid so that we can get started.

### Step 1

Create the main shape for the Dreidel’s body using a 64 x 80 px rectangle (#BA8258) which we will adjust by setting the Radius of its top corners to 2 px and its bottom ones to 32 px from within the Transform panel. Position the resulting shape by center aligning to the bottom edge of the underlying active drawing area, at a distance of 4 px.

### Step 2

Switch over to Pixel Preview mode (Alt-Control-Y), and start working on the tip by clicking on it using the Add Anchor Point Tool to make it pointier, and then adjusting its side curves by first smoothening them out using the Convert selected anchor points to smooth tool, and then playing with their handles.

### Step 3

Give the resulting shape an outline using the Offset Path method, by first selecting it and then going to Object > Path > Offset Path and entering 4 px into the Offset value field.

### Step 4

Change the color of the outline that we’ve just created to #54423E so that it can stand out from the front fill shape, selecting and grouping the two together using the Control-G keyboard shortcut afterwards.

### Step 5

Create the front section of the toy using a 64 x 62 px rectangle (#E0A26E) which we will adjust by setting the Radius of its top corners to 2 px and its bottom ones to 32 px. Give the resulting shape a 4 px thick outline (#54423E) and then group (Control-G) and position the two over the larger body, center aligning them to the outline’s top edge.

### Step 6

Start working on the little Hey symbol, by creating a 28 x 8 px rectangle which we will color using #54423E and then center align to the Dreidel’s body, at a distance of 14 px from its outline.

### Step 7

Select the shape that we’ve just created, and start adjusting it by setting the Radius of its right corners to 2 px and its bottom-left one to 4 px.

### Step 8

Using the Rectangle Tool (M) add a 4 x 4 px square (#54423E) which we will position above the shape that we created in the previous steps, aligning it to its left side, and then adjust it by setting the Radius of its top-left corner to 4 px.

### Step 9

Finish off the upper section of the symbol by creating an 8 x 8 px circle (#54423E), which we will adjust by selecting its top and right anchor points using the Direct Selection Tool (A) and then deleting them by pressing Delete. Unite the remaining anchors using the Pen Tool (P) and then select all the symbol’s shapes and group them using Pathfinder’s Unite Shape Mode.

### Step 10

Create the symbol’s left stem using an 8 x 18 px rectangle (#54423E) which we will adjust by setting the Radius of its top-left and bottom-right corners to 8 px, positioning the resulting shape underneath the shape that we’ve created in the previous steps, at a distance of 4 px.

### Step 11

Create the right stem using an 8 x 22 px rectangle (#54423E) which we will adjust by setting the Radius of its top-left corner to 4 px and its bottom one to 8 px, positioning the resulting shape right underneath the symbol’s top section, at a distance of 2 px from its right edge.

Then, once you’re done, select and group all three shapes together using the Control-G keyboard shortcut, doing the same for the dreidel’s composing shapes afterwards.

### Step 12

Finish off the dreidel by adding the little handle using a 12 x 28 px rectangle (#BA8258) which we will adjust by setting the Radius of its top corners to 2 px. Give the resulting shape a 4 px outline (#54423E) and then group (Control-G) and center align the two to the upper section of the toy’s body.

As always, before you move on, don’t forget to select and group all the icon’s composing shapes together using the Control-G keyboard shortcut.

## 6. How to Create a Sufganiyot Plate Icon

Assuming you’ve already locked the previous layer and moved on to the next one, zoom in on the second reference grid, and let’s start working on our little Sufganiyot plate.

### Step 1

Create the main shape for the plate’s body using a 112 x 112 px circle, which we will color using #82705B, giving it a 4 px thick outline (#54423E). Group the two shapes (Control-G) and then position them by aligning them to the center of the underlying active drawing area.

### Step 2

Add a little detail line to the center of the plate by creating a 104 x 104 px circle (#54423E) from which we will cut out a smaller 100 x 100 px one using Pathfinder’s Minus Front Shape Mode.

### Step 3

Create the center darker section of the plate using a 48 x 48 px circle (#725F4C) with a 4 px thick outline (#54423E), which we will group (Control-G) and then center align to the larger underlying body.

### Step 4

Create the Star of David using an 18 x 15 px rectangle (#54423E) (1), which we will adjust by adding a new anchor point to the middle of its top edge using the Add Anchor Point Tool (+), removing the side ones afterwards (2).

Flip the resulting shape’s fill with its stroke (Control-X), setting its Weight to 2 px and making its Cap and Corner round (3). Once you’re done making the adjustments, create a copy of the shape (4) which we will flip horizontally (right click > Transform > Reflect > Horizontal) and then push to the bottom by 5 px (right click > Transform > Move > Vertical > 5 px) (5). Finally, group (Control-G) the two shapes together and then center align them to the plate’s darker section.

Since we’re pretty much done working on the plate, you can do the same with its composing shapes.

### Step 5

Start working on the first sufganiyah, by creating a 36 x 36 px circle, which we will color using #FFBB71 and give a 4 px thick outline (#54423E). Then group (Control-G) and position the two by center aligning them to the upper edge of the plate’s outline.

### Step 6

Add the jelly filling by creating a 4 x 4 px circle (#E87552) with a 4 px thick outline (#54423E) which we will group (Control-G) and then center align to the doughnut's body.

### Step 7

Finish off the doughnut by adding the powdered sugar using a bunch of 2 x 2 px circles which we will color using #FFE3C5. Take your time, and once you’re done make sure to group the circles together using the Control-G keyboard shortcut, repeating the same process for the doughnut's composing shapes afterwards.

### Step 8

Create the second sufganiyah using a copy of the one that we’ve just made (Control-C > Control-F) which we will position onto the lower-left side of the plate, at a distance of 4 px from the original.

Also you can give the duplicate a different feeling by flipping it either horizontally or vertically (right click > Transform > Reflect > Horizontal or Vertical depending on what you decide to go with) so that they won’t end up looking exactly the same.

### Step 9

Add the third and last doughnut, using a second copy of the original (Control-C > Control-F) which we will position onto the right side of the plate, positioning it 16 px from the top one and 12 px from the left one.

Once you’re done, don’t forget to select all the icon’s composing shapes and group them together using the Control-G keyboard shortcut.

## 7. How to Create a Menorah Icon

We are now down to our third and last icon of the project, so assuming you’ve already learned the drill, zoom in on that third reference grid, and let’s get started.

### Step 1

Create the main shape for the Menorah’s base using a 40 x 4 px rectangle, which we will color using #FCC96D, give a 4 px thick outline (#54423E) and then center align to the bottom edge of the underlying active drawing area.

### Step 2

Using the Rectangle Tool (M) add a 40 x 2 px horizontal detail line to the center of the shapes that we’ve just created, coloring it using #54423E.

### Step 3

Add the base’s side sections using two 2 x 8 px rectangles (#54423E) which we will vertically center align using the Align panel, selecting and grouping (Control-G) all its shapes afterwards.

### Step 4

Create the base’s round back section using a 28 x 16 px ellipse which we will color using #DDA654 and then adjust by removing its bottom half by selecting its bottom anchor point with the Direct Selection Tool (A) and then pressing Delete. Unite the resulting path using the Control-J keyboard shortcut, and then give it a 4 px thick outline (#54423E), grouping (Control-G) and positioning the two behind the base’s lower section (right click > Arrange > Send to Back).

Once you have them in place, select all the base’s composing shapes and group (Control-G) those as well.

### Step 5

Create the Menorah’s central spine, using a 2 x 72 px rectangle (#DDA654) with a 4 px thick outline (#54423E) which we will center align to the base, positioning them so that the outlines end up overlapping.

### Step 6

Start working on the main shapes for the first set of arms by creating a 26 x 26 px circle (#DDA654) from which we will cut out a smaller 22 x 22 px one, center aligning the resulting shape to the spine and positioning it 23 px from the underlying active drawing area’s top edge.

### Step 7

Create the second set of arms using a 54 x 54 px circle (#DDA654) from which we will remove a smaller 50 x 50 px one, center aligning the resulting shape to the shape from the previous step.

### Step 8

Create the third set of arms using an 82 x 82 px circle (#DDA654) from which we will cut out a smaller 78 x 78 px one, center aligning the resulting shape to the previously created ring.

### Step 9

Create the main shapes for the fourth and last set of arms using a 110 x 110 px circle (#DDA654) from which we will cut out a smaller 106 x 106 px one, center aligning the resulting shape to the previous ring.

### Step 10

Once you have all four rings in place, take your time and remove the top half from each one of them, by placing a big enough rectangle (highlighted with orange) on top, and then using Pathfinder’s Minus Front Shape Mode to cut it out from the underlying shape.

### Step 11

Assuming you’ve finished removing the upper halves, give each of the resulting shapes a 4 px thick outline, making sure to change their color to #54423E.

### Step 12

Since we’ll want the arms to look as if they were connected with the spine, we’ll have to select their outlines, and send them to the back by right clicking > Arrange > Send to Back.

Once you do that, it would be a good idea to select and group (Control-G) the spine and its arms so that they won’t get separated by accident.

### Step 13

Create the main shapes for the Menorah’s center candle using a 2 x 16 px rectangle (#FFE1BD) with a 4 px thick outline (#54423E) which we will position on top of the central spine, making sure their outlines overlap.

### Step 14

Add a 12 x 4 px rectangle (#54423E) to the base of the candle’s outline, and another 4 x 2 px one (#54423E) above it, selecting and grouping (Control-G) all its composing shapes afterwards.

### Step 15

Using copies (Control-C > Control-F) of the candle that we’ve just finished creating, add the remaining ones so that each arm ends up having one.

### Step 16

With the candles in place, create the main shapes for the front decorative plate using a 30 x 22 px ellipse (#FCC96D) with a 4 px thick outline (#54423E) which we will group (Control-G) and then align to the center of the Menorah, at a distance of 31 px from its base.

### Step 17

Grab a copy (Control-C) of the Star of David that we created for the second icon, and paste it (Control-F) onto the third reference grid, center aligning it to the Menorah’s decorative plate.

Once you have it in place, you can group (Control-G) it to the plate so that they won’t get separated by accident.

### Step 18

Finish off the icon by adding the smaller decorative plate using a 6 x 4 px ellipse (#FCC96D) with a 4 px outline (#54423E), which we will group (Control-G) and then align to the center of the Menorah’s fourth arm, at a distance of 12 px from its base.

Once you have the piece in place, select all the icon’s composing shapes and group those as well.

## That’s It!

There you have it—a really easy and pretty straightforward process for creating your very own Hanukkah themed icon pack using nothing more than the basic tools and shapes that you probably already work with on a regular basis.

I hope you found the steps easy to follow and most importantly learned something new and useful along the way.

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.