Why use a custom icon in Flutter
There are several reasons why you might want to use a custom icon in a Flutter app:
- Customization: Using a custom icon allows you to add a personal touch to your app and make it stand out from others.
- Branding: Custom icons can be used to reinforce your brand identity and make your app more recognizable.
- Visual appeal: A well-designed icon can add visual appeal to your app and make it more attractive to users.
- Usability: Custom icons can help improve the usability of your app by providing a clear and intuitive way for users to interact with it.
- 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
),
)
],
),
),

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,
)