Flutter Icon

In this blog, we’re going to look at how we can integrate icons into a flutter. basically, we’re cover Flutter Icon widgets, Package, and Generate flutter app launcher Icons with online tools. So it’s a full Flutter Icon tutorial guide fasten your seat belts.

Flutter Icon Widget

To build icons in our applications, Flutter provides a flutter icon widget. icons can be created by using either built-in flutter icon widget or flutter custom icon widgets.

We can directly use built-in Flutter icon widgets such as Flutter Icon widget and Flutter AnimatedIcon widget.

• Icon Widget:Icon widget provides material icons and have parameter like Color : changes color of icon,Size: changes size of icon, semanticLabel: text label can be assigned to icon.

 Icon(
      Icons.favorite,
      color: Colors.bluse,
      size: 26.0,
      semanticLabel: 'Text to announce in accessibility modes',
    ),

• Flutter AnimatedIcon: With AnimatedIcon widget on can perform animation in icons.(more on Animated widget click) .

Flutter Icon Packages

Third-party Flutter Icons Package available to make Icons more beautiful in flutter projects. we can use other than icons given in flutter it by just downloading third party packages in pubspec.yaml.

List of packages for icons in flutter

• Fluttericon:Fluttericon packs made from 15 famous free and open source web fonts. These include all packages available from FlutterIcon.it include icons from Brandico, Elusive,Entypo, Font Awesome (4 and 5) ,Fontelico Iconic ,Linearicons Free ,Linecons, Maki, Meteocons MfgLabs, ModernPictograms ,Opticons ,RPGAwesome ,Typicons WebSymbols and Zocial.

import 'package:fluttericon/typicons_icons.dart';
import 'package:fluttericon/fontelico_icons.dart';
import 'package:fluttericon/linecons_icons.dart';

final myIcons = const <Widget>[
    const Icon(Typicons.attention),
    const Icon(Fontelico.emo_wink),
    const Icon(Linecons.globe),
];

• Eva_icons_flutter: Eva_icons_flutter Flutter package has over 480 beautifully designed Open Source icons for popular behaviour and items. This package provides the Eva Icons pack available as Flutter Icons. It has beautifully sketched and rounded icons.

import 'package:eva_icons_flutter/eva_icons_flutter.dart';

class MyWidget extends StatelessWidget {
  Widget build(BuildContext context) {
    return IconButton(
      // Use the EvaIcons class for the IconData
      icon: Icon(EvaIcons.heart),
      onPressed: () { print("Eva Icon heart Pressed"); }
     );
  }
}

• Flutter_icons: Flutter_icons customizable Icons for Flutter.

// Import package
import 'package:flutter_icons/flutter_icons.dart';
import 'package:flutter/material.dart';

// 1.0.0 version used
Icon(AntDesign.stepforward),
Icon(Ionicons.ios_search),
Icon(FontAwesome.glass),
Icon(MaterialIcons.ac_unit),
Icon(FontAwesome5.address_book),
Icon(FontAwesome5Solid.address_book),
Icon(FontAwesome5Brands.$500px)

• Line_awesome_flutter:Line_awesome_flutter Line Awesome Icons Package, focused on Line Awesome Icons. Line Awesome Icon pack included in Flutter Icons. Provides 1542 extra icons for use in your applications.

import 'package:line_awesome_flutter/line_awesome_flutter.dart';
Icon _icon = Icon(LineAwesomeIcons.home);

Flutter app launcher Icons

The first step is to create the app icon. This could be achieved using available online resources to quickly generate the app launcher icon.

Free online app launcher icon generators.

• Android Asset Studio
• Launcher Icon Generator
• App Icon Generator

Now, after making the app launcher icon, it’s time to put it in the Android and IOS applications with flutter_launcher_icons package.

dev_dependencies:
  flutter_launcher_icons: "^0.8.0"

flutter_icons:
  android: "launcher_icon"
  ios: true
  image_path: "assets/icon/icon.png"

If you had some questions, feel free to ask, if you liked the post comment and share it.

Thank you!