Flutter Icon Tutorial

Flutter Icon Widget Tutorial

The Flutter Icon widget displays a glyph from an IconData object. It is commonly used for navigation controls, status indicators, action buttons, and compact visual labels in Material applications.

This tutorial explains how to create a Flutter Icon, change its size and color, place text below it, use theme-based icon styling, add accessibility labels, and choose the correct widget when an icon must respond to a tap.

Create a basic Icon using the built-in Icons class.
Change the icon size with the size property.
Change the icon color with the color property.
Place an icon and text label in a Column.
Apply shared styling with IconTheme.
Use IconButton for interactive icons.

Flutter Icon Widget Syntax and Main Properties

The first positional argument of Icon is an IconData value. In a Material app, you usually select this value from Flutter’s built-in Icons class.

</>

Copy

Icon(
  Icons.home,
  size: 32,
  color: Colors.blue,
  semanticLabel: 'Home',
)

Icon property	Purpose
`icon`	The `IconData` glyph to display.
`size`	The icon size in logical pixels.
`color`	The color used to paint the icon.
`semanticLabel`	A text description for accessibility services.
`textDirection`	Controls directional icon rendering when the glyph supports mirroring.
`shadows`	Applies one or more shadows to the icon.
`fill`, `weight`, `grade`, `opticalSize`	Optional variable-icon font settings when supported by the selected icon font.

When size or color is omitted, the widget can inherit those values from the nearest IconTheme. This makes it easier to keep a group of icons visually consistent.

Example – A simple Icon Widget Example

This example demonstrates a Flutter Icon with just the icon specified and other properties left to default values.

You can specify the required icon as argument to Icon class. The list of all icons that come with flutter are available in Icons class. You can also use icons from assets.

</>

Copy

 Icon(Icons.directions_transit)

Icon accepts IconData as argument to display the icon. Icons class IconData constants that are regularly used. You can also use codePoint with IconData class to specify the icon. Browse through icons.dart and you shall understand.

main.dart

</>

Copy

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Icon Tutorial',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TutorialKart - Icon Tutorial'),
      ),
      body: Column(children: <Widget>[
        Center(child: Icon(Icons.directions_transit)),
      ]),
    );
  }
}

Output

Increase the Size of Icon

You can increase the size of Icon to a required value by assigning the size property with specific double value.

</>

Copy

Icon(
  Icons.directions_transit,
  size: 70,
)

Following is the complete code to change the size of icon.

main.dart

</>

Copy

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Icon Tutorial',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TutorialKart - Icon Tutorial'),
      ),
      body: Column(children: <Widget>[
        //basic example
        Center(child: Icon(Icons.directions_transit)),
        //increase the size of icon
        Center(child: Icon(Icons.directions_transit, size: 70,)),
      ]),
    );
  }
}

Output

Change Color of Icon

You can change the color of Icon widget using color property. Provide a value of type Color to the color property as shown below. You can specify color using Colors class, Color.fromARGB(), Color.fromRGBO(), etc.

main.dart

</>

Copy

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Icon Tutorial',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TutorialKart - Icon Tutorial'),
      ),
      body: Column(children: <Widget>[
        //basic example
        Center(child: Icon(Icons.directions_transit)),
        //change color of icon
        Center(child: Icon(Icons.directions_transit, color:Colors.green, size: 70,)),
      ]),
    );
  }
}

Output

Icon with Text Label

Most of the times, you see applications with an Icon and text below it. You can build that in Flutter using a Column widget. Enclose Icon and Text widgets in Column as shown in the following code.

main.dart

</>

Copy

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Icon Tutorial',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TutorialKart - Icon Tutorial'),
      ),
      body: Column(children: <Widget>[
        //icon with label below it
        Container(
          padding: EdgeInsets.all(30),
          child: Column(
            children: <Widget>[
              Icon(Icons.directions_transit, size: 40),
              Text('Trains')
            ],
          ),
        )
      ]),
    );
  }
}

Output

Style Multiple Flutter Icons with IconTheme

Use IconTheme when several descendant icons should share the same size, color, or opacity. An individual Icon can still override an inherited value by setting that property directly.

</>

Copy

IconTheme(
  data: const IconThemeData(
    size: 36,
    color: Colors.indigo,
  ),
  child: const Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      Icon(Icons.home),
      SizedBox(width: 16),
      Icon(Icons.search),
      SizedBox(width: 16),
      Icon(Icons.settings),
    ],
  ),
)

For application-wide defaults, configure the icon theme in ThemeData. Prefer theme colors such as Theme.of(context).colorScheme.primary when the icon should adapt to the active app theme.

Use IconButton When the Flutter Icon Is Tappable

The Icon widget only paints a glyph; it does not provide a tap callback, button semantics, focus handling, or a Material ink response. Use IconButton for actions such as search, delete, refresh, or opening a menu.

</>

Copy

IconButton(
  icon: const Icon(Icons.refresh),
  tooltip: 'Refresh',
  onPressed: () {
    // Refresh the current data.
  },
)

Set onPressed to null when the action is unavailable. Flutter then treats the button as disabled and applies the disabled styling from the current theme.

Add Accessible Labels to Flutter Icons

A decorative icon does not need to repeat information already provided by nearby text. A meaningful standalone icon should have an accessible description. For a non-interactive Icon, use semanticLabel. For an IconButton, provide a clear tooltip, which also supplies a useful description for many assistive-technology scenarios.

</>

Copy

const Icon(
  Icons.warning_amber,
  color: Colors.orange,
  semanticLabel: 'Warning',
)

Do not rely on color alone to communicate state. Pair an icon with text, a tooltip, or another visible cue when users must distinguish success, warning, error, selected, or disabled states.

Display a Custom Icon Font with IconData

Flutter can render glyphs from a custom icon font by creating an IconData value with the font’s code point and family name. The font must first be declared in pubspec.yaml. Use the hexadecimal code point supplied by the icon font.

</>

Copy

const IconData customStar = IconData(
  0xe900,
  fontFamily: 'CustomIcons',
);

const Icon(customStar, size: 32)

For ordinary Material symbols, prefer constants from Icons. They are easier to read and avoid manually managing code points.

Flutter Icon Layout and Rendering Notes

An icon’s visual glyph may not fill the entire square defined by its size; the font’s internal metrics affect the visible shape.
Use SizedBox, Padding, Row, or Column to control spacing around an icon.
Use FittedBox carefully when an icon must scale within limited space.
A large icon is not automatically a large touch target. Use IconButton and suitable padding for interactive controls.
Directional icons may mirror in right-to-left layouts when their IconData is marked as direction-aware.

Complete Code in GitHub

You can get the complete code of the Flutter Application used in the above examples at the following link.

https://github.com/tutorialkart/flutter/tree/master/flutter_icon_tutorial.

Flutter Icon Widget Questions

How do I change the size of an Icon in Flutter?

Set the size property to a logical-pixel value, such as Icon(Icons.home, size: 40). When size is omitted, Flutter uses the nearest IconTheme value.

How do I change a Flutter Icon color?

Pass a Color to the color property. You may use a predefined value such as Colors.green or a color from the current theme’s ColorScheme.

Why is onPressed not available on the Icon widget?

Icon is a display widget, not a button. Use IconButton when the icon represents an action and must handle taps, keyboard focus, tooltips, and disabled states.

How can I put text below an Icon in Flutter?

Place the Icon and Text widgets inside a Column. Add a SizedBox between them when you need explicit vertical spacing.

Can Flutter use custom icons?

Yes. You can use a custom icon font through IconData, display an image asset, or render an SVG with a suitable package. Use Icon specifically when the source is an IconData glyph.