How to Create a Custom Icon for Your FlutterFlow App

Open the Widget Palette and drag an Icon widget onto your canvas. In the Properties Panel on the right, click the icon picker field. Browse Material Icons or FontAwesome by scrolling through categories, or type a keyword like 'home' or 'settings' in the search bar. Select the icon you want. Set the size (default 24) and color (choose a Theme Color for consistency). The Icon widget renders as a vector graphic that stays crisp at any size.

In the left Navigation Menu, go to Assets. Click the upload button and select your SVG or PNG file. Once uploaded, drag an Image widget onto your page. In the Properties Panel, set Image Source to Asset and pick the uploaded file. Set width and height to control the display size. For SVG files, FlutterFlow renders them as vectors. For PNG files, upload at 2x or 3x resolution for Retina screens.

Generate a TTF icon font from FlutterIcon.com or IcoMoon — upload your SVG icons and download the font package. In FlutterFlow, go to Custom Code and add the TTF file to your project assets via Pubspec Dependencies (add it under fonts). Create a Custom Widget that uses the Icon widget with IconData: Icon(IconData(0xe900, fontFamily: 'MyIcons'), size: 24, color: Colors.blue). Each icon in the font has a unique hex code point provided by the font generator.

1import 'package:flutter/material.dart';
2
3class CustomIconWidget extends StatelessWidget {
4  const CustomIconWidget({
5    super.key,
6    this.width,
7    this.height,
8    required this.codePoint,
9    this.iconSize,
10    this.iconColor,
11  });
12
13  final double? width;
14  final double? height;
15  final int codePoint;
16  final double? iconSize;
17  final Color? iconColor;
18
19  @override
20  Widget build(BuildContext context) {
21    return SizedBox(
22      width: width,
23      height: height,
24      child: Center(
25        child: Icon(
26          IconData(codePoint, fontFamily: 'MyIcons'),
27          size: iconSize ?? 24,
28          color: iconColor ?? Colors.black,
29        ),
30      ),
31    );
32  }
33}

Go to Settings in the left Navigation Menu, then click General. Scroll to the App Icon section. Upload a 1024x1024 pixel PNG image with no transparency (Apple requires opaque backgrounds). FlutterFlow automatically generates all required sizes for iOS and Android from this single image. The icon appears on the home screen after installing the app.

Select any Icon widget on your canvas. In the Properties Panel, click the color picker and switch to the Theme Color tab. Choose a semantic color like Primary or Secondary so icons update automatically when you change your theme. For size, use consistent values across your app: 20 for inline icons, 24 for standard, 32 for feature icons. Create a reusable Component if you use the same icon styling repeatedly.