The Flutter framework has its own list of icons, quite a big range of icons for you to choose. In its framework, these icons can be integrated simply when you are making both Android and iOS apps. But sometimes the built in icons aren’t enough! So today, let’s talk about how we can get your own custom flutter icons.
As a background, FlutterIcon.com, forked from Fontello, quickly packs vector images into TrueType Font files (.ttf) icon fonts to use within Flutter framework apps. It magically builds whatever is required by the Flutter apps for you to integrate your flutter icons seamlessly. As an added bonus, the website has a range of artworks that you can choose to start with.
If you would like to know more about the background of the website, you can visit this site!
Let’s begin with the Flutter Icons tutorial, shall we?
1. Open fluttericon.com
2. It will look like that, from there, you have two options:
a) You can put your custom icons (they must be SVG files, font-files, or JSON files) or get icons like these for you to upload!
b) You can click on any icons you want on the “Material Design Icons”
3. If you picked a), then the uploaded file will look like this:
A) You can click on it for more information.
B) Also make sure that you give it a name there:
4. Afterwards, you can download the .zip file containing all the tools you need for it. Extract that to a folder of your choice.
5. The config.json file that is downloaded within is special in the sense that it saves your selections and custom icons. This makes it easier when you revisit fluttericon.com! You can simply drag and drop the file and all your configurations will be there!
6. Move the TrueType font (.ttf) file to the folder of your choice.
7. Move the .dart file to the folder of your choice in lib.
8. Afterwards, follow the instructions located on the top of the .dart file. Copy the fonts code to pubspec.yml
9. This is the final moment, flutter run and make sure whatever project you are doing compiles properly and the app starts!
10. Congratulations! Your icons can be used in Flutter!
We have several vector icons for you to use as Flutter icons! Just to name one, check out these Medical Hospital Vector Icons.