New post Thank you for 2021. Expecting a bigger you in 2022 Read More


How to add custom icons in Flutter applications.

2 Mins read

Hello everyone and welcome to a brand new tutorial on Flutter. Today, we’re going to learn how to create our own custom icons in flutter and use them in our applications.

If you want to know some cogent flutter Tricks and Tips and How to achieve tasks easily in Flutter, subscribing to my YouTube Channel. Thanks

Let’s get started

Kindly check out my video tutorial πŸ‘‡

Custom Icons in Flutter – Tech With Sam

The first thing you need to have is your customized icons file saved has .svg, if you have a UI/UX designer in your team, just ask him/her to help you design an icon and save it has dot svg(.svg)

Screenshot 2021-03-05 113901.png

After, you have gotten those icon files just go to and drag those icon svg files to the homepage of the website

Screenshot 2021-03-05 125611.png

Then you select those icons you want to download, for example, I select only two icon

Screenshot 2021-03-05 125703.png

After selecting those icons you want to download, all you just need to do is to click on download, then you will get a zip file, unzip the file and there will be three items in the folder

Screenshot 2021-03-12 065448.png
screenshot – techwithsam

Open the fonts folder and copy the MyFlutterApp.tff file to your flutter app directory in the asset folder or font folder and you can also change the name of the file to any name you want.

We need to declare our font file in the pubspec.yaml file just like using a normal font file and be mindful of the spacing

    - family: MyFlutterApp # the name of your font family
        - asset: assets/MyFlutterApp.ttf # your font file name and the directory

One last step is to create a new dart file that will contain your icon class name with the icon’s name as well, So create another file dart file – icons.dart.

Then inside the file you download from earlier you will find a dart file called my_flutter_app_icons.dart just copy everything inside the file and paste it in your icons.dart file or you can simply move my_flutter_app_icons.dart to your project directory, whichever one you like πŸ€·β€β™‚οΈ

import 'package:flutter/widgets.dart';

class MyFlutterApp {

  static const _kFontFam = 'MyFlutterApp';
  static const String _kFontPkg = null;

  static const IconData home = IconData(0xe800, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData saved = IconData(0xe801, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData download = IconData(0xe802, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData user = IconData(0xe803, fontFamily: _kFontFam, fontPackage: _kFontPkg);

And our custom icon is ready to be used, so to use your custom icon, just call the icon call name then you will get the list of icon available



you can have something like this

                leading: Icon(MyFlutterApp.home),
                title: Text('This is a custom home icon')),
                leading: Icon(MyFlutterApp.saved),
                title: Text('This is a custom saved icon'))

And that’s all the major stuff you need πŸ‘Œ, You should check out the video for the full explanation.

Custom Icons in Flutter – Tech With Sam

Full Source Code πŸ‘‡ – Show some ❀️ by starring ⭐ the repo and do follow me πŸ˜„!

Custom icon with bottom navigation in flutter

I hope you have learned one thing or the other, kindly give this article much appreciation you want if you enjoy it, feel free to ask a question and leave a comment if you feel like it 🀭. Thanks for reading and see you in the next series.

πŸ”— Let’s Connect πŸ”— ==> Github | Twitter | Youtube | WhatsApp | LinkedIn | Patreon | Facebook.

Join the Flutter Dev Community πŸ‘¨β€πŸ’»πŸ‘¨β€πŸ’» ==> Facebook | Telegram | WhatsApp | Signal.

Subscribe to my Telegram channel | Youtube channel | and also to Techpadi newsletter in the input box above πŸ‘†πŸ‘†. Thanks

Happy Fluttering πŸ₯°πŸ‘¨β€πŸ’»

18 posts

About author
I'm passionate about learning and teaching programming, majorly Flutter at the moment. I make friends, develop, or learn from them.
Related posts

Mobile Advertising: Benefits and Helpful Tips on How to run it.

2 Mins read
These days, people spend more time looking at their smartphones than they do on computers. Mobile devices allow people to stay constantly…

Display ads on mobile devices.

3 Mins read
Nowadays, People spend an average of 5hr on their mobiles. Whether you’re focused on driving sales or building a brand, mobile is…

Mobile Marketing: Search ads on mobile devices.

4 Mins read
If you’re interested in how search ads can help you reach people on their mobiles, you probably already know a bit about…
Get powered up with Techpadi Newsletter

Be the first to know what's happening in the African tech space

Leave a Reply