www 101

All you need to know about the internet

Have a Question?

If you have any question you can ask below or enter what you are looking for!

How to Create a Friday the 13th Themed Icon Pack in Adobe Illustrator

Final product image
What You’ll Be Creating

Today’s tutorial
is part of the Horror Movie Week special, in which I and everybody else at
Team Tuts+ got the chance to recreate a part of their favorite horror flick.
Since I’m a big fan of Jason, it was an easy choice for me, and boy we’ll have
fun with this one since we’ll get to recreate some cool props using Adobe Illustrator’s
most basic shapes and tools.

Now, without wasting any more time, let’s get our hands dirty and bring
these icons to life!

Oh, and don’t forget you can always expand the set by heading over to Envato Market, where you can find tons of beautifully crafted icon packs just waiting to be taken.

1. 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)
  • Align New Objects to
    Pixel Grid:
    checked
setting up a new document

2. Set Up a Custom
Grid

As you probably
already know, Illustrator lets you take advantage of its powerful Grid System by setting it up using the
lowest possible values, so that in the end you’ll have full control over your
shapes since you can make sure they’re perfectly snapped to the underlying Pixel Grid.

Step 1

The settings that
we’re interested in can be found under the Edit
> Preferences > Guides & Grid
submenu, and should be adjusted as
follows:

  • Gridline every: 1
    px
  • Subdivisions: 1
setting up a custom grid

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, since we’re aiming to create the icons using a 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. Set Up the Layers

With the New Document created, it would be
a good idea to layering our project, 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 > bear trap
  • layer 3 > hockey mask
  • layer 4 > gear
setting up the layers

4. Create the 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.

creating the main shape for the reference grid

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.

creating the main shape for the active drawing area

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.

creating and positioning all three reference grids

5. Create the Bear Trap Icon

First, 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 you can have a better view of what you’re going to be creating.

Step 1

Using the Rounded Rectangle Tool, create a 48 x 104 px shape with an 8 px Corner Radius, which we will color
using #A06C60 and then align to the center of our active drawing area.

creating and positioning the bear traps jaw main shape

Step 2

Select the shape that we’ve just created, and
then go to Object > Path > Offset
Path
and create a 4 px Offset from
which we will then subtract the smaller shape using Pathfinder’s Minus Front
Shape Mode
in order to get the trap’s jaw.

creating the bear traps main shape

Step 3

Give the resulting
shape an outline using the Offset Path method,
by applying a 4 px Offset, which we
will then color using #3A322F in order to make it stand out.

adding the outline to the bear traps jaw

Step 4

Draw another 52 x 108 px rounded rectangle (#FFFFFF)
with a 10 px Corner Radius, positioning it over the shapes that we’ve just created, and then give it a 2 px Offset, subtracting the smaller
shape from it afterwards.

creating the main shape used to add the highlight and shadow to the bear traps jaw

Step 5

Since we’re going to
be using the white shape to create the highlight and shadow for the trap’s jaw,
we will have to adjust it by subtracting a 64 x 8 px rectangle (highlighted with orange) from it.

adjusting the shape used to create the bear traps highlight and shadow

Step 6

Ungroup the resulting
shapes (right click > Ungroup)
and then select the top half and turn it into a highlight by setting its Blending Mode to Overlay and lowering its Opacity
to 30%.

creating the top half highlight for the bear traps jaw

Step 7

Select the bottom half and turn it into a
shadow by setting its color to black (#000000) and then lowering its Opacity to 20%.

creating the bear traps bottom half shadow

Step 8

Fill in the empty
spaces from between the two detail shapes, by adding two 4 x 8 px rectangles (#000000) which we will adjust by lowering
their Opacity to 20%.

adding the center shadows to the bear traps jaw

Step 9

Add two smaller 4 x 4 px rectangles over the shadows
that we’ve just created, coloring them using #3A322F.

adding the joints to the bear traps jaw

Step 10

Use the Rectangle Tool (M) to create a 2 x 2 px rectangle (#FFFFFF) followed
by a larger 4 x 2 px one (#FFFFFF).
Position the two 2 px from one
another, and then turn them into highlights by setting their Blending Mode to Overlay and lowering their Opacity
to 30%, grouping (Control-G) and positioning a copy
on the top side of the jaw, and another one at the bottom.

creating and positioning the vertical highlights onto the bear traps jaw

Step 11

Start working on the trap’s metal teeth by
creating a 4 x 4 px circle (#3A322F)
which we will adjust by using the Anchor
Point Tool
on its left and right anchor
points
to make them slightly pointy. Then, create three copies of the
adjusted shape, at a distance of 4
px
from one another, grouping (Control-G)
and positioning a set on the jaw’s top side and another one on its bottom
one.

adding the metal teeth to the bear traps jaw

Quick tip: also, at this point
it would be a good idea to select all of the shapes that we have so far and
group them together (Control-G).

Step 12

Grab the Rectangle Tool (M) and create the stock
bar by adding a 68 x 8 px shape (#70625E)
towards the center of the trap’s jaw, making sure to position it under (right click > Arrange > Send to Back),
giving it a 4 px thick outline (#3A322F)
using the Offset Path method.

creating and positioning the bear traps stock bar

Step 13

Add two 4 x 8 px rectangles (#000000) towards
the sides of the inner section of the bar, turning them into shadows by
lowering their Opacity to 20%.

adding shadow to the inner section of the bear traps stock bar

Step 14

Next, add a couple of
2 px tall highlights towards the top
side of the stock bar. Use white (#FFFFFF) for the color, Soft Light for the Blending
Mode
, and 60% for the Opacity.

adding highlights to the bear traps stock bar

Step 15

Using the Ellipse Tool (L) add two 4 x
4 px
circles (#3A322F) to the sides of the stock bar’s inner section,
leaving a gap of 1 px between
them and the jaw’s outline.

Once you’ve added
them, select all the stock bar’s composing shapes and group them using the Control-G keyboard shortcut.

adding the little screws to the bear traps stock bar

Step 16

Start working on the
bridge holding the plate, by creating a 4
x 68 px
rectangle (#5E524E) which we will adjust by setting the Corner Radius of its bottom Anchor Points to 2 px. Give the resulting shape a 4 px thick outline (#3A322F) and then position the two towards the
upper section of the jaw, so that their outlines end up overlapping.

creating and positioning the bear traps bridge

Step 17

Add a 4 x 4 px rectangle (#000000) towards
the upper section of the bridge, turning it into a shadow by lowering its Opacity to 20%.

adding a shadow to the upper section of the bear traps bridge

Step 18

Add another 4 x 4 px rectangle (#3A322F) about 22 px from the shadow that we’ve just
created, and a 2 x 2 px circle (#3A322F)
towards the tip of the bridge, selecting and grouping (Control-G) all of its composing shapes afterwards.

adding details to the bear traps bridge

Step 19

Create the trap’s
plate by drawing a 20 x 20 px circle
(#A06C60), which we will then position over the stock bar, giving it the same 4 px thick outline (#3A322F)
afterwards.

creating and positioning the main shapes of the bear traps plate

Step 20

Grab a copy (Control-C > Control-F) of the
plate’s fill shape (the 20 x 20 px circle)
and then subtract a smaller 16 x 16 px
one from it, setting the color of the resulting object to white (#FFFFFF), its Blending Mode to Overlay and its Opacity to
just 30%.

adding a circular highlight to the bear traps plate

Step 21

Finish off the plate
by adding the little screws, using four 2
x 2 px
circles (#3A322F), one for each of its “corners”.

adding the little screw to the bear traps plate

Step 22

Cast an outer shadow
onto the stock bar by selecting the plate’s outline and applying a 2 px offset, which we will color using
black (#000000), lowering its Opacity to
20%.

adding a shadow underneath the bear traps plate

Step 23

Since we want the
shadow to remain constrained to the stock bar’s surface, we will need to grab a
copy of its fill shape and use it as a Clipping
Mask
(both shapes selected >
right click > Make Clipping Mask
).

masking the bear traps plate shadow using a clipping mask

Step 24

Position the masked
shadow underneath the plate (right click
> Arrange > Send Backward
), and then select all of the latter’s
composing shapes and group them together (Control-G).

positioning the bear traps plate shadow underneath

Step 25

With the plate in
place, start working on the stock bar’s side sections by creating a 4 x 4 px rectangle (#5E524E) with a 4 px outline (#3A322F), which we will
position towards its left side.

creating and positioning the main shapes for the stock bars left side section

Step 26

Add a 4 x 2 px highlight (color: white; Blending Mode: Overlay; Opacity:
30%) towards its upper section, and a 2
x 2 px
circle (#3A322F) on top of all the other shapes, grouping (Control-G) the side section’s composing
elements afterwards.

adding details to the stock bars left side section

Step 27

Create the stock
bar’s right section by grabbing and positioning a copy (Control-C > Control-F) of the one that we’ve just created
towards its right side.

adding the right side section to the bear traps stock bar

Step 28

Start working on the
chain by creating the first link using a 10
x 16 px
rounded rectangle (#A38989) with a 5 px Corner Radius, from which we will subtract a smaller 6 x 12 px rounded rectangle with a 3 px Corner Radius (#A38989). Give the
resulting shape a 2 px outline (#3A322F)
and then position the two shapes underneath the stock bar’s left side section.

creating and positioning the main shapes for the bear traps first chain link

Step 29

Give the link an
all-around highlight (color: white; Blending Mode: Overlay; Opacity: 30%), and then group (Control-G) all of its composing shapes,
and create the second link using a copy of it (Control-C > Control-F).

creating and positioning the second chain link

Step 30

Add the connecting
chain link by creating a 2 x 14 px rounded
rectangle (#BCAAAA) with a 1 px Corner
Radius
and a 2 px outline (#3A322F)
which we will position between the two links that we’ve already created.

creating and positioning the connecting chain link

Step 31

Add a couple of
highlights (color: white; Blending Mode: Overlay; Opacity: 30%) and a bottom shadow (color: black; Opacity: 20%), and then select and group (Control-G) all of the connecting chain link’s composing shapes.

adding details to the connecting chain link

Step 32

Finish off the current icon by adding a 2 x 11 px rounded rectangle (#3A322F)
with a 1 px Corner Radius over the
stock bar’s left side section, aligning it to the upper section of the
little screw.

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

bear trap icon finished

6. Create the Hockey Mask Icon

Assuming you’ve already locked the
previous layer and moved on up to the next one, zoom in on the second reference
grid, and let’s start working on the iconic mask. 

Step 1

Using the Ellipse Tool (L), create the main shape
of the mask by drawing an 80 x 108 px ellipse
(#F7ECD2), which we will position in the center of the underlying active
drawing area, 4 px from its
bottom edge.

creating and positioning the main shape for the hockey mask

Step 2

Adjust the ellipse by
selecting its side anchor points using
the Direct Selection Tool (A) and
pushing them upwards by 6 px. You
can do this either manually with the help of the directional arrow keys, or by
using the Move Tool (right click > Transform > Move >
Vertical > -6 px
).

adjusting the main shape of the hockey mask icon

Step 3

Give the resulting
shape a 4 px thick outline (#3A322F)
using the Offset Path method, removing any extra Anchor Points created in the process, and adjusting the shape as needed.

adding the outline to the hockey masks main shape

Step 4

Create a copy of the
smaller fill shape, and then subtract -2
px Offset
from it using Pathfinder’s
Minus Front Shape Mode, coloring the
resulting shape using black (#000000) and lowering the Opacity to just 20%.

creating and positioning the shadow onto the hockey masks main shape

Step 5

Adjust the shadow
that we’ve just created, by selecting its inner bottom Anchor Point and moving it upwards by 4 px.

adjusting the hockey masks main shadow

Step 6

Add the eye cutouts by creating two 16 x 16 px rounded
rectangles (#3A322F) with a 6 px Corner
Radius
 at a distance of 16
px
from one another, and then position them over the mask, exactly 40 px from its outline.

creating and positioning the eye cutouts onto hockey mask

Step 7

Adjust the cutouts by setting the Corner Radius of
their bottom corners to 8 px from
within the Transform panel.

adjusting the bottom section of the eye cutouts

Step 8

Start working on the
little circular cutouts by grabbing the Ellipse
Tool (L)
and drawing a stack of three 4
x 4 px
circles (#3A322F) vertically distributed 4 px from one another, which we will position about 8 px above the left eye.

Quick tip: I recommend you turn
on Pixel Preview mode (Alt-Control-Y) since it will be far
easier to position your shapes this way.

creating and positioning the circular cutouts from the upper-left section of the hockey mask

Step 9

Add another 4 x 4 px circle (#3A322F) on the
right side of the third cutout, at a distance of 4 px from it, making sure to position it slightly towards the
bottom by moving it 2 px downwards.

adding the fourth circular cutout to the hockey mask

Step 10

Select and group (Control-G) the little cutouts that
we’ve added so far, and create and position a copy above the right eye cutout,
making sure to flip it vertically (right
click > Transform > Reflect > Vertical
).

adding the circular cutouts to the upper-right section of the hockey mask

Step 11

Take your time, and add
the rest of the cutouts using the same 4
x 4 px
circle (#3A322F), positioning them as seen in the reference image.

Once you’re done,
select and group them together (Control-G)
so that they won’t get separated by accident.

adding the rest of the circular cutouts to the hockey mask

Step 12

Next, we’ll have to
grab the Pen Tool (P) and draw the
three colored decals using #F7734B as our Fill
color. So again, take your time, and use the reference image to add them
in.

adding the colored decals to the hockey mask

Step 13

With the decals in
place, add the top section of the strap by creating an 8 x 16 px rectangle (#5E524E) with a 4 px outline (#3A322F) which we will align to the top edge of
the active drawing area.

creating and positioning the main shapes for the hockey masks upper strap

Step 14

Create two 8 x 1 px rectangles (#3A322F) at a distance of 1 px from one
another, positioning them towards the upper section of the strap, leaving a 1 px gap.

Then, add a
thicker 8 x 2 px rectangle (#3A322F)
underneath them, at a distance of 2 px.

adding the small detail lines to the upper strap of the hockey mask

Step 15

Next, grab the Ellipse Tool (L) and draw a 2 x 2 px circle (#BCAAAA) which will
act as the bolt holding the strap, and give it a 2 px outline (#3A322F), grouping (Control-G) and positioning the two shapes in the center of the
space created by the thicker strap line that we’ve just created.

adding the little bolt to the hockey masks upper strap

Step 16

Use the Rectangle Tool (M) to add a couple of
highlights between the strap’s detail lines using white (#FFFFFF) as your
fill color, Soft Light as your Blending Mode, and 60% for the Opacity.

adding highlights to the hockey masks upper strap

Step 17

Finish off the top
strap by adding a 16 x 2 px rectangle
(#000000) underneath its outline, which we will turn into a shadow by lowering
its Opacity to 20%. Then, select all of its composing shapes and group them together
(Control-G).

adding the shadow to the hockey masks top strap

Step 18

Start working on the
side straps, by creating a 2 x 8 px rectangle
(#5E524E) with a 4 px outline (#3A322F)
which we will position on the left side of the mask, Horizontally Center Aligning it to the eye cutout.

creating and positioning the main shapes for the hockey masks left strap

Step 19

Add a 1 x 4 px rectangle (#3A322F) in the center-right of the fill shape, and a top and side highlight (color: white; Blending Mode: Soft Light; Opacity:
60%), selecting and grouping (Control-G)
all of the strap’s composing shapes afterwards.

adding details to the hockey masks left side strap

Step 20

Finish off the icon by
creating the right strap, using a copy (Control-C
> Control-F
) of the one that we’ve just created, and positioning it onto
the right side of the mask, flipping it vertically (right click > Transform > Reflect > Vertical).

Then, simply select
all the icon’s composing shapes and group them using the Control-G keyboard shortcut.

hockey mask icon finished

7. Create the Gear Icon

We are now down to
our third and last icon, which is probably Jason’s favorite thing in the whole
world. Yup, we’re going to create some of the gear used by the character in the
movies, so make sure you’re on the right layer, and then zoom in on our last
reference grid, and let’s get started.

Step 1

Let’s start working
on the deadly kitchen knife by creating an 8 x 24 px rectangle (#A06C60), which we will adjust by setting the Radius of its bottom corners to 4 px. Give the resulting shape a 4 px thick outline (#3A322F) using the Offset Path method, and then position
both shapes towards the bottom edge of the active drawing area, at a distance
of 26 px from its left side.

creating and positioning the main shapes for the kitchen knifes handle

Step 2

Add an 8 x 2 px rectangle (#FFFFFF) at the top of the handle’s fill shape, which we will turn into a highlight by
setting its Blending Mode to Overlay and lowering its Opacity to 30%.

adding a subtle highlight to the upper section of the kitchen knifes handle

Step 3

Grab the Pen Tool (P) and, using a 1 px thick Stroke (#3A322F) with
the Cap set to Round, draw some little wood lines. Take your time, and once you’re
done select and group them using the Control-G
keyboard shortcut.

adding the little wood texture to the kitchen knifes handle

Step 4

Add two 4 x 4 px circles (#3A322F) on top of
the handle, one towards the top and the other one towards the bottom, and then
select and group (Control-G) all of
its composing shapes together.

adding the two bolts to the kitchen knifes handle

Step 5

Create the knife’s
blade by drawing a 16 x 168 px ellipse
(#BCAAAA) which we will adjust by removing its bottom Anchor Point. Give the resulting shape the usual 4 px thick outline (#3A322F) and then
align the two shapes to the right edge of the handle, making sure that the
outlines overlap.

creating and positioning the main shapes for the kitchen knifes blade

Step 6

Create a copy (Control-C > Control-F) of the
blade’s fill shape, and then give it a -2
px offset
which we will subtract from it, in order to create the shape for
the highlight. Adjust the resulting shape by changing its color to white
(#FFFFFF) and setting its Blending Mode
to Overlay while lowering its Opacity to 30%.

adding the highlight to the kitchen knifes blade

Step 7

Finish off the
kitchen knife by adding a 16 x 2 px rectangle
(#3A322F) to the lower section of its blade, grouping all its shapes together
afterwards (Control-G).

adding finishing touches to the kitchen knife

Step 8

Start working on the
little hacksaw by creating its blade using a 12 x 72 px rectangle (#BCAAAA
with a 4 px outline (#3A322F), aligning both shapes to the top edge of the active drawing area, at a distance
of 6 px from the knife.

creating and positioning the main shapes for the hacksaws blade

Step 9

Using the Rectangle Tool (M), create a 2 x 74 px shape which we will color
using #997E7E and then position over the left side of the blade.

adding the side section to the hacksaws blade

Step 10

Add a 12 x 4 px rectangle (#FFFFFF) at the top of the blade, and turn it into a highlight by setting its Blending Mode to Overlay while lowering its Opacity
to 30%.

adding a top highlight to the hacksaws blade

Step 11

Add another 2 x 70 px vertical highlight (color: white; Blending Mode: Overlay; Opacity:
30%), and position it towards the right side of the blade, just below the one
that we created in the previous step.

adding the vertical highlight to the hacksaws blade

Step 12

Using the Rectangle Tool (M) add a 2 x 74 px vertical divider (#3A322F)
towards the left side of the blade, leaving a 2 px empty gap from the larger outline.

adding the vertical divider to the hacksaws blade

Step 13

Add a 2 x 2 px circle (#3A322F) in the
upper-right corner of the blade, leaving a 1
px
 gap around it. Once you’ve added the little bolt, select and group
(Control-G) all of the blade’s
elements together.

adding the little bolt to the upper section of the hacksaws blade

Step 14

Next, let’s create the little section from
underneath the blade that holds it to the handle.

First, draw a 4 x 4 px square (#A38989) with a 4 px outline (#3A322F) which we will position just below the blade.

Then, add a 4 x 2 px shadow (color: black; Opacity: 20%),
a 2 x 2 px circle (#3A322F) for a
bolt, and finally select and group (Control-G)
all its shapes.

adding the little section from underneath the hacksaws blade

Step 15

Create a 22 x 2 px rectangle which we will color
using #A38989, and then give it a 4 px outline
(#3A322F), positioning the shapes underneath the blade’s connector that we
created in the previous step, aligning them to its left side.

creating and positioning the main shapes for the hacksaws connector handle

Step 16

Add a 22 x 1 px top highlight (color: white; Blending Mode: Overlay; Opacity:
30%) and a 4 x 2 px rectangle (#3A322F)
towards the bottom of the outline, and then select and group all of the
connector’s composing shapes using the Control-G
keyboard shortcut.

adding details to the hacksaws handle connector

Step 17

Start working on the
actual handle by creating a 16 x 30 px rectangle
(#BCAAAA) (1) which we will adjust by setting the Radius of its top Anchor
Points
to 2 px (2). Then,
subtract a 12 x 20 px rectangle from
its lower section (3), giving the resulting shape a 4 px thick outline (#3A322F) (4). Add a couple of highlights (color: white; Blending Mode: Overlay; Opacity:
30%) here and there (5), and a 4 x 4
px
circle (#3A322F) in its upper-left corner (6).

creating the hacksaws handle

Step 18

Continue adding
details to the handle by creating a 32
x 8 px
rectangle (#BCAAAA) (1), which we will adjust by setting the Radius of its left corners to 4 px (2). Then, give the resulting
shape a 4 px outline (#3A322F), making sure to send it to the back (right
click > Arrange > Send to Back
) of the handle’s fill shape that we
created in the previous step (3). Add a bunch of highlights (color: white; Blending Mode: Overlay; Opacity:
30%) (4 and 5), followed by six 2 x
8 px
vertical rectangles (#3A322F) positioned 2 px from one another (5). 

Finish off the handle by adding a 2 x 2 px circle (#3A322F) to its
rounded side (6) and then selecting and grouping (Control-G) all of its composing shapes.

adding details to the hacksaws handle

Step 19

Once you have the
handle, position it in the lower section of the active drawing area, left
aligning it to the blade’s outline.

positioning the hacksaws handle

Step 20

Add the upper section
of the hacksaw holding the blade, by creating a 36 x 90 px rounded rectangle (#3A322F) with a 12 px Corner Radius, from which we will subtract a smaller 28 x 82 px one with an 8 px Corner Radius. Remove the left and
bottom sections that overlap the blade and handle, and then give the resulting
shape the usual 4 px thick outline (#3A322F).

creating and positioning the upper-right section of the hacksaw

Step 21

Finish off the icon by adding two 4 x 4 px shadows (color: black; Opacity: 20%) to the shape that we’ve just created, and then select
and group (Control-G) the hacksaw’s
shapes, before grouping the rest of the icon’s elements.

gear icon finished

It’s a Wrap!

There you have it! A super-comprehensive tutorial on how to create an icon pack for one of
the goriest horror flicks ever made. I hope that you’ve found the steps easy to
follow, and most importantly learned a new trick along the way.

finished icons preview