custom icon

Quick Tip – How to use a Custom icon in Flutter

Why use a custom icon in Flutter

There are several reasons why you might want to use a custom icon in a Flutter app:

  1. Customization: Using a custom icon allows you to add a personal touch to your app and make it stand out from others.
  2. Branding: Custom icons can be used to reinforce your brand identity and make your app more recognizable.
  3. Visual appeal: A well-designed icon can add visual appeal to your app and make it more attractive to users.
  4. Usability: Custom icons can help improve the usability of your app by providing a clear and intuitive way for users to interact with it.
  5. Accessibility: Custom icons can be designed to be more accessible to users with disabilities, such as those who are visually impaired.

In summary, using a custom icon can help you make your Flutter app more visually appealing, user-friendly, and recognisable, which can contribute to its overall success.

How to use a custom icon in Flutter

At the time of writing, Flutter cannot use custom vector graphics, such as .svg, straight out of the box. But we can use the flutter_svg package. In order to use it, we need to add the flutter_svg package to the dependencies in pubspec.jml file.

You can read more about Icons in Fluter in this post:

Flutter Basics – How to use Icons in Flutter

Use SVG image as a custom icon in Flutter

What is an SVG image?

A SVG (Scalable Vector Graphics) image is a type of vector image that uses mathematical descriptions of lines, curves, and shapes to represent an image. Vector images are resolution-independent, which means they can be resized without losing quality.

SVG images are defined using XML tags, and they can be created and edited using any text editor or a vector graphics editor such as Adobe Illustrator. They are commonly used for logos, icons, and other simple graphics that need to be scalable.

One of the main benefits of using SVG images is that they can be scaled to any size without losing quality, which makes them ideal for use in responsive web design and mobile apps. They are also more lightweight than raster images (such as JPEG and PNG), which makes them faster to load and easier to work with.

Use the flutter_svg widget as a Custom Icon

Add the flutter_svg dependency to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  flutter_svg: 1.0.0

Move your custom icon into your assets folder and again add it into pubspec.jml file.

assets:
    - assets/

When you want to use your custom icon import the package.

import 'package:flutter_svg/flutter_svg.dart';

Now initialize your icon

final String assetName = 'assets/icon.svg';

Use the SvgPicture widget to display an SVG file in your Flutter app:

SvgPicture.asset(
  'assets/my_svg_file.svg',
  height: 200,
  width: 200,
)

The SvgPicture widget takes in the following parameters:

  • asset: The path to the SVG file in your Flutter project’s assets directory.
  • height: The height of the SVG image.
  • width: The width of the SVG image.

Here is my custom icon with text.

            Container(
              padding: const EdgeInsets.all(10.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                mainAxisSize: MainAxisSize.max,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  SizedBox(
                    height: 80.0,
                    width: 80.0,
                    child: SvgPicture.asset(
                        assetName,
                        color: Colors.red,
                        semanticsLabel: 'custom icon'
                    ),
                  ),
                  Text("Flutter Assets",
                  style: TextStyle(
                    fontSize: 30,
                    fontWeight: FontWeight.w600,
                    color: Colors.black26
                  ),
                  )
                ],
              ),
            ),
custom icon

You can also use the SvgPicture.network constructor to load an SVG file from a URL.

SvgPicture.network(
  'https://example.com/my_svg_file.svg',
  height: 200,
  width: 200,
)

For more information on using the flutter_svg package, you can refer to the package documentation.

Use ImageIcon as a custom icon in Flutter

ImageIcon is a widget in Flutter that displays an icon from an image file. It is a combination of the Image and Icon widgets, which allows you to use an image as the icon instead of a character code or glyph.

To use ImageIcon, you need to specify the image parameter with the asset path or URL of the image file. You can also specify the size parameter to set the size of the icon.

ImageIcon is a useful widget if you want to use a custom image as an icon in your Flutter app. It allows you to easily display an image as an icon and customize its size and appearance.

In the pubspec.yaml file, under the flutter section, specify the location of your image icon file in the assets section. For example:

flutter:
  assets:
    - assets/my_icon.png

Use the ImageIcon widget to display the image icon. Specify the image parameter with the asset path of the image file. For example:

ImageIcon(
  AssetImage('assets/my_icon.png'),
  size: 48.0,
)