Flutter Icon Widget – A Complete Guide with Examples - Learn FLUTTER | Revochamp

Name: Flutter Icon Widget – A Complete Guide with Examples
Availability: InStock
Author: Revochamp

What is the Icon Widget?

The Icon widget in Flutter displays a graphical icon from the Material Design icon set or a custom image. It is lightweight and can be used anywhere you need a visual symbol – in buttons, list tiles, app bars, or as standalone elements. The most common source of icons is the Icons class, which contains hundreds of pre‑defined Material icons. You can also use custom icons from assets, font icons, or SVG.

Basic Usage

DARTRead-only

Icon(Icons.star)

Icon(Icons.star)

This will display the star icon with the default size (24 logical pixels) and the default color (usually black or the current theme's color).

Customizing Size and Color

You can adjust the icon's size and color using the size and color properties. These override the default theme values.

DARTRead-only

Icon(
  Icons.favorite,
  size: 40,
  color: Colors.red,
)

Icon(
  Icons.favorite,
  size: 40,
  color: Colors.red,
)

The Icons Class

The Icons class provides static constants for all Material Design icons. For a complete list, check the Flutter Icons documentation. Common icons include: Icons.home, Icons.search, Icons.person, Icons.settings, Icons.arrow_back, Icons.more_vert, etc.

Using Icon with Theme

If you don't specify a color, the Icon widget inherits its color from the nearest IconTheme or the default ThemeData's icon color. For example, inside an AppBar, icons are typically white, while in the body they may be black or grey.

DARTRead-only

Icon(Icons.home) // inherits theme color

IconTheme(
  data: IconThemeData(color: Colors.green, size: 30),
  child: Icon(Icons.check_circle),
)

Icon(Icons.home) // inherits theme color

IconTheme(
  data: IconThemeData(color: Colors.green, size: 30),
  child: Icon(Icons.check_circle),
)

Semantics and Accessibility

For accessibility, you should provide a semantic label (text alternative) for icons. Use the semanticLabel property. This is read by screen readers (e.g., TalkBack, VoiceOver).

DARTRead-only

Icon(
  Icons.favorite,
  semanticLabel: 'Like',
)

Icon(
  Icons.favorite,
  semanticLabel: 'Like',
)

Custom Icons from Assets

To use a custom icon from your assets (e.g., a PNG), you can use ImageIcon. It accepts an ImageProvider and behaves like an Icon, respecting size and color.

DARTRead-only

ImageIcon(
  AssetImage('assets/icons/custom.png'),
  size: 24,
  color: Colors.blue,
)

ImageIcon(
  AssetImage('assets/icons/custom.png'),
  size: 24,
  color: Colors.blue,
)

Remember to declare the asset in pubspec.yaml.

Using IconButton

The IconButton widget combines an icon with a touch target, providing a splash effect when tapped. It's ideal for actions like navigation, like, delete, etc.

DARTRead-only

IconButton(
  icon: Icon(Icons.delete),
  onPressed: () => print('Delete'),
  tooltip: 'Delete item',
)

IconButton(
  icon: Icon(Icons.delete),
  onPressed: () => print('Delete'),
  tooltip: 'Delete item',
)

Icon Themes with IconThemeData

You can globally define the default icon size and color using IconTheme or set it in ThemeData. For instance:

DARTRead-only

ThemeData(
  iconTheme: IconThemeData(
    color: Colors.grey,
    size: 20,
  ),
)

ThemeData(
  iconTheme: IconThemeData(
    color: Colors.grey,
    size: 20,
  ),
)

Common Mistakes

- Forgetting to provide a semantic label: Icons without text may be confusing for users with visual impairments. Always set semanticLabel.
- Using Icon inside IconButton but not passing onPressed: IconButton will be disabled, and users may not know why it doesn't respond.
- Hard‑coding icon sizes: Use relative sizes (e.g., Theme.of(context).iconTheme.size) to adapt to different screen sizes.
- Using PNG icons without proper resolution: For crisp display on high‑DPI screens, provide multiple resolutions (2x, 3x) or use vector icons (font icons or SVG).
- Not handling null onPressed: If onPressed is null, the IconButton is disabled; ensure you either handle it or use a GestureDetector if you need a non‑material button.

Key Takeaways

- The Icon widget displays Material icons from the Icons class.
- Customize size and color with size and color.
- Use semanticLabel for accessibility.
- For custom images, use ImageIcon.
- Combine with IconButton for interactive icons.
- Leverage icon themes for consistency.
- Prefer vector‑based icons (font icons, SVG) for scalability.

Try it yourself

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Icon Widget Demo')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(Icons.star, size: 48, color: Colors.amber),
              SizedBox(height: 20),
              IconButton(
                icon: Icon(Icons.favorite, color: Colors.red),
                onPressed: () => print('Favorite tapped'),
                tooltip: 'Add to favorites',
              ),
              SizedBox(height: 20),
              ImageIcon(
                AssetImage('assets/icon.png'), // replace with your asset
                size: 32,
                color: Colors.green,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Test Your Knowledge

of 4

Which property of Icon changes its color?

color

fillColor

iconColor

tint

of 4

What is the default size of an Icon (in logical pixels)?

of 4

How do you add a semantic label to an icon for accessibility?

label

semanticsLabel

semanticLabel

tooltip

of 4

Which widget should you use to make an icon interactive with a splash effect?

Icon

GestureDetector

IconButton

InkWell

Frequently Asked Questions

How do I change the default icon color in my app?

Set the iconTheme in your ThemeData. For example: ThemeData(iconTheme: IconThemeData(color: Colors.blue)). This affects all icons that don't have an explicit color.

Can I use custom fonts (e.g., FontAwesome) as icons?

Yes, using IconData with a custom font family. First, add the font file to your project and declare it in pubspec.yaml. Then create an IconData with the Unicode code point and the font family. For convenience, many packages like font_awesome_flutter already provide the mapping.

What is the difference between `Icon` and `ImageIcon`?

Icon renders a vector‑based icon from the Icons class (or custom font). ImageIcon renders a raster image (PNG, JPEG, etc.) as an icon, allowing it to be colored and sized like an icon.

How do I make an icon circular?

Wrap the Icon in a CircleAvatar or a Container with BoxDecoration(shape: BoxShape.circle) and set the color/background accordingly.

Why is my custom icon blurry?

If you're using a PNG, ensure you have high‑resolution versions (2x, 3x) in your assets. Better, use an SVG (via the flutter_svg package) or a font icon for crisp scaling.

Try it yourself

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Icon Widget Demo')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(Icons.star, size: 48, color: Colors.amber),
              SizedBox(height: 20),
              IconButton(
                icon: Icon(Icons.favorite, color: Colors.red),
                onPressed: () => print('Favorite tapped'),
                tooltip: 'Add to favorites',
              ),
              SizedBox(height: 20),
              ImageIcon(
                AssetImage('assets/icon.png'), // replace with your asset
                size: 32,
                color: Colors.green,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Test Your Knowledge

of 4

Which property of Icon changes its color?

color

fillColor

iconColor

tint

of 4

What is the default size of an Icon (in logical pixels)?

of 4

How do you add a semantic label to an icon for accessibility?

label

semanticsLabel

semanticLabel

tooltip

of 4

Which widget should you use to make an icon interactive with a splash effect?

Icon

GestureDetector

IconButton

InkWell

Frequently Asked Questions

How do I change the default icon color in my app?

Set the iconTheme in your ThemeData. For example: ThemeData(iconTheme: IconThemeData(color: Colors.blue)). This affects all icons that don't have an explicit color.

Can I use custom fonts (e.g., FontAwesome) as icons?

What is the difference between `Icon` and `ImageIcon`?

Icon renders a vector‑based icon from the Icons class (or custom font). ImageIcon renders a raster image (PNG, JPEG, etc.) as an icon, allowing it to be colored and sized like an icon.

How do I make an icon circular?

Wrap the Icon in a CircleAvatar or a Container with BoxDecoration(shape: BoxShape.circle) and set the color/background accordingly.

Why is my custom icon blurry?

If you're using a PNG, ensure you have high‑resolution versions (2x, 3x) in your assets. Better, use an SVG (via the flutter_svg package) or a font icon for crisp scaling.

Flutter Icon Widget – A Complete Guide with Examples

Flutter Icon Widget – A Complete Guide with Examples

What is the Icon Widget?

Basic Usage

Customizing Size and Color

The Icons Class

Using Icon with Theme

Semantics and Accessibility

Custom Icons from Assets

Using IconButton

Icon Themes with IconThemeData

Common Mistakes

Key Takeaways

Try it yourself

Test Your Knowledge

Frequently Asked Questions

Need help?

Flutter Icon Widget – A Complete Guide with Examples

Flutter Icon Widget – A Complete Guide with Examples

What is the Icon Widget?

Basic Usage

Customizing Size and Color

The Icons Class

Using Icon with Theme

Semantics and Accessibility

Custom Icons from Assets

Using IconButton

Icon Themes with IconThemeData

Common Mistakes

Key Takeaways

Try it yourself

Test Your Knowledge

Frequently Asked Questions

Need help?