How to Create a Christmas-Themed Icon Pack in Adobe Illustrator

Believe it or not, Christmas is once again almost here, which means that as with every year, Santa is hard at work making preparations for one of the busiest nights of his life. That being the case, I thought I could lend him a hand and give you a nice little treat in the form of a Christmas-themed icon pack, which I’m sure you’ll love.

As always we’re going to be using the most basic of tools, so without wasting any more time, grab a bite out of that little cookie and let’s get started.

Oh, and don’t forget you can always expand the pack by checking out GraphicRiver, where you’ll find tons of Christmas-themed icons at the press of a button.

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

And from the Advanced tab:

• 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. That's because I’m running the new CC 2017 version of the software, where great changes have been made to the way Illustratorhandles 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, you’ll want to set up a nice little Grid so that you can have full control over our shapes—that is if you’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

Quick tip: you can learn more about grids by reading this in-depth piece on how Illustrator’s Grid System works.

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 the Layers

With the new document created, it would be a good idea to structure our project using a couple of 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: treats
• layer 3: presents
• layer 4: decorations

4. How to Create the Reference Grids

Thereference 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 when 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 a 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 the Treats Icon

We’re going to kick off the project by creating the milk and cookie treats that we would normally give Santa to help him during one of the hardest working nights of his life. 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

Select the Pen Tool (P) and use it to create a 102 px wide line segment with a 4 px thick Stroke and a Round Cap, which we will color using #332828 and then position onto the first active drawing area, aligning it to its bottom-left corner.

Step 2

With the first segment in place, create the smaller one using a 6 px wide line and the same Stroke values, which we will align to the bottom-right corner of the underlying active drawing area.

With both lines in place, select and group (Control-G) them so that they won’t get separated by accident.

Step 3

Create the main shape for the glass using a 52 x 116 px rectangle, which we will color using #83DBEA and then position at a distance of 18 px from the active drawing area’s left edge and 2 px from its top one.

Step 4 

Adjust the shape that we’ve just created by setting the Radius of its bottom corners to 12 px from within the Transform panel’s Rectangle Properties.

Step 5

Add the milk section, by creating a smaller 52 x 88 px rectangle (#EFEFEF) which we will adjust by setting the Radius of its bottom corners to 12 px and then position onto the blue shape, center aligning it to its bottom edge.

Step 6

Add the glass’s main outline using the Stroke method, by creating a copy (Control-C > Control-F) of its main body (the blue shape) which we will color using #332828 and then adjust by flipping (Shift-X) its Fill with its Stroke, setting its Weight to4 px.

Step 7

Using the Pen Tool (P), draw the horizontal outline separating the glass’s contents, by following the top edge of the milk’s white section, using a 4 px thick Stroke with the color set to #332828.

Once you’re done, select and group all of the glass’s composing shapes using the Control-Gkeyboard shortcut.

Step 8

Move a few pixels towards the right, and create the cookie’s main body using a 74 x 74 px circle, which we will color using #C6866F and then align to the bottom-right corner of the underlying active drawing area, leaving a 2 px gap around it for the outline.

Step 9

Add the cookie’s outline using the same process we used for the glass’s main body, setting the Stroke’s Weight to 4 px and its color to #332828.

Step 10

Start adding details to the cookie’s body by drawing in some little hazelnut crumbs with the help of the Pen Tool (P), which we will color using #F7D6B5, giving them the same 4 px thick outline (#332828) with a Round Join.

Individually group (Control-G) each fill shape with its outline, and then group (Control-G) all three crumbs together as well.

Step 11

Finish off the cookie by adding the little chocolate chips using a couple of different-sized circles (#332828), which we will want to group together using the Control-G keyboard shortcut.

Once you’re done, don’t forget to select all the cookie’s composing shapes and group (Control-G) those as well.

Step 12

Start working on the little thank-you note by creating its main body using a 40 x 30 px rectangle (#E0694C). Give the shape a 4 px thick outline (#332828) and then group (Control-G) and position the two onto the left side of the cookie, at a distance of 32 px from the active drawing area’s left edge.

Step 13

Create the inner detail line insertion using a 30 x 20 px rectangle (#332828), which we will adjust by flipping (Shift-X) its Fill with a 2 px thick Stroke center, aligning it to the underlying red shape afterwards.

Step 14

Using the Pen Tool (P), draw in the two dummy text lines using a 4 px thickStroke with the color set to #332828. Position the two lines 2 px from one another, and then group (Control-G) and center align them to the note’s main body, grouping (Control-G) all its composing shapes as well afterwards.

Once you’re done, don’t forget to do the same for the entire icon, since you wouldn’t want to deal with “disappearing” elements.

6. How to Create the Presents Icon

Assuming you’ve managed to finish the first icon, move on up to the next layer (that would be the third one), and let’s start working on the project’s second composing element.

Step 1

Before you lock the previous layer, quickly create a copy (Control-C) of the icon’s bottom line segment and paste it (Control-F) over onto the second reference grid.

Step 2

Create the main shape for the round present box using a 92 x 92 px circle, which we will color using #33AFBC and then position onto the top-right corner of the underlying active drawing area, leaving a 2 px gap around it for the outline.

Step 3

Add the little horizontal color stripes using 22 vertically stacked 92 x 2 px rectangles (#179AA0) positioned 2 px from one another, which we will group (Control-G) and then center align to the shape that we created in the previous step.

Step 4

Now, since we want the stripes to remain constrained within the surface of the circle, we’ll want to create a copy of the latter (Control-C), paste it (Control-F) in front of them, and use that as a Clipping Mask (right click > Make Clipping Mask).

Step 5

Create the main shape for the golden wrap using an 18 x 92 px rectangle which we will color using #E5BA5A and then vertically center align to the underlying circle, at a distance of 16 px from the active drawing area’s right edge.

Step 6

Using the Ellipse Tool (L), add a couple of different-sized circles (#D1A246) to the surface of the golden wrap, grouping (Control-G) and then masking them (right click > Make Clipping Mask) using a copy of the underlying rectangle if you need to.

Step 7

Give the golden rectangle a 4 px thick outline (#332828) and then group (Control-G) and mask all its composing shapes using the underlying circle as a Clipping Mask (right click > Make Clipping Mask).

Step 8

Create a small 8 x 8 px circle (#E5BA5A) with a 4 px outline (#332828), which we will group (Control-G) and center align to the larger underlying circle.

Step 9

Finish off the circular present box by giving it a 4 px thick outline (#332828), selecting and grouping (Control-G) all its composing shapes together afterwards.

Step 10

Create the main shape for the rectangular present box’s body, using a 64 x 48 px rectangle (#E0694C) with a 4 px thick outline (#332828), which we will group (Control-G) and then align to the bottom of the active drawing area, at a distance of 8 px from its left edge.

Step 11

Add the front body wrap using a 12 x 48 px rectangle (#71B769) with a 4 px thick outline (#332828) which we will group (Control-G) and then center align to the underlying red rectangle.

Step 12

Create the little name label using an 8 x 12 px rectangle (#E5BA5A) with a 4 px thick outline (#332828), which we will group (Control-G) and then center align to the present box’s right half, at a distance of 12 px from its outline.

Step 13

Using the Pen Tool (P), draw in the little string holding the label, using a 4 px thickStroke with the color set to #332828, grouping (Control-G) the two together afterwards.

Once you’re done, group all the rectangular present box’s shapes that we’ve created so far using the Control-Gkeyboard shortcut.

Step 14 

Create the lid of the present box using a 72 x 12 px rectangle (#E0694C) with a 4 px thick outline (#332828), which we will group (Control-G) together and then position on top of its lower body, center aligning the two.

Step 15

Add the lid’s wrapping tape using a 16 x 12 px rectangle (#71B769) with a 4 px outline (#332828), which we will group (Control-G) and then center align to the shape that we just created in the previous step.

Step 16

Create the center section of the ribbon using a 16 x 10 px rectangle (#59934E), which we will adjust by setting the Radius of its top corners to 4 px. Give the resulting shape a 4 px thick outline (#332828) and then group (Control-G) and position the two onto the lid, center aligning them to it.

Step 17

Create the left half of the ribbon’s bow using a 14 x 8 px rectangle (#59934E), which we will adjust by setting the Radius of its top-left corner to 4 px and then playing with its curvature. Give the resulting shape a 4 px outline (#332828) and then group (Control-G) and position the two onto the left side of the shape from the previous step.

Step 18

Create the ribbon’s right half using a copy (Control-C> Control-F) of the left one, which we will vertically flip (right click > Transform > Reflect> Vertical) and then position onto the opposite side of the center section.

Once you’re done, group all of the ribbon’s composing shapes together using the Control-G keyboard shortcut, and then do the same for the lid and the entire box.

Step 19

Create the main shape for the smaller present box using a 20 x 16 px rectangle, which we will color using #59934E, giving it a 4 px outline (#332828). Align the two shapes to the bottom edge of the underlying active drawing area, positioning them onto the right side of the rectangular present box.

Step 20

Using the Pen Tool (P), add four 2 px thick diagonal detail lines (#332828), grouping (Control-G) and then center aligning them to the green rectangle created in the previous step. Once you’re done, select all of the smaller present’s composing shapes and group (Control-G) those together as well.

Step 21

Finish off the smaller present box, and with it the icon itself, by adding the lid. We'll create it using a 24 x 8 px rectangle (#D1553D) with a 4 px outline (#332828), which we will group (Control-G) and then position over its main body, aligning them to its left side.

Once you’re done, group (Control-G) all its composing shapes, doing the same for the entire icon afterwards.

7. How to Create the Decorations Icon

We are now down to our third and last icon, so assuming you already know the drill, zoom in on its reference grid so that we can get started.

Step 1

As we did with the presents icon, we’ll want to grab a copy (Control-C) of the bottom line segment and paste (Control-F) it over before you actually commit to locking the third layer.

Step 2

Start working on the candle’s plate by creating a 48 x 6 px rectangle, which we will color using #D1553D and then position over the bottom line segment, at a distance of 26 px from the active drawing area’s right edge.

Step 3

Adjust the rectangle by individually selecting and pushing its bottom anchor pointsto the center by 2 px using the Move Tool (right click > Transform > Move > Horizontal > +/-2 px depending on which anchor you start with). Once you’re done, give the resulting shape a 4 px thick outline (#332828) and then group them together (Control-G).

Step 4

Create the plate’s upper section using a 60 x 6 px rectangle (#E0694C) with a 4 px thick outline (#332828), which we will group (Control-G) and then center align to the base, grouping (Control-G) the two sections together afterwards.

Step 5

Create the candle’s bottom metal section using a 48 x 12 px rectangle (#A3A8AA) with a 4 px thick outline (#332828), on top of which we will add a group of five 4 x 4 px circles (#332828) positioned 4 px from one another. Group (Control-G) all the current section’s shapes together and then center align them over the plate that we created in the previous steps.

Step 6

Create the actual candlestick using a 40 x 80 px rectangle (#F2D2B1) with a 4 px thick outline (#332828), on top of which we will add a couple of diagonal 4 px thick lines (#332828).

Once you’re done, select and group (Control-G) all its composing shapes, positioning them over the metal stand that we created in the previous step.

Step 7

Finish off the candle by creating the little string piece using a 6 x 12 px rectangle (#6D5858) with a 4 px thick outline (#332828) which we will group and then center align to its top. Once you’re done, don’t forget to select and group all of the candle’s composing shapes together using the Control-G keyboard shortcut.

Step 8

Start working on the little Christmas globe by creating a 62 x 62 px circle, which we will color using #83DBEA and then position onto the left side of the underlying active drawing area, at a distance of 2 px from its left edge and 14 px from its bottom one.

Step 9

Create the snow section of the globe using a 62 x 20 px rectangle (#EFEFEF), which we will adjust by arching down its top edge by adding a new anchor pointto its center and playing with its handles. Give the resulting shape a 4 px thick outline (#332828) with a Round Join, and then group (Control-G) and bottom-center align the two to the underlying circle.

Step 10

Mask the snow section using a copy (Control-C) of the blue circle, which we will paste in front of it (Control-F), and then with both shapes selected, right click and select Make Clipping Mask.

Step 11

Using another copy of the blue circle (Control-C > Control-F), create the globe’s outline using a 4 px thick Stroke with the color set to #332828.

Step 12

Start working on the Christmas tree’s trunk by creating a 6 x 8 px rectangle (#8E5C57) with a 4 px outline (#332828), which we will group (Control-G) and then center align to the globe, positioning them so that they end up overlapping the outline of the snow.

Step 13

Create the lower section of the tree using a 22 x 10 px rectangle (#59934E), which we will adjust by individually selecting and pushing its top anchor pointsto the center by 6 px (right click > Transform > Move > Horizontal > +/-2 px depending on which anchor you start with). Give the resulting shape a 4 px thick outline (#332828) with a Round Join, and then group (Control-G) and position the two on top of the trunk, center aligning them to it.

Step 14

Create the upper section of the tree using an 18 x 16 px rectangle (#71B769), which we will turn into a triangle by adding a new anchor pointto the center of its top edge using the Add Anchor Point Tool (+), and then removing the side ones using the Delete Anchor Point Tool (-). Give the resulting shape a 4 px thick outline (#332828) and then group (Control-G) and center align them to the lower body of the tree, grouping (Control-G) all its composing shapes as well.

Step 15

Using the Ellipse Tool (L), add in the little snowflakes using a couple of 2 x 2 px circles (#EFEFEF), which we will group using the Control-G keyboard shortcut.

Once you’re done, select all of the globe’s composing shapes and group (Control-G) those as well.

Step 16

Start working on the globe’s base by creating its upper section using a 46 x 8 px rounded rectangle (#93524C) with a 4 px thick outline (#332828), which we will group (Control-G) and then position on top of the globe, center aligning them to its lower section.

Step 17

Create the base’s lower section using a 54 x 12 px rounded rectangle (#AF655B) with a 6 px Corner Radius and a 4 px thick outline (#332828), and then center align the two to the section from the previous step.

Step 18

Add some details to the globe’s base by adding a 12 px wide detail line (#332828) with Round Caps to its center, and a 4 x 4 px circle (#332828) at a distance of 2 px from each of its sides.

Once you’re done, don’t forget to select all the base’s composing shapes and group (Control-G) them together, doing the same for the globe and the entire icon afterwards.

Ho Ho Ho, It’s a Wrap!

I hope you’ve had as much fun as I did creating this little icon pack, and as always learned something new during the process. That being said, I wish you all a warm Christmas in the company of all your loved ones.