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:

Property	Descriptions
icon	It is used to specify the icon name to display in the application. Generally, Flutter uses material design icons that are symbols for common actions and items.
color	It is used to specify the color of the icon.
size	It is used to specify the size of the icon in pixels. Usually, icons have equal height and width.
textDirection	It is used to specify to which direction the icon will be rendered.

Let us understand Flutter icons using different examples.

Example 1:

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),
      ]),
    );
  }
}

Output:

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

Example 2:

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
            ),
      ]),
    );
  }
}

Output:

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

Example 3:

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'),
                ]),
              ]
            ),
          )
        ],
      )
    );
  }
}

Output:

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