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:Advertisements

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.0

Make sure you don’t remove it.

1. Import the the cupertino_icons package into your Dart code:

import 'package:cupertino_icons/cupertino_icons.dart';

2. Usage:

Icon(CupertinoIcons.<icon-name>,)

AdvertisementsSee the full list of available icons at https://flutter.github.io/cupertino_icons/

Example

Screenshot:

The full code:

import 'package:flutter/cupertino.dart';
import 'package:cupertino_icons/cupertino_icons.dart';

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 
  @override
  Widget build(BuildContext context) {
    return 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.