How to use an image instead of an icon in flutter?

Most of the time you'll find that the underling icon property is a Widget, so you can directly replace your Icon with Image.asset and provide it a width, height and fit according to your needs:

Image.asset(
  'assets/images/foo.png',
  width: 44,
  height: 44,
  fit: BoxFit.cover,
)

Example (in a TabBar)

TabBar(
  tabs: [
    Tab(
      text: 'Icon',
      icon: Icon(Icons.call), //    <-- Icon
    ),
    Tab(
      text: 'Image',
      icon: Image.asset( //        <-- Image
        'assets/images/foo.png',
        height: 44,
        fit: BoxFit.cover,
      ),
    ),
  ],
)

As per documentation Tab icon property ask a widget so you can pass like this also or any other widget also

new Tab(icon: new Image.asset("assets/img/logo.png"), text: "Browse"),

So follow up to @RobinSinha answer, using the Tab widget looks weirds as the Tab widget has an external padding, so i'd suggest to avoid that:

BottomNavigationBarItem(
       icon: Image.asset(
           "assets/images/image.png",
            width: <put your desired width, recommended 24.0>,
            height: <put your desired width, recommended 24.0>,
           ),
        label: '<name for icon>'
),

ImageIcon widget is the most suitable widget to use images as icons in Flutter. You can use its property image to assign your own image.

ImageIcon(
     AssetImage("images/icon.png"),
     color: Colors.red,
     size: 24,
),

Tags:

Flutter