I used text tool ( F8) and heart emoji to create my icon as shown below. The text or icon can be positioned in the middle of the background with the help of Align and Distribute window ( Shift + Strl + A). You can draw your icon in inkscape, you can also type in a text but then convert it to a path by going to Path -> Object to Path ( Shift+Ctrl+C). You will have two layers in the Layers dialog as shown below.

For clarity, you can also rename first layer, I have renamed it to Background. Or you can open Layers dialog from Layer -> Layers menu option ( Ctrl, Shift and L) and add a new layer by using ‘+’ button. You can add new layer by going to Layer -> Add Layer ( Ctrl, Shift and N). In order to have maximum flexibility later, we will create basic icon on a separate layer. I set it to f15935ff to fill background with reddish-orange color as shown in following image. Set RGBA value to the hex value of color that you want. To do this, open Fill and Stroke dialog by going to Object -> Fill and Stroke ( Ctrl, Shift and F). It’ll be needed later for creating long shadow.Ĭhange the fill color of this square to the color you want for your icon background. Leave some space below and on right side of the background as shown below. You can use the info bar at the bottom of Inkscape to see the rectangle size while drawing.

Hold down the Ctrl key to constrain to a square. Now we will create a square background for our icon.įor this, grab Rectangle tool ( F4) from the toolbox. Set zoom to 100% or a reasonable value as per your convenience. Set document size to 600 px square as shown below. Create icon elements Step 1Ĭreate a new Inkscape document then go to File -> Document Properties.

We will finish by learning how to export our image to different-size icons. Finally we will remove the extra shadow and icon copy by creating a clipping mask. Next we will apply gradient to the shadow and reduce its opacity. For this, we will first duplicate app icon then use transform and interpolate functions in inkscape. After this, we will learn to create long shadow. We will start with creating icon elements: background and basic icon. In this tutorial I will show how you can create a flat long shadow app icon from scratch using free vector graphics editor, Inkscape. Many Windows Phone apps including 6snap (shown below) use this design in their app logos. Using long flat shadow for designing app icons is a popular trend in flat design. These extended drop shadows are characteristically angled at approximately 45 degrees below the horizontal axis, preferably towards the right.

How to shadow text in inkscape