Guide to add custom icons to flutter project
Create your own icons for your Flutter application in an easy way with fluttericon.
Flutter provides us with a fairly complete list of icons, ready to use in our applications.
But, no matter how extensive the list of icons is, there will be a project that needs an icon that does not appear in the list or, perhaps, we want to have our own icons to customise our application to the maximum.
If this is your case, here you will find the best way to put any svg image as an icon in your application.
Icons class.
In this Flutter class we have available the icons as static constants, of type IconData.
Let’s see what form this IconData has so that, later on, we can understand in depth what we are doing:
IconData has three properties that we need to understand:
- codePoint: to identify the icon within the font file (remember that these icons are, in short, a font).
- fontFamily: the font family from which the glyph for the codePoint will be selected.
- fontPackage: the name of the package from which the font family is included.
Later, when we generate our icons, we will get a .dart file with our IconData constants.
Example project with customised icons
To create our own icons we will need a Flutter project and the .svg images that we will convert into icons for our application.
The first thing to do is to go to fluttericon and upload our images by dragging them into the box.
We will be able to see how our icon will look like, change the name of the font that will be generated (in our case we will put SuperHeroIcons) and we can change the name of the icons (for this example, batman and superman).
After all this, with the icons selected, we click on download.
Svg images sometimes cause problems because of the way they are made. If your icon doesn’t look the way you expected, you can follow these tips to configure its properties and generate a glyph correctly.
If, following these tips, it still doesn’t look as you expected, don’t hesitate to ask me. I’ve been struggling a lot with some of the images. 😉
When we click on download we have a zipped folder with the following content.
Using the icons
1- Adding the font.
To make use of these icons, the first thing we will do is to take the .ttf file in the fonts folder and add it to our project in the following path, which we will have to create: assets/fonts/
This is how it would look in VS Code
We will also need to update the pubspec.yaml to include the font to the project. We add the assets folder, and the fonts, specifying the family and where the .ttf file will be placed.
2- Creating the class with the constants IconData.
Now we will create a folder called icons and, in it we will put the .dart file that we have inside the folder we downloaded from FlutterIcon.
As we saw before, constants of type IconData have the font code and the family it belongs to.
3- Coding the icon
Now we have everything ready to use our icons. For it in the main.dart we will create two IconButton that will have our icons
Final result 🙌🙌
Conclusion
As we have seen in this article, we have a world of possibilities in icon customisation to make our applications unique. If you have followed the example to the end, you will have seen how easy it is to include custom icons by following a few simple steps.
Although it is true that some images have conversion problems, it will be enough to make some configuration changes with vector drawing software to solve these problems.
I hope this article has helped you.
