IconButton in Flutter

Introduction

An IconButton lets users tap on an icon to do something. It's like a button but shows a picture instead of text.

When you want a small clickable icon in your app, like a trash can to delete something.

To add a button with a symbol in a toolbar or app bar.

When you want a simple button that only shows an image, not words.

To make your app easier to use with clear, familiar icons.

When you want to save space but still have a clickable action.

Syntax

Flutter

IconButton(
  icon: Icon(Icons.example_icon),
  onPressed: () {
    // action to do when tapped
  },
  tooltip: 'Description',
  color: Colors.colorName,
  iconSize: 24.0,
)

The icon property is required and shows the icon image.

The onPressed property is a function that runs when the button is tapped. If it is null, the button is disabled.

Examples

A simple heart icon button that prints a message when tapped.

Flutter

IconButton(
  icon: Icon(Icons.favorite),
  onPressed: () {
    print('Favorite tapped');
  },
)

A red delete icon button with a tooltip and bigger size.

Flutter

IconButton(
  icon: Icon(Icons.delete),
  color: Colors.red,
  iconSize: 30.0,
  onPressed: () {
    print('Delete tapped');
  },
  tooltip: 'Delete item',
)

Sample App

This app shows a blue thumb-up icon button in the center. When you tap it, it prints a message in the debug console.

Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('IconButton Example')),
        body: Center(
          child: IconButton(
            icon: const Icon(Icons.thumb_up),
            color: Colors.blue,
            iconSize: 40.0,
            tooltip: 'Like',
            onPressed: () {
              debugPrint('Thumb up pressed');
            },
          ),
        ),
      ),
    );
  }
}

Important Notes

Always provide a tooltip for accessibility so screen readers can describe the button.

If onPressed is null, the button looks disabled and cannot be tapped.

You can customize the icon size and color to fit your app's style.

Summary

IconButton is a button that shows an icon instead of text.

Use icon to set the icon and onPressed for the tap action.

Adding a tooltip helps users understand the button's purpose.