Icons are used everywhere in product development. Native apps, desktop apps, even websites need an icon. And Inkscape is a great tool for creating icons as it is a vector graphic software that can export PNGs. And the best: It comes for free without any costs.
First you need to start Inkscape and setup the document. Then you start with the actual design process. After that the resulting icon can be exported from Inkscape as a PNG with transparent background.
- Open Document Properties (File > Document Properties…)
- Set document units to pixel and Width and Height to 32 pixels
- Zoom to fit page window (Zoom Tool, Zoom to fit page window)
- Enable page grid (View > Page Grid)
- Enable icon preview (View > Icon Preview…)
1. Open document properties
2. Set units, width and height
3. Zoom to fit page in window
4. Enable Page Grid
- 5. Enable Icon Preview
Creating the icon
The icon can be best designed when built from basic building blocks like rectangles, arcs and lines. I always try to build everything without outline as the outline is not scaled with the whole icon is. It is also a good idea to keep the elements on the pixel grid for better resizing results. Using the Icon Preview you can see how the icon will look like when resized to different sizes.
Try to keep elements on pixel grid x, y and with, height.
To export the final PNG icon from the Inkscape SVG, choose export PNG from the file menu. In the export pane, first set the X and Y both to zero 0 and enter a with and height of 32 pixels. The final image will should have 90 DPI. Enter a file path and click export.
Open the export PNG pane
Setup and start the export PNG
You can also export the PNG from Inkscape via command line which allows scripting using a batch file:
Using the DPI you can also scale the image. For example when exporting with 180 DPI the 32×32 icon will become 64×64 pixels in size.
The parameters for exporting are described here: http://tavmjong.free.fr/INKSCAPE/MANUAL/html/CommandLine-Export.html