Flutter - Create Custom Icon

In this tutorial, I'm going to show you how to create custom icon in Flutter

Flutter provides a lot of Icons to use out of the box and it's very easy to use those icons. However, you can also use your own icons. What you need to have is a TTF (True Type Font) file containing the icons you want to use. The easiest way to generate the TTF file is using Fluttericon.com.

1. Create or Find SVG File(s)

You need at least one SVG file. You can find free SVG images in the Internet or create your own files. It must be in SVG format.

2. Open Fluttericon.com

Upload the SVG file(s), wait a few moment and you'll see download button on the top right corner. Press the button to get a zip containing the files you need.

3. Extract the Downloaded Zip and Copy the Files.

Inside fonts folder, there is a .ttf file. Copy it to a directory in your project, such as assets/fonts.

Then, copy the .dart file inside lib directory. For example, you can copy it to lib/assets. The file should look like this. There are multiple IconData constants, each representing an Icon.

  import 'package:flutter/widgets.dart';

  class MyCustomIcons {
    MyCustomIconss._();

    static const _kFontFam = 'MyCustomIconss';

    static const IconData icon1 = const IconData(0xe800, fontFamily: _kFontFam);
    static const IconData icon2 = const IconData(0xe801, fontFamily: _kFontFam);
  }

4. Update pubspec.yaml File

Right under flutter section, add fonts to add the .ttf file you've copied.

  flutter:
    fonts:
      - family:  MyCustomIcons
        fonts:
        - asset: assets/fonts/MyCustomIcons.ttf

5. Import the .dart File to Use The Icon.

In the file that you want to use the icons, import the downloaded .dart file and you're ready to use your icons.

  import './assets/my_custom_icons.dart';
  void main() => runApp(MyApp());

  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter DropdownButton Tutorial',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter DropdownButton Tutorial by Woolha.com'),
          ),
          body: Center(
            child: Icon(MyCusstomIcons.icon1),
          ),
        ),
      );
    }
  }