Create Flutter Icons from PNG Images

I was having fun with flutter and I wanted to create some custom icons. If you already have SVG images, there are plenty of guides out there that can help you do it (for example, How to add your own custom icons in Flutter made easy.

I unfortunately only had PNG images and this was where things got tricky.

Use GIMP to modify the PNG

First up I took the PNG and opened it in the GNU Image Manipulation Program called Gimp. Gimp is quite a complex tool and you may have to read up on how to make the following changes but it should be straight forward. All I did was to make some changes to the image to crop it to my selection and scaled the image to 600 by 600 pixels. I then saved the modified image as a PNG.

Use Inkscape to convert the PNG to SVG

I then used the tool Inkscape to open the PNG. You now need to covert the PNG to a vector graphic. To do this, select "Path" -> "Trace bitmap". You may have to play with the various options depending on your image but because my image was good quality and black and white, the default options seemed to work fine. Note that the traced vector usually is placed over the top of the image, so just move the vector aside and delete the underlying image.

Edit the SVG image in your favourite text editor

I had considerable difficulty getting a site that can create the icon font from SVGs to not throw up errors. The site is FlutterIcon and it kept giving me errors whenever I tried to drag and drop the SVG in to the webpage. I almost gave up until I decided to edit the SVG file in a text editor. The SVG is an XML document and all you need to do is open it in your favourite text editor and:

• Remove any XML attributes and elements that refer to "sodipodi"
• Remove the "metadata" XML element
• Delete the "defs" XML element
• Remove the "style" attribute from the "path" XML element Make sure you only one "path" element. If not then something probably went wrong with the bitmap trace.

Extract the ZIP file downloaded from FlutterIcon

Drag your SVGs into FlutterIcon and download the resultant ZIP file.
Extract the ZIP file and place the Dart file in your lib directory.
Place the font directory at the top level of your flutter project directory.
Follow the instructions at the top of the Dart file to include the font in your pubspec.yaml.
Now you can use the resulting icons be prefixing MyFlutterApp to the name of the icon.