How to use Cupertino icons in Flutter

This article shows you how to use Cupertino icons (iOS-style icons) in a Flutter application using the CupertinoIcons class.

How to use Cupertino icons?

When you create a new Flutter project, cupertino_icons is added to the dependencies section of the pubspec.yaml file by default, like this:

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2

Make sure you don’t remove it.

1. Import the Cupertino package into your Dart code:

import 'package:flutter/cupertino.dart';

2. Usage:

Icon(CupertinoIcons.<icon-name>,)

You can set the size and the color for a Cupertino icon through the size and color properties, like this:

Icon(
      CupertinoIcons.heart_fill,
      color: Color.fromARGB(255, 255, 15, 15), 
      size: 50,
),

See the full list of available Cupertino icons here.

Example

Screenshot:

The full code:

// KindaCode.com
import 'package:flutter/cupertino.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return const CupertinoPageScaffold(
      child: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(
                CupertinoIcons.smoke,
                size: 50,
              ),
              Icon(
                CupertinoIcons.add_circled,
                size: 50,
              ),
              Icon(CupertinoIcons.square_arrow_up_on_square, size: 50),
              Icon(
                CupertinoIcons.suit_heart,
                size: 50,
              ),
              Icon(
                CupertinoIcons.zzz,
                size: 50,
              )
            ],
          ),
        ),
      ),
    );
  }
}

What’s Next?

We’ve gone over an example of implementing Cupertino icons in Flutter. If you’d like to explore more iOS-style things in Flutter, take a look at the following articles:

• Flutter Cupertino Button – Tutorial and Examples
• Flutter CupertinoSegmentedControl Example
• Example of CupertinoSliverNavigationBar in Flutter
• Working with Cupertino Bottom Tab Bar in Flutter
• Working with Cupertino Date Picker in Flutter
• Flutter CupertinoAlertDialog Example

You can also take a tour around our Flutter topic page or Dart topic page for the latest tutorials and examples.