Flutter Icons

An icon is a graphic image representing an application or any specific entity containing meaning for the user. It can be selectable and non-selectable. For example, the company's logo is non-selectable. Sometimes it also contains a hyperlink to go to another page. It also acts as a sign in place of a detailed explanation of the actual entity.
Flutter provides an Icon Widget to create icons in our applications. We can create icons in Flutter, either using inbuilt icons or with the custom icons. Flutter provides the list of all icons in the Icons class. In this article, we are going to learn how to use Flutter icons in the application.

Icon Widget Properties

Flutter icons widget has different properties for customizing the icons. These properties are explained below:

Let us understand Flutter icons using different examples.

In this example, we will see the basic icon widget that has default values. First, create a project in the IDE, navigate to the lib folder, and then open the main.dart file. Now, replace the below code in the main.dart file:

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(  
      theme: ThemeData(  
        primarySwatch: Colors.blue,  
      ),  
      home: MyIconPage(),  
    );  
  }  
}  
  
class MyIconPage extends StatefulWidget {  
  @override  
  _MyIconPageState createState() => _MyIconPageState();  
}  
  
class _MyIconPageState extends State< MyIconPage> {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text('Flutter Icon Tutorial'),  
      ),  
      body: Row(  
        mainAxisAlignment: MainAxisAlignment.spaceAround,  
          children: < Widget>[  
            Icon(Icons.camera_enhance),  
            Icon(Icons.camera_front),  
            Icon(Icons.camera_rear),  
      ]),  
    );  
  }  
}  

When we run this project, it will show the UI similar to the following screenshot in the emulator or device we are using:

In this example, we will see how to customize the icons. Here, we will use the size attribute to adjust the icon size according to our needs. We will also see the color property to change the icon default color. So, open the main.dart file and replace it with the below code:

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(  
      theme: ThemeData(  
        primarySwatch: Colors.blue,  
      ),  
      home: MyIconPage(),  
    );  
  }  
}  
  
class MyIconPage extends StatefulWidget {  
  @override  
  _MyIconPageState createState() => _MyIconPageState();  
}  
  
class _MyIconPageState extends State< MyIconPage> {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text('Flutter Icon Tutorial'),  
      ),  
      body: Row(  
        mainAxisAlignment: MainAxisAlignment.spaceAround,  
          children: < Widget>[  
            Icon(  
              Icons.camera_enhance,  
              size: 70,  
              color:Colors.green  
            ),  
            Icon(  
              Icons.camera_front,  
              size: 70,  
              color:Colors.orange  
            ),  
            Icon(  
              Icons.camera_rear,  
              size: 70,  
              color:Colors.black  
            ),  
      ]),  
    );  
  }  
}  

When we run this project, it will show the UI similar to the following screenshot in the emulator or device we are using:

Most of the time, we have seen that the icons always contains a text below it in our application. In this example, we will see how to use the Text widget with the Icons widget. So, open the main.dart file and replace it with the below code:

import 'package:flutter/material.dart';  
  
void main() => runApp(MyApp());  
  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      theme: ThemeData(  
        primarySwatch: Colors.blue,  
      ),  
      home: MyIconPage(),  
    );  
  }  
}  
  
class MyIconPage extends StatefulWidget {  
  @override  
  _MyIconPageState createState() => _MyIconPageState();  
}  
  
class _MyIconPageState extends State< MyIconPage> {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text('Flutter Icon Tutorial'),  
      ),  
      body: Column(children: < Widget>[  
        //icon with label below it  
        Container(  
          padding: EdgeInsets.all(30),  
          child: Row(  
              mainAxisAlignment: MainAxisAlignment.spaceAround,  
              children: < Widget>[  
                Column(children: < Widget>[  
                  Icon(  
                    Icons.camera_front,  
                    size: 70  
                  ),  
                  Text('Front Camera'),  
                ]),  
                Column(children: < Widget>[  
                  Icon(  
                      Icons.camera_enhance,  
                      size: 70  
                  ),  
                  Text('Camera'),  
                ]),  
                Column(children: < Widget>[  
                  Icon(  
                      Icons.camera_rear,  
                      size: 70  
                  ),  
                  Text('Rear Camera'),  
                ]),  
              ]  
            ),  
          )  
        ],  
      )  
    );  
  }  
}  

When we run this project, it will show the UI similar to the following screenshot in the emulator or device we are using: