• INTRODUCTION
• ABOUT INKSCAPE
• ABOUT SVG
• THE INKSCAPE INTERFACE
• WORKING WITH FILES
• TOOLBOX
• SELECT TOOL
• NODE TOOL
• TWEAK TOOL
• ZOOM TOOL
• RECTANGLE TOOL
• 3D BOX TOOL
• ELLIPSE TOOL
• STAR TOOL
• SPIRAL TOOL
• PENCIL TOOL
• PEN TOOL
• CALLIGRAPHY TOOL
• BUCKET FILL TOOL
• TEXT TOOL
• CONNECTOR TOOL
• GRADIENT TOOL
• DROPPER TOOL
• PATHS
• MODIFY PATH
• TEXT
• STYLING TEXT
• TEXT EFFECTS
• TEXT AND PATHS
• MULTIPLE OBJECT OPERATIONS
• COPY, CLONE, & DUPLICATE
• CLIP AND MASK
• POSITIONING OBJECTS
• INTRODUCTION
• ALIGN AND DISTRIBUTE
• ORGANISING OBJECTS
• LAYERS
• GROUPING
• STYLING OBJECTS
• INTRODUCTION
• FILL AND STROKE
• STROKE STYLE
• COLOR PALETTE
• LIVE PATH EFFECTS
• INTRODUCTION
• GEARS
• PATTERN ALONG PATH
• KNOT
• SVG FILTERS
• INTRODUCTION
• ADVANCED
• COLOR MANAGEMENT
• GENERATE TEMPLATE
• TUTORIALS
• INSTALLING ON WINDOWS
• CREATING ICONS
• APPENDICES
• CREDITS

Create a Basic Icon

Inkscape is an excellent tool for creating icons. Generally speaking icons are required in different formats so that makes SVG an excellent format as it is a scalable graphics format. This means you can shrink or enlarge the graphic to the required size without losing any quality.

This tutorial was made with Ubuntu, but works with any operating system supported by Inkscape. In this case, only the way you open Inkscape and the general look and feel may be different.

Create New Icon File 

First open Inkscape and to create a new file. Click on the File menu and choose 'New' and then 'icon_32x32'.

A new blank file will then open with, in this example, a grid:

The grid is a 32x32 block grid, the same size as many of the icons you will find on your computer. The lines in this grid will not appear when the final image is exported to another type of file such as JPEG  or GIF. The grid is just there to help you create the square icon within the standard 32x32 pixel dimensions. It's possible to add or remove the grid using the 'View>Grid' menu.

Save the File

Before you start work it is a good idea to first save the file. Even though the content of the file is empty it is good practice to always save the file before you start so that you can easily save the changes as you go. By doing this you ensure yourself against losing your work if your computer crashes or turns off unintentionally. Save the file by clicking on 'File' and 'Save As...' :

This will pop open a dialog box. The style of your dialog may differ from the following :

 

You can change the name of the file to anything to help you identify it (in the above example it is 'drawing.svg'). Make sure when you save it the file name has '.svg' at the end. You can also click through the folders on your computer using this dialog box until you find the folder where you wish to save the file. When you have the right location click 'Save'.

Using the Icon Preview Window

If you are going to be exporting the image into a bitmap version and using it for multiple reasons, it may be important to know how it will turn out as a icon during the creation process. Therefore Inkscape has the added feature of a bitmap previewer. This window will let you see what your icon will look like in the 16x16, 24x24, 32x32, 48x48 and 128x128 common size views. Located in the Menu through: View > Icon Preview...

Start Work

Now we will proceed to draw the icon. You can choose any of the tools for creating shapes and colors. Currently icons that look three dimensional are very popular but we will look at creating a very two dimensional icon. So lets make a simple radio icon. It will end up looking something like this:

Lets start with making the background circle. Choose the circle tool from the tool bar on the left of Inkscape:

With this tool selected you need to click in one of the corners of the grid and drag to the diagonally opposite corner. It might take a bit of practice until you have this right. The end result should look something like this:

You may have a dark line around the outside of the circle. If you do we will look at how to remove this shortly. For now we will change the color of the circle to the desired color. I will choose the HTML color code '#ff7f00'. You may wish to choose another color. To change the color of the circle you must right-click on the circle and choose 'Fill and Stroke':

The following dialog should appear:

I know the HTML color code is the equivalent to the RGB code + 'ff'. So I will add 'ff7f00ff' to the RGBA box near the bottom :

If you know your HTML color code then add it here. Otherwise you can use the RGB sliders to choose a color. As you change the values you will see the color of the circle change simultaneously. If you had a line around the outside of the circle when you created it you can now delete it by clicking on the 'Stroke style' tab and set the 'Width' box (at the top of the tab) to 0 (zero) px. When you are happy with the color of the circle just move the 'Fill and Stroke' dialog to the side (if you have enough room on your screen) or close it. We will use it again a little later.

My colored circle now looks like this :

Now we wish to add the radio to the middle of our circle. We will first add a black box with rounded corners to the middle of the circle. Click on the 'Square and Rectangle' tool on the left :

Now click somewhere in the circle and drag the mouse in a diagonal towards the bottom of the page. You are now creating the square but you will not see anything happening on the screen so you have to guess the approximate distance you drag before you release the mouse. You should see something like this :

Now, return to the 'Fill and Stroke' dialog box and change the value of the RGBA box (In the 'Fill' tabe') to "000000ff" :

Now the square should appear black :

You could also have used the color sliders to choose a color.

Now we wish to make nice rounded corners on the black box. To do this mouse over the small round circle at the top right of the black box. It should go 'red' :

Click on the circle when it is red and drag it vertically down and you will all the corners of the black box change to rounded corners as you drag. When you are satisfied with the amount of 'rounding' release the mouse button :

Now we need to create three white circles for the 'dial' and 'tuning buttons' of the radio. Do this using the same method as you used for creating the first large circle, except you want to try and create them in the right place in the black box. 

Now we want an antenna on the top right. We will use the pencil tool that you will also find on the left tool bar:

To draw a straight line click where you wish the line to start and then click again where you wish it to finish:

Now we wish to give the antenna a nice circular tip so we return to the 'Fill and Stroke' dialog and look at the 'Stroke style' tab. You will notice here a 'cap' section :

Click on the middle box in this section and your antenna will be instantly rounded :

 

Exporting to PNG

We will now export this to a PNG. You may wish to use another graphic file format however Inkscape will only support export to PNG. To convert the image to another format you will need to use an image software such as GIMP.

Choose 'File' and 'Export Bitmap...':

You will see a dialog appear like this:

If you just pressed 'Export' right now you would export a 32x32 PNG to the folder '/home/folder'. You can change any of these settings. To change the dimensions of the image click on the arrows next to the Width and Height boxes. To change the file name and the location you wish to export the file to you must click on the 'Browse' button.