Quick Tip – Use .png image as an icon in Flutter

How to use .png image as an icon in Flutter

Instead of the icon, you can use a transparent image .png.

In this example, I used the image in the bottom navigation bar and the floating action button.

bottomNavigationBar: BottomNavigationBar(items: [
        BottomNavigationBarItem(
            icon: Image.asset(
              "assets/FlutterAssets_logo.png",
              width: 40,
              height: 40,
            ),
            label: 'PNG icon 1'
        ),
        BottomNavigationBarItem(
            icon: Image.asset(
              "assets/FlutterAssets_logo.png",
              width: 40,
              height: 40,
            ),
            label: 'PNG icon 2'
        ),
        BottomNavigationBarItem(
            icon: Image.asset(
              "assets/FlutterAssets_logo.png",
              width: 40,
              height: 40,
            ),
            label: 'PNG icon 3'
        ),
      ],

      ),



      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Image.asset(
          "assets/FlutterAssets_logo.png",
          width: 40,
          height: 40,
        ),
      ),

You can read more about Icons in Fluter in this post:

Flutter Basics – How to use Icons in Flutter

Also, you can read more about images here:

Flutter Basics – How to use an image in Flutter