DEV Community

Cover image for Flutter Icon Widget – A Quick Guide to Adding Icons in Flutter
Nikhil Soman Sahu
Nikhil Soman Sahu

Posted on

Flutter Icon Widget – A Quick Guide to Adding Icons in Flutter

In Flutter, the Icon widget is used to display icons in your app. Flutter provides a set of built-in icons, and you can also use custom icons if needed. Here's a quick guide on how to use the Icon widget to add icons in Flutter:

1. Using Built-in Icons:

Flutter comes with a set of built-in icons that you can use directly. These icons are part of the Material Design Icons set. Here's an example of how to use a built-in icon:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Icon Example'),
        ),
        body: Center(
          child: Icon(
            Icons.star, // Replace with the desired icon
            size: 48.0,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

In this example, the Icon widget is used to display a star icon from the built-in set.

2. Using Custom Icons:

You can also use custom icons in your Flutter app. If you have custom icons in SVG format, you can convert them to Flutter-compatible code using tools like FlutterIcon. Here's an example of using a custom icon:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Icon Example'),
        ),
        body: Center(
          child: Icon(
            IconData(0xe800, fontFamily: 'MyCustomIcons'), // Replace with your custom icon data
            size: 48.0,
            color: Colors.green,
          ),
        ),
      ),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

Replace 0xe800 with the code generated for your custom icon, and set the fontFamily to the desired font family (usually the name of your custom icon font).

Remember to include any required font files and configurations in your project.

These examples should help you get started with using the Icon widget in Flutter. Adjust the parameters based on your specific requirements and design preferences.

Top comments (0)