Search code examples
androidflutterdarticonssf-symbols

Can we use equivalent of SF Symbol on Android device in flutter project?


I'm creating a Flutter project and I really like to use SF Symbol (official iOS icons). I have found packages like flutter_icons that allows us to use equivalent. I would like to know if I can use them on an Android device, without any problems of copyrights.


Solution

  • Yes they will work fine. Actually there are a bunch of packages that you can use for that purpose like flutter_sfsymbols. And no matter what platform are you testing your app on, it will have the same icon once you use in the code. And as a reminder for using this package in your project try following steps:

    1. Open pubspec.yaml, and add the flutter_sfsymbols dependency and also the needed fonts (They are already in the package you just need to add them to your pubspec file) (your pubspec should be something like this) :

       name: example
       description: A new Flutter application.
       version: 1.0.0+1
      
       environment:
         sdk: ">=2.1.0 <3.0.0"
      
       dependencies:
         flutter:
           sdk: flutter
      
       cupertino_icons: ^0.1.2
       flutter_sfsymbols: ^1.0.0
      
       dev_dependencies:
         flutter_test:
           sdk: flutter
      
       flutter:
      
       uses-material-design: true
      
       fonts:
      
       - family: sficonsets
         fonts:
           - asset: packages/flutter_sfsymbols/fonts/sficonsets.ttf
      
    2. Run flutter pub get in the terminal, or click Packages get in IntelliJ or Android Studio.

    3. Import the library in your dart file (or try the code below as your main.dart):

       import 'package:flutter_sfsymbols/flutter_sfsymbols.dart';
       import 'package:flutter/material.dart';
      
       void main() {
         runApp(MyApp());
       }
      
       class MyApp extends StatelessWidget {
         @override
         Widget build(BuildContext context) {
           return MaterialApp(
             home: DemoPage(),
           );
         }
       }
      
       class DemoPage extends StatelessWidget {
         @override
         Widget build(BuildContext context) {
           return Scaffold(
               body: Center(
             child: Container(
               color: Colors.grey,
               child: Icon(SFSymbols.airplane),
             ),
           ));
         }
       }
      
    4. Run the app.

    Note : All SF Symbols shall be considered to be system-provided images as defined in the Xcode and Apple SDKs license agreements and are subject to the terms and conditions set forth therein. You may not use SF Symbols—or glyphs that are substantially or confusingly similar—in your app icons, logos, or any other trademark-related use. Apple reserves the right to review and, in its sole discretion, require modification or discontinuance of use of any Symbol used in violation of the foregoing restrictions, and you agree to promptly comply with any such request.