New post Need visibility? Apply for a FREE post for your Startup.Β  Apply Here


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 πŸ₯°πŸ‘¨β€πŸ’»

Don’t miss any tech news ever!

We don’t spam! Read our privacy policy for more info.

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
ArticleMobileNow you knowRandom

5 Essential Android Apps iPhones Should Have

3 Mins read
The battle for supremacy between the iPhone and Android mobile phones seems ending. The argument for and against whichever brand you support…
ArticleMobileNow you knowRandom

All You Need To Know About Your iPhone Battery Health

2 Mins read
The iPhone is renowned for its sleek design, user-friendly interface, and advanced features. However, like all smartphones, it relies on a battery…

Motorola Unveils Under $100 Android 14 Smartphone Better Than The iPhone 15 Specs

2 Mins read
I remember growing up, one of the phones you can easily find in the Palms on many is a Motorola blue light…
Newsletter Subscription

🀞 Don’t miss any update!

We don’t spam! Read more in our privacy policy

Join our Telegram channel here -

Leave a Reply