Flutter Icons

Using built-in and custom icons in Flutter apps

⭐ What are Icon Widgets?

Icons are graphical symbols representing actions, objects, or concepts in your app. Flutter includes Material and Cupertino icon sets with thousands of ready-to-use icons for beautiful interfaces. 


// Simple icon example
Icon(Icons.favorite, color: Colors.red)

Output:

❤️

Icon Features

🎨

Color

Customize icon colors 

Icon(
  Icons.star,
  color: Colors.amber,
)
📏

Size

Adjust icon dimensions 

Icon(
  Icons.home,
  size: 48,
)
📦

Material Icons

1000+ built-in icons 

Icon(
  Icons.shopping_cart,
)
🍎

Cupertino Icons

iOS-style icons 

Icon(
  CupertinoIcons.heart,
)

🔹 Basic Icon Usage

Display icons with different properties: 

import 'package:flutter/material.dart';

class IconExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Icons')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(Icons.home, size: 50, color: Colors.blue),
            Icon(Icons.favorite, size: 50, color: Colors.red),
            Icon(Icons.star, size: 50, color: Colors.amber),
          ],
        ),
      ),
    );
  }
}

Output:

🏠 ❤️ ⭐

🔹 Common Material Icons

Frequently used Material Design icons: 

// Navigation icons
Icon(Icons.home)
Icon(Icons.menu)
Icon(Icons.arrow_back)
Icon(Icons.search)

// Action icons
Icon(Icons.add)
Icon(Icons.delete)
Icon(Icons.edit)
Icon(Icons.share)

// Communication icons
Icon(Icons.email)
Icon(Icons.phone)
Icon(Icons.message)
Icon(Icons.notifications)

// Media icons
Icon(Icons.play_arrow)
Icon(Icons.pause)
Icon(Icons.volume_up)
Icon(Icons.camera)

Output:

🏠 ☰ ← 🔍 ➕ 🗑️ ✏️ 📤

🔹 Cupertino Icons

iOS-style icons for Cupertino design: 

import 'package:flutter/cupertino.dart';

Icon(CupertinoIcons.heart)
Icon(CupertinoIcons.home)
Icon(CupertinoIcons.settings)
Icon(CupertinoIcons.search)
Icon(CupertinoIcons.person)
Icon(CupertinoIcons.bell)
Icon(CupertinoIcons.cart)
Icon(CupertinoIcons.share)

Output:

♡ ⌂ ⚙️ 🔍 👤 🔔 🛒 ↗️

🔹 Icon Button

Make icons interactive with IconButton: 

IconButton(
  icon: Icon(Icons.favorite_border),
  color: Colors.red,
  iconSize: 32,
  onPressed: () {
    print('Favorite pressed');
  },
  tooltip: 'Add to favorites',
)

// Toggle icon button
bool isFavorite = false;

IconButton(
  icon: Icon(
    isFavorite ? Icons.favorite : Icons.favorite_border,
  ),
  color: Colors.red,
  onPressed: () {
    setState(() {
      isFavorite = !isFavorite;
    });
  },
)

Output:

🔹 Icon with Text

Combine icons with text labels: 

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Icon(Icons.location_on, color: Colors.red),
    SizedBox(width: 8),
    Text('New York', style: TextStyle(fontSize: 18)),
  ],
)

// Using ListTile
ListTile(
  leading: Icon(Icons.email, color: Colors.blue),
  title: Text('Email'),
  subtitle: Text('[email protected]'),
)

Output:

📍 New York
✉️

🔹 Custom Icon Colors & Sizes

Customize icon appearance: 

// Different sizes
Icon(Icons.star, size: 16)  // Small
Icon(Icons.star, size: 24)  // Default
Icon(Icons.star, size: 48)  // Large
Icon(Icons.star, size: 72)  // Extra large

// Different colors
Icon(Icons.circle, color: Colors.red)
Icon(Icons.circle, color: Colors.green)
Icon(Icons.circle, color: Colors.blue)
Icon(Icons.circle, color: Color(0xFF9C27B0))

Output:

⭐ ⭐ ⭐ ⭐

🧠 Test Your Knowledge

Which property changes the icon size?