5.3 C
New York
Tuesday, November 28, 2023

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

    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:


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



The full code:

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

void main() {

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

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

class _MyHomePageState extends State<MyHomePage> {
  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:


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

Related Articles

Latest Articles