# How to Create a Custom Icon for Your FlutterFlow App

- Tool: FlutterFlow
- Difficulty: Beginner
- Time required: 10-15 min
- Compatibility: FlutterFlow Free+ (Custom icon fonts require Pro for Custom Code)
- Last updated: March 2026

## TL;DR

FlutterFlow supports three approaches for custom icons: the built-in Icon widget with Material and FontAwesome libraries, uploaded SVG or PNG assets displayed via the Image widget, and custom icon fonts registered through Custom Code using IconData and a TTF file. This tutorial covers all three methods plus configuring your app launcher icon.

## Adding Custom Icons to Your FlutterFlow App

Icons are essential for navigation, buttons, and visual communication in any app. FlutterFlow gives you access to thousands of Material and FontAwesome icons out of the box, but you may need branded or custom icons. This tutorial walks through all three methods for using icons and shows you how to configure your app launcher icon.

## Before you start

- A FlutterFlow project open in the builder
- Custom icon files in SVG or PNG format (if using custom assets)
- A TTF icon font file from FlutterIcon.com or IcoMoon (if using custom font method)
- FlutterFlow Pro plan for Custom Code icon font method

## Step-by-step guide

### 1. Use the built-in Icon widget from the widget palette

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.

**Expected result:** The selected icon appears on your canvas at the specified size and color.

### 2. Upload a custom SVG or PNG icon as a project asset

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.

**Expected result:** Your custom icon image displays at the specified dimensions on the page.

### 3. Register a custom icon font using Custom Code

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.

```
import 'package:flutter/material.dart';

class CustomIconWidget extends StatelessWidget {
  const CustomIconWidget({
    super.key,
    this.width,
    this.height,
    required this.codePoint,
    this.iconSize,
    this.iconColor,
  });

  final double? width;
  final double? height;
  final int codePoint;
  final double? iconSize;
  final Color? iconColor;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: width,
      height: height,
      child: Center(
        child: Icon(
          IconData(codePoint, fontFamily: 'MyIcons'),
          size: iconSize ?? 24,
          color: iconColor ?? Colors.black,
        ),
      ),
    );
  }
}
```

**Expected result:** Your custom icon font renders correctly via the IconData code point reference.

### 4. Set your app launcher icon in project Settings

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.

**Expected result:** Your custom app icon shows in the Settings preview and will appear on devices after building.

### 5. Apply icon color and size from your Theme for consistency

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.

**Expected result:** Icons use Theme colors and update globally when the theme changes.

## Complete code example

File: `custom_icon_widget.dart`

```dart
import 'package:flutter/material.dart';

/// A Custom Widget for rendering icons from a custom TTF icon font.
/// Upload your TTF file via Pubspec and reference icons by code point.
class CustomIconWidget extends StatelessWidget {
  const CustomIconWidget({
    super.key,
    this.width,
    this.height,
    required this.codePoint,
    this.iconSize,
    this.iconColor,
    this.fontFamily,
  });

  final double? width;
  final double? height;
  final int codePoint;
  final double? iconSize;
  final Color? iconColor;
  final String? fontFamily;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: width ?? 48,
      height: height ?? 48,
      child: Center(
        child: Icon(
          IconData(
            codePoint,
            fontFamily: fontFamily ?? 'MyIcons',
          ),
          size: iconSize ?? 24,
          color: iconColor ?? Theme.of(context).iconTheme.color,
        ),
      ),
    );
  }
}
```

## Common mistakes

- **Uploading large PNG icons instead of SVG format** — PNG icons render at a fixed pixel resolution and look blurry on high-DPI Retina displays. A 48x48 PNG looks fuzzy when displayed at 96 logical pixels on a 3x screen. Fix: Use SVG files for custom icons or the built-in Icon widget which renders as vector. If you must use PNG, upload at 3x resolution (e.g., 144x144 for a 48px display size).
- **Hardcoding icon colors instead of using Theme references** — When you change your brand colors, every icon with a hardcoded hex color stays the old color. You must manually update each one. Fix: Always pick colors from the Theme Color tab in the color picker so icon colors update globally with your theme.
- **Using the wrong code point for custom icon font glyphs** — Each icon in a TTF font has a specific hex code point assigned during generation. Using the wrong value displays a blank square or the wrong icon. Fix: Check the code point mapping file from your font generator (FlutterIcon.com provides a Dart class with constants). Use the exact hex values like 0xe900, 0xe901, etc.

## Best practices

- Use the built-in Icon widget with Material or FontAwesome for standard icons — no upload needed
- Upload SVG files instead of PNG for custom icons to ensure crisp rendering at all screen densities
- Set icon colors from Theme Colors, not hardcoded hex values, for global consistency
- Keep a consistent icon size system: 20px inline, 24px standard, 32px feature, 48px hero
- Use a single TTF icon font file for branded icon sets instead of individual SVG asset uploads
- Design app launcher icons at 1024x1024 with content centered in the inner 80%
- Wrap frequently used icon configurations in a reusable Component to avoid duplication

## Frequently asked questions

### How many built-in icons are available in FlutterFlow?

FlutterFlow includes the full Material Icons library (over 2,000 icons) and FontAwesome icons. You can search by name in the icon picker.

### Can I use animated icons in FlutterFlow?

The built-in Icon widget is static. For animated icons, use a Lottie animation file displayed via the LottieAnimation widget, or create a Custom Widget with Flutter's AnimatedIcon class.

### What size should my app launcher icon be?

Upload a 1024x1024 pixel PNG with no transparency. FlutterFlow generates all platform-specific sizes automatically.

### Do custom icon fonts work on web builds?

Yes. TTF icon fonts work on iOS, Android, and web. The font file is bundled into the build output for all platforms.

### Can I change icon color dynamically based on state?

Yes. Bind the Icon widget's color property to a Page State variable or use Conditional Styling to change color based on conditions like selected/unselected state.

### Can RapidDev help create a branded icon system for my app?

Yes. RapidDev can design a complete icon system, generate a custom TTF font, and integrate it throughout your FlutterFlow project for consistent branding.

---

Source: https://www.rapidevelopers.com/flutterflow-tutorials/how-to-create-a-custom-icon-for-your-flutterflow-app
© RapidDev — https://www.rapidevelopers.com/flutterflow-tutorials/how-to-create-a-custom-icon-for-your-flutterflow-app