Quick Tip: Create a Set of Scalable Grunge Icons

Follow this quick tip and learn to how create a set of grunge icons. We will use plenty of Art brushes and with the help of the Pathfinder Panel we will create the grunge shape. To accentuate the grungy look we will use the Glass (Frosted) effect along with other appearances.

Step 1

First open a new web document. Use the Rectangle Tool (M) to draw a 90×90 px square and give it any fill color. Copy and Paste it in front, delete the existing fill color and give it only a 1 pt Stroke. Next, take the Scissors Tool (C) and click on the four corner points of the black path to cut the square into segments. I colored the resulting four paths differently so you can see them better.

Step 2

Select the pink path and stroke it using an Art brush called Charcoal-Thick that you can find in the Brush Libraries menu under Artistic > Artistic_ChalkCharcoalPencil. Use the same brush to stroke the blue path. Move on to the orange path and stroke it with Chalk-Scribble from the same category. For the green path I’ve used Dry Brush 8 which can be found under Artistic >Artistic_Paintbrush. The Stroke weight is 1 pt for all of them. You can choose other brushes from the library if you want, there is no rule here. I have tried several and then used the ones that I liked.

You can also flip them by opening the Stroke Options window from the Appearance Panel and checking the Flip Along or Flip Across options.

Step 3

Copy and Paste in front the left path and remove the existing brush stroke. Select white as the stroke color then open the Brush Libraries menu and navigate to Artistic >Artistic_Ink. Here you will find an Art brush called Galaxy, use it to stroke this path (1). Copy and Paste in front the bottom path and use Fire Ash to stroke it (2), that you can find in the same category. The Stroke weight for these two paths is 1 pt.

Copy and Paste in front again the bottom path and stroke it with Dry Brush 2 which can be found under Artistic >Artistic_ChalkCharcoalPencil. Change the Stroke weight for this path to 0.5 pt (3).

Next, take the Pen Tool (P) and draw a path over the top-right corner of the square like in the image below. Stroke it with an Art brush called Chalk that you can find under Artistic > Artistic_ChalkCharcoalPencil and change the Stroke weight to 2 pt.

Step 4

Hide all the white strokes and focus on the first brush strokes (step 2). Select all four and from the Object menu choose Expand Appearance. Select all the resulting pink shapes and also the square and click Add to shape area >Expand from the Pathfinder Panel. You will obtain the grunge compound path shown in the first part of the image below.

Now, make all the white brush strokes visible again. Select all four then from the Object menu choose Expand Appearance and from the Pathfinder Panel choose Add to shape area > Expand. As a result of these actions you will obtain a complex compound path as the one shown in the second part of the image. Select both compound paths (this one and the green one) and click Subtract from shape area > Expand from the Pathfinder Panel. The grunge shape that you need to create these icons is ready.

Step 5

Fill the grunge shape obtained with the radial gradient shown then go to the Appearance Panel, open the fly-out menu and choose Add New Fill. Change the gradient with the second gradient shown in the example below, which has the same colors only they are inverted. Having this second fill selected in the Appearance Panel, go to the Effect menu > Path > Offset Path and apply a minus 2 px Offset value.

With the second fill still selected, go to Effect menu >Distort and apply the Glass effect. Set the values shown and as the texture choose Frosted. Next, go to Effect menu > Stylize and apply the Feather effect then change the Blending mode to Soft Light.

Step 6

Let’s continue with the symbols. All the symbols that I’ve used can be found in the Symbol Libraries menu in the categories written next to each one. Find them, drag them all into your working area and press the Break Link to Symbol button in the Symbols Panel.

Step 7

Focus on the Home symbol. After you press the Break Link to Symbol button go to the Object menu and select Ungroup twice. As a result you will get three shapes, the home and the two windows. Select them all and click Subtract from shape area > Expand from the Pathfinder Panel to obtain a single compound path.

Move on to the Shopping symbol. Select Expand from the Object menu to transform the strokes into fills then Ungroup it three times. Now select all the shapes that make up the shopping cart and click Add to shape area >Expand to obtain a single shape.

Continue with the Search World Wide symbol. Select Expand Appearance from the Object menu then Expand to transform all the strokes into fills. Ungroup it twice then select all the shapes that make up this symbol and click Add to shape area > Expand to unite them all.

Step 8

Select the At symbol and first delete the 3D effect from the Appearance Panel. Expand it then Ungroup it twice. For the Talk Balloon symbol, simply Ungroup it two times and the 3D effect will remove itself.

Step 9

Ungroup the Contacts symbol and delete the gray rounded rectangle. Select all the shapes and click Add to shape area >Expand to obtain a single compound path.

Continue with the Mail symbol and Ungroup it three times. Delete all the white shapes then select all the black strokes and expand them. Now, select everything and click Add to shape area >Expand from the Pathfinder Panel.

Ungroup the Telephone symbol twice then select the rounded rectangle and delete the black fill. Give it a 1 pt black Stroke then go to the Object menu and Expand it. Select all the shapes that make up the symbol, and click Add to shape area > Expand to unite them.

Step 10

Here are all the symbols obtained so far. They have different sizes so scale them until they all are of about the same size. The other symbols that I’ve used were obtained the same as the others. The purpose here is to obtain from the group of shapes that make up each symbol a single path.

Step 11

Let’s go back to the grunge icon shape and put the Home symbol obtained at step 7 in the middle. Fill it with white then go to the Appearance Panel, open the fly-out menu and choose Add New Fill. Change the fill color to gray then go to Effect menu > Blur and apply a 3 px Gaussian Blur. This way you will get a discreet shadow around the symbol.

Next, take the Type Tool (T) and type "Home" using a font called Cataclysmic which works perfectly in this case. You can find it here. The first grunge icon is ready and you can use it to create the others.

Duplicate the grunge icon shape and simply change the two radial gradients with the ones shown. Put the At symbol above it, fill it with white then create the discreet shadow around it as shown above. Type "Address" using the same font.

Make the same changes to create the Shop icon…

…and the Search icon:

Step 12

Here are the four grunge icons made so far. If you want to scale them, make sure you select Expand Appearance for the grunge shape to expand all the effects applied. The same thing goes for the symbols to expand the Gaussian Blur effect. Besides the white fill, the text also has a 0.5 pt white Stroke to make it a bit thicker therefore it needs to be expanded twice. Now they all are ready to be scaled.

Step 13

If you want to create the rest of the icons just like in the final image, here are the two radial gradients that I’ve used for each one of them. Change them then place the symbol and type the text.

Here are the other two icons:

Step 14

The possibilities are endless. In this set I also made a Documents icon, Fashion, Settings and a Weather icon using the rest of the symbols shown at step 6. You can choose any theme and colors. You can also choose to not write the text and leave them simple.

Final Image

Here is the final image, I hope you like these colorful grunge icons.