Create a Flat Icon with Long Shadow in Adobe Illustrator

Flat Icon Design is the most popular topic from around the design blogs and forums for the last couple of months.  The major mobile operating systems started to use or already using the Flat Design (WindowsPhone + Metro, Android, iOS7).

(We updated this tutorial. If you want to read only the update click here)

It seems that the Flat Design trend has already reached a new evolutionary level. Jeff Escalante, the one who initiated this trend discussion, called it Long Shadow Design. As he mentioned in a tweet, it started as a joke: “I actually can’t believe what’s happening now. It was a joke but its evolved out of my control…


Check out this gallery of Flat Icons!

So how can one create a great, trendy icon with flat style and long shadow? Follow this tutorial and learn to use the basic tools and the tools on the Pathfinder Panel.

Set Up your Document

Create an art board that is 800 x 600px. Select CMYK color mode, Screen (72ppi) and make sure that the “Align New Objects to Pixel Grid” box is unchecked before your click OK.

1. Create a Rounded Rectangle with the Rounded Rectangle Tool (width / height=250px). When drawing, hold down the Shift key to create a square. If you want to change the roundness, press the Up or Down keys while pressing the Mouse Left Button. Fill the object with a nice color (C=35 M=9 Y=70 K=0).


2. Create another Rounded Rectangle (width=50px / height=250px). Fill it with red. No need to align it to the another rectangle, you can place it anywhere on the canvas.


3. Create a Rectangle with the Rectangle Tool (M) set it’s width to 50px and height to 25px.  If you don’t set a size you can set it later (Step 11). Place it over the red object.

flat-icon_00214. Create another Rectangle, this time make it square by pressing the Shift key while drawing. The size doesn’t matter, we will set it later. Rotate with 45º. Go to Object -> Transform -> Rotate and set the angle to 45 or simply grab one of the handles from the edge of the object and start rotating while holding down the Shift key. This way you can rotate exactly 45, 90, 135 degrees.


5. As you can see on the image above, the bounding box is rotated too. In this case you are not able to modify the object’s width or height. You can still change the width or height by editing the values on top of the screen but if  you want to edit with the mouse, you need to Reset the Bounding Box. Go to Object -> Transform -> Reset Bounding Box.


6. Set the object’s width to 50px and its height to 80px. Place it over the red object. Align them vertically.

Tip: Select the two objects by holding the Shift key and click again on the object you don’t want to move. In this example Shift + click to the red object, Shift + click to the grey object, and click again on the red one. This way the grey object will be aligned to the red one while the red object will stay in its place. (I hope I explained it clearly 🙂 )



UPDATE: to place the gray shape behind the pencil’s body, select it press Ctrl + X. Select the pencil’s body, and press Ctrl + B, to place back the shape BEHIND the pencil.

7. Create a Circle with the Ellipse Tool (E), align it with the other two objects and place it onto the bottom of the second object. This will be the tip of the pencil. Select the grey object (NOT the cirlce!), duplicate it (Ctrl + C, Ctrl + F). Select the duplicated object and the circle, then select Intersect from the Windows -> Pathfinder Panel.flat-icon_0014

8. As a result, you should see this:


9. Draw three circles with the Ellipse Tool. Place them over the red object (You can increase the middle circle). Select each circle, then press Unite from the Pathfinder Panel. Fill it with a distinctive color (yellow).flat-icon_0012

10. Duplicate the red object (Ctrl + C, Ctrl + F). Select the duplicated object and the yellow one, and press Minus Front on the Pathfinder Panel.


11. Remember Step 3 when I said that we can set the size of the grey object? If you already have, then you can skip this step. If not, duplicate the red object, select the duplicated object and the grey one and select Intersect on the Pathfinder Panel.flat-icon_0010

12. Create a rectangle over the upper part of the “Pencil“. I believe you are familiar with the steps by now: duplicate the red object, select the duplicated object and the newly created rectangle, and press Intersect on the Pathfinder Panel. To place the new object behind the grey shape, go to Object -> Arrange  -> Send Backward.


13. Create two Rectangles, arrange their sizes to fit the red object as you see on the image below. Now it’s time to fill every object with its final color.



14. After you filled each object with nice colors, finish the Pencil. Duplicate the pencil’s body, select the duplicated object, and the left Rectangle, then select Intersect from the Pathfinder Panel. Repeat this step with the last rectangle too. When you’re done doing this, bring the grey shape on top of the other objects (Select it, go to Object -> Arrange -> Bring to Front).


15. Repeat steps 13 and 14 with the grey object and use the color codes attached. You’re done with the flat style Pencil.


16. Create a Rectangle and place it over the pencil until it covers half of it. Set its width to 500px and its height the same as the height of the Pencil. This will be the shadow of the Pencil.

flat-icon_0004 17. Bring the shadow behind the Pencil (you can use the Arrange option as you did before, or cut and place behind the Pencil. Ctrl + X, select the green Rounded Rectangle from the background and Ctrl + F). Select the Pencil and its shadow, go to Object -> Transform ->Rotate and set the angle to 45º.


18. There is only one more thing you need to do. Duplicate the green Rounded Rectangle. Select the duplicated shape and the shadow of the Pencil, then press Intersect on the Pathfinder Panel. This is the final image. Feel free to experiment with other colors to get a trendy, flat icon for your web or mobile apps.


UPDATE: What if… the icon is not so simple or straight as a pencil? Then we have a better trick to achieve the shadow effect.

1. Duplicate the icon / shape (Ctrl + C, Ctrl + F). Move the duplicated shape to the right and down.


2. Select both shapes then go to Object -> Blend -> Make (Ctrl + Alt + B). Go to Object -> Blend -> Blend Options and set the steps to 250. Doing this you will increase the objects number between the two original shapes.


3. Go to Object -> Expand. Select both Object and Fill, then press OK. While the shapes selected select Unite on the Windows -> Pathfinder Panel. As you see there are too many points so you have to get rid of them.


4. Select these anchor points with the Direct Selection Tool (A) while pressing the Shift key then Remove them with the Remove Selected Anchor Points tool.


5. Insert the original icon / shape from the Clipboard (Ctrl + F). Select the base rounded rectangle and place it to the Clipboard (Ctrl + C). While pressing the Shift key, select the “shadow” shape, then select Intersect on the Pathfinder Panel. You should see something like this:


6. Fill the shadow with a dark green color or with a gradient from gray to white then set it’s Blending Mode to Multiply on the Window -> Transparency Panel.



Thank you for following this tutorial!

Downloaded 2308 times

 If you enjoyed this tutorial please subscribe to our RSS FeedFollow us on Twitter or recommend us to your friends!

I'm a webdesigner from Transylvania, working with Adobe Illustrator and Photoshop, i just love vector illustration. My design interests include user interface design, icon design, branding and identity design.
  • Pingback: Long Shadow of Flat Icons | Vectorgraphit()

  • sweetdorka

    Great Tutorial. Thank you. 🙂

  • Geffrey

    I actually like these whole long-shadow design. Nice tutorial, clear and to the point.

    • graphit

      Thank you Geffrey 🙂 we love flat design too…

      • Geffrey

        I only now realize the mistakes in my previous comment. Let’s just say it was early. 😉 Do you have any other recommendations/tutorials on flat design?

        • graphit

          We’ve updated this tutorial, so hopefully you will find another trick to create flat icons with long shadow 🙂

  • Vincent

    “As you see there are too many points so you have to get rid of them.”

    To avoid having to delete 300+ extra points, you can do first “object -> path -> simplify” (not sure of the words, my illustrator is in French language).

    • graphit

      Yes Vincent, you’ve right, but the Simplify sometimes changes the object and the result is not a straight line, even if you set the Precision to 90-100%…

      • chrism

        great tutorial, cheers!
        would love to hear if anyone knows of a faster way to remove those extra points. Vincent’s suggestion is good but like you say can be a bit inaccurate.

        • HARPOON F. FLYBY

          You could use the 3D tool to extrude the shape along a 45 degree angle of rotation, turn perspective to zero, etc

          • graphit

            Interesting idea! Can you show us a Screenshot of the result please? I would like to insert in this tutorial…

  • Pingback: Learn to Draw Zingy Icons in Adobe Illustrator… It’s Fun and Easy with This Set of Tutorials | DesignFloat Blog()

  • Very nice and clean tutorial.Thx.

  • Barry

    Great Tutorial, thank you.

    However, I got stuck for a while because I hadn’t read section/stage 3 properly – could be beneficial to bold the word ‘unite’ in 2nd sentence of this paragraph to be clear that you need to select the ‘unite’ option in the Pathfinder Panel, otherwise you might be deleting over 250 layers of multiple points to get nowhere… :/

    • graphit

      Thank you Barry for your feedback, I’ve made that modification. Please tell me if you have any other remark. If you want, share with us your long shadow Icon 🙂

  • Pingback: 15 Adobe Illustrator Tutorials for Beginners - Tutsgeek.com()

  • sahil

    Hey please help me you didn’t tell in this step how you removed the upper part.

    • graphit

      Hi, thanks for this remark. Here is the missing step:

      To place the gray shape behind the pencil’s body, select it press Ctrl + X. Select the pencil’s body, and press Ctrl + B, to place back the shape BEHIND the pencil.

      • sahil

        Thank you so much

  • sahil

    It would be really helpful if you could make a video on how to do that pencil please

  • Pingback: Iconicos | Pearltrees()

  • Pingback: Shadow Flat | Pearltrees()

  • Pingback: Icon - code snippets()

  • Pingback: 38 Absolute Best Tutorials for Learning Icon Design - DesignM.ag()

  • Pingback: Create a Flat Icon with Long Shadow in Adobe Illustrator |()

  • Pingback: 38 Absolute Best Tutorials for Learning Icon Design()

  • After reading the whole post I was thinking that it will be easier to create such flat icon but now I am understanding its not so easy task. Still trying to be good enough on this.

  • I have done the shadow creation in photoshop but not tried illustrator yet. After seeing the tutorial it is seeming there is no much difference on this so will try for sure.

  • Dian

    thank you so much!

  • Isaac Sefcik


  • Awesome tutorial I am following the instruction today to create 16 icons for an app 🙂 why use CYMK not RGB as some colors work better on screens with that set up?