How to add your own custom icons in your Flutter application made easy.
Tags: flutter, tutorial, techwithsam, beginners
Published: 2021-03-15 17:10:44

**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 more about some cogent flutter Tricks and Tips and How to achieve tasks easily in Flutter, consider following me and sign up for the newsletter so you don’t miss any updates and also subscribe to my [YouTube Channel](https://www.youtube.com/c/TechWithSam?sub_confirmation=1). Thanks

### Let's get started

Kindly check out my video tutorial 👇

{% youtube FUeAr2LkSSw %}

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](https://cdn.hashnode.com/res/hashnode/image/upload/v1614940821297/9x73RQ7v5.png)

After, you have gotten those icon files just go to [fluttericon.com](https://fluttericon.com) and drag those icon svg files to the homepage of the website

![Screenshot 2021-03-05 125611.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614945544567/txBlovuJN.png)

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

![Screenshot 2021-03-05 125703.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614945512058/Y1Ofei84Q.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1615528522731/J5gZZwkWF.png)

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

```
  fonts:
    - family: MyFlutterApp # the name of your font family
      fonts:
        - 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 fluttericons.com 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 {
  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 

```
Icon(MyFlutterApp.home);
```

# OR

you can have something like this

```
            ListTile(
                leading: Icon(MyFlutterApp.home),
                title: Text('This is a custom home icon')),
            ListTile(
                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.

{% youtube FUeAr2LkSSw %}

Full Source Code 👇 - Show some ❤️ by starring ⭐ the repo and do follow me 😄!

{% github techwithsam/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](https://github.com/techwithsam) | [Twitter](https://twitter.com/techwithsam_) | [Youtube](https://www.youtube.com/c/TechWithSam?sub_confirmation=1) | [WhatsApp](https://wa.me/message/JLGQNNTPG64IH1) | [LinkedIn](https://linkedin.com/in/techwithsam) | [Patreon](https://www.patreon.com/acctgen1) | [Facebook](https://facebook.com/techwithsam).

Join the Flutter Dev Community 👨‍💻👨‍💻 ==> [Facebook](https://www.facebook.com/groups/flutterdevsgroup/) | [Telegram](https://t.me/flutterdevsgroup) | [WhatsApp](https://chat.whatsapp.com/Cns1jo7dc5dCNrg6aG44My) | [Signal](https://signal.group/#CjQKILccbSu9GnMF_qVrkdCFVQ_i2gmnigPDvweCy86JGpL3EhBg39kp1rftGQgZDYXLty7t).


Subscribe to my [Telegram channel](https://t.me/acctgen) | [Youtube channel](https://www.youtube.com/c/TechWithSam?sub_confirmation=1). Thanks

**Happy Fluttering** 🥰👨‍💻