How to Change Icon Color in Flutter?

In Flutter, the Icon widget is used to add icons to your application. By default, the color of the icons in a Flutter application is determined by the theme color of the application. If the theme color is not specified, the icons’ color is set to black by default.

But many times you need to change the default color of the icons and set it to some other elegant color.

So if you want to change the icon color in Flutter, you can use the color property of the Icon widget. The color property takes an object of the type Color.

The color value can be specified in many ways such as a color name, RGBA value, RGBO value, etc. If you want to use predefined colors, then you can use the Colors class eg. Colors.red, Colors.blue, etc.

The following sample code example shows how you can change the color of an icon in Flutter:

Icon(
  Icons.favorite, // <--- Icon name
  color: Colors.red, // <--- Icon color
  size: 50, // <--- Icon size
)

Let’s take a fully working example and try to give different colors to each icon.

In the following example, we have created a row of three icons using the Row widget of Flutter.

We now want to give different colors to each icon. For that, we can use the Colors class and choose colors from the predefined set of colors:

import 'package:flutter/material.dart';

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

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

  // App and app bar title
  static const String _title = 'Change Icon Color';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: Container(
          padding: const EdgeInsets.all(20),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: const [
              Icon(
                Icons.favorite, // <--- Icon name
                color: Colors.red, // <--- Icon color
                size: 50, // <--- Icon size
              ),
              Icon(
                Icons.thumb_up, // <--- Icon name
                color: Colors.blue, // <--- Icon color
                size: 50, // <--- Icon size
              ),
              Icon(
                Icons.comment, // <--- Icon name
                color: Colors.green, // <--- Icon color
                size: 50, // <--- Icon size
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Output:

Changing the Icon Color Globally using IconThemeData

In the above example, we saw how we can specify different colors for different icons. But, you might not always want to specify the color for each icon individually, instead, you would use the default theme color.

But how to specify a default theme color for icons?

Well, if you want to specify a default color for all icons globally, you have to take the help of the IconThemeData class. The IconThemeData class has several properties such as color, size, opacity, etc. If you set these properties, they will be applied to all the icons of the application.

You have to add the IconThemeData class under the MaterialApp widget of your application.

In the following example, we have set the default icon color to pink and the icon size to 50 pixels for all the icons throughout the application:

See the full example here:

import 'package:flutter/material.dart';

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

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

  // App and app bar title
  static const String _title = 'Set Icon Color Globally';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      theme: ThemeData(
        iconTheme: const IconThemeData(
          color: Colors.pink, //<-- Default icon color
          size: 50, // <-- Default icon size
        ),
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: Container(
          padding: const EdgeInsets.all(20),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: const [
              Icon(
                Icons.favorite,
              ),
              Icon(
                Icons.thumb_up,
              ),
              Icon(
                Icons.comment,
                color: Colors.purple, // Overrides the default color
              )
            ],
          ),
        ),
      ),
    );
  }
}

Output:

As you can see from the above output, the first two icons use the default color specified by the IconThemeData as we have not explicitly specified any color for them, whereas the third icon overrides the default theme color and uses its own color.

Conclusion

In this article, we learned how we can change icon color in Flutter.

In summary, if you want to change the icon color in Flutter, you can use the color property of the Icon widget. The color value can be specified in three formats, RGBA, RGBO and the color name.

If you want to set the icon color globally, then you can use the IconThemeData widget.

Thanks for reading.