How to create green house icon

home icon tutorial

In this tutorial I will show you create simple house icon in Adobe Illustrator. It is the icon for software and website templates. I have used basic shapes and gradient tool in this tutorial. Includes ready .ai and .eps file for download.

Iconshots Tutorial

How to create house icon

You may also be interested in the following Articles.


This is the final icon we will design.

iconshots house icon tutorial

Step 1

Create a new document with 400 pixels width by 400 pixels height and draw a rectangle with 300 pixels width and 325 pixels height.

iconshots tutorial

Step 2

With the rectangle selected, go to Filter > Stylize > Round Corners and change the Radius to 30 pixels and press OK.

iconshots home tutorial

Step 3

Fill the rectangle with a Linear Gradient from the Gradient Panel. Change the first swatch in the gradient to a green color and change the second swatch to a yellow and change the angle to 90 degree.

iconshots home icon tutorial

Step 4

Draw a star that is 200 pixels width Radius 1 and 150 pixels Radius 2, Points – 3, press OK.

iconshots home tutorial

Step 5

Select the new star shape recently created and rectangle press the Horizontal Align Center and Vertical Align Top from Align Objects in Align Panel.

iconshots home icon tutorial

Step 6

Star and rectangle shapes selected press the Intersect shape areas from shape models in the Pathfinder Panel. Press Expand Button.

Step 7

Now we will create the roof of the house. Draw a rounded rectangle that is 280 pixels width, 60 pixels height and 30 pixels corner radius.

iconshots home icon tutorial

Step 8

Fill the rounded rectangle with a Linear Gradient from the Gradient Panel. Change the first swatch in the gradient to a dark green color and change the second swatch to a green and rotate the shape 45 degree.

iconshots home icon tutorial

Step 9

Select rounded rectangle and go to Objects – Transform – Reflect and press Copy.

iconshots home icon tutorial

Step 10

Group two rounded rectangles.

iconshots home icon tutorial

Step 11

Now select rounded rectangle and body of the house previously created press Horizontal Align Center in Align Panel.

iconshots home icon tutorial

Step 12

Select the roof shape and go to Object > Path > Offset to open the Offset Path dialog. Change the Offset to -3 pixels and press OK.

iconshots home tutorial

Step 12

Copy and Paste in Front the object we created through Offset and move it to bottom 7 pixels. Select two new rounded rectangles and press the Subtract From Shape Areas button in the Pathfinder Panel.

iconshots home icon tutorial

Step 13

Draw a rounded rectangle that is 88 pixels width by 177 pixels height, corner radius is 30 pixels and place it on the right side of the house, then send it to the back.

home icon tutorial

Step 14

Now we know how to give a special effect to the top of the object. Select last rounded rectangle go to Object > Path > Offset to open the Offset Path dialog. Change the Offset to -3 pixels and press OK. Copy and Paste in Front the object we created through Offset and move it to bottom 7 pixels. Select two new rounded rectangles and press the Subtract From Shape Areas button in the Pathfinder Panel.

home icon tutorial

Step 15

Our last step, draw a rectangle that is 70 pixels width by 140 pixels height and place it over the body of the house icon. By the way our green house icon is ready.

home icon tutorial

Final Image

You can download .ai and .eps formats below.

home icon tutorial


You may also be interested in the following Articles.


House icon

 Subscribe to our RSS-feed and  follow me on Twitter to stay in touch.