Flutter Series – Custom Icons

Everyone thinks of changing the world, but no one thinks of changing himself.

— Leo Tolstoy.

Custom free icons for everyone! Just joking I’m not the one giving.

Joking aside, as I began learning Flutter to develop new apps. I began to wonder, how can I beautify it to almost match the wire frame I’m copying.

There are several things to consider, getting exact dimensions and well crafted image and icons. For today’s TIL (Today I Learned), we will get deeper on how to add custom icons to flutter development environment as well use it in app.

To icon or not to icon?

Manually creating icons from scratch, seems to be a bit daunting. But do not worry as there are tools to create this automatically already.

Meet fluttericon! Just like a father introducing his son to everyone.

Anyways, to create your first set of icons follow the steps below.

1. First is go to FlutterIcon site.
2. Create your own set of icons from the different sources or upload a custom one.
3. You make a suitable name like (e.g. SuperSimpleLineIcons) then download your own custom font.
4. Extract the downloaded files.
5. Move the font folder in your flutter project, better if you create an assets folder.
6. Copy the generated dart file to your flutter lib directory.
7. View the contents of the generated dart file. You’ll see the header part’s instruction and apply it to your pubspec.yaml file.
8. Import the generated dart to your flutter source on where you want to include the custom icons.
9. To use the icons inside your flutter project, call it like this Icon(CustomIcons.copyright).

Also check this GitHub repository to know more info and get help PolyIcon.

Conclusion

As for developers tooling, one of the several factors a developer may consider before diving in to a new language. And flutter, has many of those tooling compared to react native. Currently, dart has native first class auto completion and analyzer integrated to VS tools and several other editors.

Its up to you now to decide which programming language you would choose. Be it react native or flutter in developing modern production grade app. See you on the next flutter series.

Hope you guys, enjoyed this article! 🧡❤