How to Use Flat Icons in Flutter App

In this example, we are going to show you the way to use Flat Icons in Flutter App. Flat Icons are thin-weight icons that have very elegant looks. See the example below for more details:

Read This Also: How to Use Font Awesome Icons in App

First, you need to add flat_icons_flutter package into dependency by adding the following lines on pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  flat_icons_flutter: ^1.0.2

Use Flat Icons on Flutter App:

import 'package:flat_icons_flutter/flat_icons_flutter.dart';

Icon(FlatIcons.download)

Flat Icons Size and Color:

Icon(FlatIcons.download,  //icon data
   size: 50, //icon size
   color: Colors.green //icon color
)

Use Default Material Icon sets.

Icon(Icons.menu)

Full Code Example of above screenshot:

import 'package:flat_icons_flutter/flat_icons_flutter.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
          appBar: AppBar( 
             title: Text("Flat Icons on Flutter", style: TextStyle(fontWeight: FontWeight.w300)),
             backgroundColor: Colors.indigoAccent,
             leading: Icon(FlatIcons.menu),
             actions: [
                 IconButton( 
                   onPressed: (){},
                   icon:Icon(FlatIcons.search),
                 ),

                 IconButton( 
                   onPressed: (){},
                   icon:Icon(FlatIcons.user),
                 ),

                 IconButton( 
                   onPressed: (){},
                   icon:Icon(FlatIcons.print),
                 )
             ],
          ),
          body: Container(
            alignment: Alignment.center,
            padding: EdgeInsets.all(20),
            child: ElevatedButton.icon(
              style: ElevatedButton.styleFrom(
                primary: Colors.redAccent
              ),
              onPressed:(){

              }, 
              icon: Padding( 
                    padding: EdgeInsets.all(15),
                    child:Icon(FlatIcons.download, size: 50),
                ),
              label: Text("Flat Icons", style: TextStyle(fontSize:40, fontWeight: FontWeight.w300),),
            )
            
          )
       );
  }
}

You can use the Code snippet suggestion of IDE to find the icon for your project.

In this way, you can use Flat Icons on the Flutter app.