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? The design looked so polished in the mockup, and the stock Material icons felt like they came from a different planet. Getting the details right, the exact dimensions and well-crafted images and icons, is what separates an app that looks like a demo from an app that looks like a product.
For today’s TIL (Today I Learned), we will get deeper on how to add custom icons to the Flutter development environment as well as use it in an app.
🎨 To icon or not to icon?
Manually creating icons from scratch seems to be a bit daunting. Designing a consistent icon set by hand means matching strokes, weights, and spacing across every glyph, which is a design specialty all by itself. 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. Go to FlutterIcon
First is to go to the FlutterIcon site. It is a web tool that takes icons from popular open source sets and packages them into a custom Flutter font, exactly like a font foundry, but for your app.
2. Pick Your Icons
Create your own set of icons from the various sources or upload a custom one. You can mix icons from multiple sets, and whether you choose an existing library or bring your own SVG, the tool handles the conversion.
3. Name and Download
You make a suitable name like (e.g. SuperSimpleLineIcons) then download your own custom font. The name you choose becomes the prefix used by the generated Dart class, so pick something that describes the set.
4. Extract the Files
Extract the downloaded files. Inside you will find the font file itself, the generated Dart source, and a README with instructions.
5. Move the Font into Your Project
Move the font folder into your Flutter project, better if you create an assets folder. Keeping assets organized from day one saves you from a scattered project later.
6. Copy the Dart File
Copy the generated dart file to your Flutter lib directory. This file is the bridge: it maps each icon’s name to its code point in the font.
7. Update pubspec.yaml
View the contents of the generated dart file. You’ll see the header part’s instruction and apply it to your pubspec.yaml file. This is the step people always forget, and the result is a confusing “font not found” error, so read the header carefully.
8. Import the Generated Dart File
Import the generated dart file to your Flutter source on where you want to include the custom icons.
9. Use Your Icons
To use the icons inside your Flutter project, call it like this Icon(CustomIcons.copyright). Same API as the built in Material icons, just with your own set.
Also check this GitHub repository to know more info and get help with PolyIcon.
🧠 Final Thoughts
As for developer tooling, one of the several factors a developer may consider before diving into a new language is how good the ecosystem around it is. And Flutter has many of those tooling advantages compared to React Native. Currently, Dart has native first class auto completion and analyzer integrated into VS Code and several other editors, which means the editor catches your mistakes before the device does.
It’s up to you now to decide which programming language you would choose. Do it React Native or Flutter in developing modern production grade apps. Whichever you pick, remember that icons are the tiny details your users notice even when they cannot say why. See you on the next Flutter series.
Hope you guys enjoyed this article! 🧡❤