Customizable Icons for Flutter :boom:

Overview

English | 简体中文

flutter_icons

pub package

Customizable Icons for Flutter,Inspired by react-native-vector-icons

Notice

  1. v1.0.0 has major Api changes, please be careful to upgrade
  2. icon names that begin with a number are preceded by a $prefix
  3. icon named with the dart keyword have the _ suffix added

Bundled Icon Sets

Browse all.

Usage

To use this plugin, add flutter_icons as a dependency in your pubspec.yaml file.

Widget

IconToggle

Prop Description
selectedIconData Icon is displayed when value is true
unselectedIconData Icon is displayed when value is false
activeColor When value is true, the icon color is displayed
inactiveColor When value is false, the icon color is displayed
value Whether this IconToggle is selected.
onChanged Called when the value of the IconToggle should change.
duration The duration of the transition from selected Icon to unselected Icon
reverseDuration he duration of the transition from unselected Icon to selected Icon
transitionBuilder Transition animation function between the selected Icon and the unselected Icon

Example

// Import package
import 'package:flutter_icons/flutter_icons.dart';
import 'package:flutter/material.dart';

// 1.0.0 version used
Icon(AntDesign.stepforward),
Icon(Ionicons.ios_search),
Icon(FontAwesome.glass),
Icon(MaterialIcons.ac_unit),
Icon(FontAwesome5.address_book),
Icon(FontAwesome5Solid.address_book),
Icon(FontAwesome5Brands.$500px)

// After 1.1.0, the FlutterIcons class is provided to access all Icons
// Icon name in the original basis added icon set abbreviation name as suffix
// Hereinafter referred to as the following
//Ant Design Icons -> ant,
//Entypo Icons -> ent,
//Evil Icons -> evi,
//Feather Icons -> fea,
//Font Awesome Icons -> faw,
//Font Awesome 5 Regular -> faw5
//Font Awesome 5 Solid -> faw5s
//Font Awesome 5 Brands -> faw5b
//Foundation Icons -> fou,
//Ionicons Icons -> ion,
//Material Community Icons -> mco,
//Material Icons -> mdi,
//Octicons Icons -> oct,
//Simple Line Icons -> sli,
//Zocial Icons -> zoc,
//Weather Icons -> wea
Icon(FlutterIcons.stepforward_ant)
Icon(FlutterIcons.html5_faw)
...

// Previous versions of 1.0.0 are used
Icon(Ionicons.getIconData("ios-search"));
Icon(AntDesign.getIconData("stepforward"));
Icon(FontAwesome.getIconData("glass"));
Icon(MaterialIcons.getIconData("ac-unit"));
Icon(FontAwesome5.getIconData("address-book"));
Icon(FontAwesome5.getIconData("address-book",weight: IconWeight.Solid));
Icon(FontAwesome5.getIconData("500px", weight: IconWeight.Brand));

How to keep only the fonts used in the project.

step 1

Execute the command

pub global activate split_icon

step2

Add the font you want to leave in the project's pubspec file

//Ant Design Icons -> ant,
//Entypo Icons -> ent,
//Evil Icons -> evi,
//Feather Icons -> fea,
//Font Awesome Icons -> faw,
//Font Awesome 5 Regular -> faw5
//Font Awesome 5 Solid -> faw5s
//Font Awesome 5 Brands -> faw5b
//Foundation Icons -> fou,
//Ionicons Icons -> ion,
//Material Community Icons -> mco,
//Material Icons -> mdi,
//Octicons Icons -> oct,
//Simple Line Icons -> sli,
//Zocial Icons -> zoc,
//Weather Icons -> wea

...

flutter_icons:
  includes:
    -ant 
    -mco
 ...

step3

Execute the command in the project directory

split_icon
Comments
  • Big resource (font) files

    Big resource (font) files

    Asset files which referenced in pubspec.yaml are too big. I want to keep only fonts which used in the project.

    flutter_icons/fonts/MaterialCommunityIcons.ttf
    flutter_icons/fonts/FontAwesome.ttf
    flutter_icons/fonts/FontAwesome5_Solid.ttf
    flutter_icons/fonts/FontAwesome5_Brands.ttf
    flutter_icons/fonts/Ionicons.ttf
    flutter_icons/fonts/MaterialIcons.ttf
    flutter_icons/fonts/weathericons.ttf
    flutter_icons/fonts/Entypo.ttf
    flutter_icons/fonts/AntDesign.ttf
    flutter_icons/fonts/SimpleLineIcons.ttf
    flutter_icons/fonts/Foundation.ttf
    flutter_icons/fonts/Feather.ttf
    flutter_icons/fonts/Zocial.ttf
    flutter_icons/fonts/FontAwesome5_Regular.ttf
    flutter_icons/fonts/Octicons.ttf
    flutter_icons/fonts/EvilIcons.ttf
    
    opened by shinsenter 7
  • Requesting an icon which does not exist returns IconData Object not null

    Requesting an icon which does not exist returns IconData Object not null

    If I request an Icon which does not exist IconData gets returned anyway with the codePoint = null. This leads to a weird flutter assert which has nothing to do with the IconData and it is hard to track. Could u please just return null or throw an exception

    IconData data = MaterialIcons.getIconData(key);

    enhancement 
    opened by ride4sun 7
  • Null safety migration

    Null safety migration

    Getting errors related to null safety support Error: Cannot run with sound null safety, because the following dependencies don't support null safety:

    • package:flutter_icons

    For solutions, see https://dart.dev/go/unsound-null-safety

    Error: Cannot run with sound null safety, because the following dependencies don't support null safety:

    • package:flutter_icons

    **Please do migrate the package to null safety **

    opened by baimamboukar 5
  • Access all icons with single API

    Access all icons with single API

    Is it possible to access all icons with a single API? For example, I want to select the best looking calendar icon from all of the sets. But, I have to type the name of all sets one by one and add dot calendar after them. If all the icons are accessible from a single class it would be easier to select the best calendar icon.

    Thank you for the great package.

    opened by deadsoul44 4
  • [Feature Request] Split the lib into many subpackages by family.

    [Feature Request] Split the lib into many subpackages by family.

    Hi folks.

    First of all I want to thanks you. I'm currently using this package and it's great! :)

    I was wondering if it makes sense split this package into several subpackages in order to optimize application size. In my case I'm just using MaterialCommunityIcons. AFAIK I have to import the whole package, including the other .ttfs & resources, increasing the total size.

    Is this possible? Do I am wrong assuming that all resources are bundled into the release builds?

    Regards.

    opened by henry2man 3
  • All Icons should be searchable in one list - copy and paste should work to get the names

    All Icons should be searchable in one list - copy and paste should work to get the names

    All Icons should be searchable in one list to search all libraries - copy and paste should work to get the names to copy them. Also, the search icon has to be clicked to start a search. Search should be triggered by just typing. The Chinese string in the search field does not work with most of the world. Could you change it to English to make it more comprehensible ( I am German ) ?

    I like the package - don't get me wrong.

    opened by ride4sun 3
  • Could we add a more user friendly API?

    Could we add a more user friendly API?

    It would be cool to have an easier Interface as an extension to your package which allows the extraction of the Icons like this:

    ///searches all libs and returns the first finding
    IconData data = IconCache('altimeter')
    ///searches only Material Icons 
    IconData data = IconCache('altimeter', IconLib.mdi)
    ///searches only Material Icons 
    IconData data = IconCache('mdi.altimeter')
     
    

    all methods return a default icon if no Icon is found (could be changed to null). This addresses #12

    Here is the implimentation:

    import 'package:flutter/material.dart';
    import 'package:flutter_icons/flutter_icons.dart';
    import 'package:logging/logging.dart';
    
    final _log = new Logger('ui.icon_cache.dart');
    
    enum IconLib {
      ///All Icons
      all,
    
      ///Ant Design Icons
      ant,
    
      ///Entypo Icons
      ent,
    
      ///Evil Icons
      evi,
    
      ///Feather Icons
      fea,
    
      ///Font Awesome Icons
      faw,
    
      ///Foundation Icons
      fou,
    
      ///Ionicons Icons
      ion,
    
      ///Material Community Icons
      mco,
    
      ///Material Icons
      mdi,
    
      ///Octicons Icons
      oct,
    
      ///Simple Line Icons
      sli,
    
      ///Zocial Icons
      zoc,
    
      ///Weather Icons
      wea
    }
    
    class IconCache {
      static final IconCache _singleton = new IconCache._internal();
    
      factory IconCache() {
        return _singleton;
      }
    
      IconCache._internal();
    
      IconData operator [](String name) {
        return _singleton.icon(name);
      }
    
      IconLib _fromString(String iconLibEnumPrefix) => IconLib.values.firstWhere(
          (e) => e.toString().split('.').last == iconLibEnumPrefix,
          orElse: null);
    
      // The format is like 'mdi.car' which loads the car
      // icon from the Material Design Icons
      //if the name contains the prefix separated with a dot and the prefix
      // is the default than the prefix is taken from the name. e.g. mdi.car
      IconData icon(String name, {IconLib prefix = IconLib.all}) {
        String iconName;
        IconLib namePrefix;
    
        //if the name contains the prefix separated with a dot and the prefix
        // is the default than the prefix is taken from the name. e.g. mdi.car
        if (name.contains('.') && prefix == IconLib.all) {
          namePrefix = _fromString(name.split('.').first);
          iconName = name.split('.').last;
          //defaults to all lib
          if (namePrefix == null || iconName == null) throw ArgumentError();
          return _iconInternal(namePrefix, iconName);
        } else {
          return _iconInternal(prefix, name);
        }
      }
    
      IconData _iconInternal(IconLib prefix, String name) {
        IconData data;
        if (prefix != IconLib.all) {
          data = _extractIconFromSpecificLib(prefix, name);
          if (data == null || data.codePoint == null) {
            _log.finest('Could not load Icon $name ');
            return MaterialIcons.getIconData('error');
          } else {
            return data;
          }
        }
        return _searchIconsInAllLibs(data, name, prefix);
      }
    
      _searchIconsInAllLibs(IconData data, String name, IconLib prefix) {
        try {
          //return MdiIcons()[name];
          data = _searchMaterialIcons(name);
    
          if (data == null) {
            data = _searchMaterialCommunityIcons(name);
          } else {
            return data;
          }
          if (data == null) {
            data = _searchMaterialCommunityIcons(name);
          } else {
            return data;
          }
          if (data == null) {
            data = _searchAntDesignIcons(name);
          } else {
            return data;
          }
          if (data == null) {
            data = _searchEntypoIcons(name);
          } else {
            return data;
          }
          if (data == null) {
            data = _searchEvilIcons(name);
          } else {
            return data;
          }
          if (data == null) {
            data = _searchFeatherIcons(name);
          } else {
            return data;
          }
          if (data == null) {
            data = _searchFontAwesomeIcons(name);
          } else {
            return data;
          }
          if (data == null) {
            data = _searchFoundationIcons(name);
          } else {
            return data;
          }
          if (data == null) {
            data = _searchIonIcons(name);
          } else {
            return data;
          }
          if (data == null) {
            data = _searchOcticonsIcons(name);
          } else {
            return data;
          }
          if (data == null) {
            data = _searchSimpleLineIcons(name);
          } else {
            return data;
          }
          if (data == null) {
            data = _searchZocialIcons(name);
          } else {
            return data;
          }
          if (data == null) {
            data = _searchWeatherIcons(name);
          } else {
            return data;
          }
          if (data == null) {
            _log.finest('Could not load Icon $name from lib: $prefix');
            return MaterialIcons.getIconData('error');
          } else {
            _log.finest('Could not load Icon $name, from lib: $prefix}');
            return MaterialIcons.getIconData('error');
          }
        } catch (e) {
          _log.finest(
              'Could not load Icon $name, from lib: $prefix, Error: ${e.toString()}');
          return MaterialIcons.getIconData('error');
        }
      }
    
      IconData _extractIconFromSpecificLib(IconLib prefix, String name) {
        switch (prefix) {
          case IconLib.ant:
            return _searchAntDesignIcons(name);
            break;
          case IconLib.all:
            _log.finest('Could not load Icon $name');
            return MaterialIcons.getIconData('error');
    
            break;
          case IconLib.ent:
            return _searchEntypoIcons(name);
            break;
          case IconLib.evi:
            return _searchEvilIcons(name);
            break;
          case IconLib.fea:
            return _searchFeatherIcons(name);
            break;
          case IconLib.faw:
            return _searchFontAwesomeIcons(name);
            break;
          case IconLib.fou:
            return _searchFoundationIcons(name);
            break;
          case IconLib.ion:
            return _searchIonIcons(name);
            break;
          case IconLib.mco:
            return _searchMaterialCommunityIcons(name);
            break;
          case IconLib.mdi:
            return _searchMaterialIcons(name);
            break;
          case IconLib.oct:
            return _searchOcticonsIcons(name);
            break;
          case IconLib.sli:
            return _searchSimpleLineIcons(name);
            break;
          case IconLib.zoc:
            return _searchZocialIcons(name);
            break;
          case IconLib.wea:
            return _searchWeatherIcons(name);
            break;
          default:
            {
              _log.finest('Could not load Icon $name');
              return MaterialIcons.getIconData('error');
            }
        }
      }
    
      IconData _searchWeatherIcons(String name) {
        IconData data = WeatherIcons.getIconData(name);
        if (data == null || data.codePoint == null) {
          return null;
        } else {
          return data;
        }
      }
    
      IconData _searchZocialIcons(String name) {
        IconData data = Zocial.getIconData(name);
        if (data == null || data.codePoint == null) {
          return null;
        } else {
          return data;
        }
      }
    
      IconData _searchSimpleLineIcons(String name) {
        IconData data = SimpleLineIcons.getIconData(name);
        if (data == null || data.codePoint == null) {
          return null;
        } else {
          return data;
        }
      }
    
      IconData _searchOcticonsIcons(String name) {
        IconData data = Octicons.getIconData(name);
        if (data == null || data.codePoint == null) {
          return null;
        } else {
          return data;
        }
      }
    
      IconData _searchIonIcons(String name) {
        IconData data = Ionicons.getIconData(name);
        if (data == null || data.codePoint == null) {
          return null;
        } else {
          return data;
        }
      }
    
      IconData _searchFoundationIcons(String name) {
        IconData data = Foundation.getIconData(name);
        if (data == null || data.codePoint == null) {
          return null;
        } else {
          return data;
        }
      }
    
      IconData _searchFontAwesomeIcons(String name) {
        IconData data = FontAwesome.getIconData(name);
        if (data == null || data.codePoint == null) {
          return null;
        } else {
          return data;
        }
      }
    
      IconData _searchFeatherIcons(String name) {
        IconData data = Feather.getIconData(name);
        if (data == null || data.codePoint == null) {
          return null;
        } else {
          return data;
        }
      }
    
      IconData _searchEvilIcons(String name) {
        IconData data = EvilIcons.getIconData(name);
        if (data == null || data.codePoint == null) {
          return null;
        } else {
          return data;
        }
      }
    
      IconData _searchEntypoIcons(String name) {
        IconData data = Entypo.getIconData(name);
        if (data == null || data.codePoint == null) {
          return null;
        } else {
          return data;
        }
      }
    
      IconData _searchAntDesignIcons(String name) {
        IconData data = AntDesign.getIconData(name);
        if (data == null || data.codePoint == null) {
          return null;
        } else {
          return data;
        }
      }
    
      IconData _searchMaterialIcons(String name) {
        IconData data = MaterialIcons.getIconData(name);
        if (data == null || data.codePoint == null) {
          return null;
        } else {
          return data;
        }
      }
    
      IconData _searchMaterialCommunityIcons(String name) {
        IconData data = MaterialCommunityIcons.getIconData(name);
        if (data == null || data.codePoint == null) {
          return null;
        } else {
          return data;
        }
      }
    }
    
    opened by ride4sun 2
  • Does cherry picking work with this library

    Does cherry picking work with this library

    I am wondering if by using this Library dart/ flutter tree shaking still works or if all Icons are loaded in memory because I can access them with an indexer (map)?

    FYI Tree shaking. In computing, tree shaking is a dead code elimination technique that is applied when optimizing code written in ECMAScript dialects like Dart, JavaScript, or TypeScript into a single bundle that is loaded by a web browser.

    opened by ride4sun 2
  • Outline or solid is not quit clear

    Outline or solid is not quit clear

    Hi, thanks for wonderful icons!

    the icon preview from website, is not same with I set in flutter app:

    image

    As you can see, the grin icon it not solid, while website is like this:

    image

    I want it to be solid so that fits the style of my app. Do u know why it's not same?

    opened by jinfagang 2
  • Is material_icons from https://www.google.com/design/icons/? home-outline is missing

    Is material_icons from https://www.google.com/design/icons/? home-outline is missing

    Hi, first, thanks a lot for this project.

    In the Readme, it says this project it's inspired by react-native-vector-icons. And then I checked https://github.com/oblador/react-native-vector-icons, it says MaterialIcons is from https://www.google.com/design/icons/. Then I checked https://www.google.com/design/icons/, it redirects to https://material.io/tools/icons/. Then I searched for home-outline icon, I found the result at https://material.io/tools/icons/?search=home&style=outline. BUT from the latest project code flutter-icons/lib/material_icons.dart, I can not find home-outline at all.

    Thanks.

    opened by sgon00 2
  • All icons appearing as empty boxes

    All icons appearing as empty boxes

    Is this package alive? I thought it would be really useful for my app but none of the icons is working. example: Icon(WeatherIcons.wi_cloudy) or any other icon is not working. All i'm getting is a box kind of looking thing.

    opened by DjordjeMancic97 1
  • Migrate to null safety

    Migrate to null safety

    9cf4b48 fixes the majority of the analyzer warnings (mostly redundant const declarations).

    0889610 migrates the package to null safety.

    Notes:

    Please consider this PR for release, because the package complicates migration to null safety for the apps that using it.

    Fixes #41. Fixes #45. Fixes #46.

    opened by jibiel 14
  • Can't find some Ionicons (Ellipsis-Horizontal-circle and others)

    Can't find some Ionicons (Ellipsis-Horizontal-circle and others)

    Env info

    Doctor summary (to see all details, run flutter doctor -v):
    [✓] Flutter (Channel stable, 2.0.2, on Linux, locale en_GB.UTF-8)
    [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    [✗] Chrome - develop for the web (Cannot find Chrome executable at google-chrome)
       ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
    [!] Android Studio (not installed)
    [✓] VS Code (version 1.53.2)
    [✓] Connected device (1 available)
    
    ! Doctor found issues in 2 categories.
    

    Bug info

    Can't Find Some icons, especially Ionicons. Some Icons I noticed to be missing are
    * Ionicons.ellipsis-horizontal-circle
    * Ionicons.ellipsis-horizontal-circle-outline
    * Ionicons.paper-plane-outline
    * Ionicons.ios-paper-plane-outline
    * MaterialIcons.all-inbox
    
    opened by Lone-Wolf17 1
  • Integrate SimpleIcons and BrandIcons

    Integrate SimpleIcons and BrandIcons

    https://simpleicons.org/

    They have npm integration already at https://www.npmjs.com/package/simple-icons

    MaterialDesignIcons no longer accepts Brand Icons http://dev.materialdesignicons.com/roadmap/brand-icons

    1. BrandIcons They already have a Flutter package at https://pub.dev/packages/flutter_brand_icons

    Use case

    Proposal

    opened by giorgio79 0
Releases(1.1.0)
Owner
flutter-studio
Flutter Studio Github Organization
flutter-studio
The Material Design Icons Icon pack available as set of Flutter Icons.

material_design_icons_flutter The Material Design Icons Icon pack available as set of Flutter Icons. Based on Material Design Icons 6.5.95. See a web

ziofat 147 Oct 26, 2022
Fluent System Icons are a collection of familiar, friendly and modern icons from Microsoft.

Fluent UI System Icons Fluent UI System Icons are a collection of familiar, friendly and modern icons from Microsoft. Icon List View the full list of

Microsoft 4.3k Dec 29, 2022
XDG theme icons for Flutter

XDG Icons XDG theme icons for Flutter. https://specifications.freedesktop.org/icon-theme-spec/icon-theme-spec-latest.html TODO api cleanup docs intern

J-P Nurmi 0 Jul 12, 2022
🍪 Colorful Icons for your Flutter App

Koukicons ?? This package provides +700 Colorful Icons for Flutter Apps. ?? Screenshot ❓ How to use To use this plugin, add koukicons as a dependency

Adem Kouki 139 Oct 20, 2022
A Flutter package for Ant Icons.

Package for Ant Icons An icon is a graphical representation of meaning. Icons can be used to express actions, state, and even to categorize data. Ant

Venkatesh Prasad 24 Oct 7, 2022
New trick on how to create your own custom icons in flutter with bottom bar navigation

Customized Bottom Navigation Bar in Flutter | Tech With Sam Customized Bottom Navigation Bar in Flutter - Watch on youtube ✌   App Preview App Screens

Samuel Adekunle 10 Oct 26, 2022
Integrate any icons you like to your flutter app

Flutter Tutorial - Icons - Custom & Plugin Icons Integrate any icons you like to your flutter app - Material Icons, Beautiful Icons & Custom Icons. ⚡

Behruz Hurramov 1 Dec 28, 2021
The Line Awesome Icon pack available as Flutter Icons

line_awesome_icons The Line Awesome Icon pack available as Flutter Icons Getting Started This plugin is based on Line Awesome Icons pack, which you ca

Châu Minh Phúc 25 Oct 10, 2022
FLUTTER API: It's powerful navigation by gestures and taps. You can scroll from left to right or tap on the navigation icons.

scroll_navigation My other APIs Video Viewer Video Editor Helpers Features Fancy animations. Customizable colors. Works with the back button. Scrollin

Luis Felipe Murguia Ramos 14 Jun 14, 2022
Flutter package for Eva Icons

Flutter package for Eva Icons. Eva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items.

Piyush Maurya 80 Nov 16, 2022
The Font Awesome Icon pack available as Flutter Icons

font_awesome_flutter The Font Awesome Icon pack available as set of Flutter Icons. Based on Font Awesome 5.15.4. Includes all free icons: Regular Soli

Flutter Community 731 Dec 28, 2022
A flutter package that provides all icons you need

Before starting ✋ . I want to tell you that every star ?? added to my space shines my world and motivate me ?? to make more awesome things like this o

Andrew Nasef 47 Dec 29, 2022
Icons Launcher - A command-line tool that simplifies the task of updating your Flutter app's launcher icon.

Icons Launcher - A command-line tool that simplifies the task of updating your Flutter app's launcher icon. Full flexibility allows you to only update the launcher icon for specific platforms as needed.

Mrr Hak 48 Nov 17, 2022
A capable library for managing Windows tray icons in your Flutter app 🦋

skip to content A capable tray icon plugin for Windows. ?? package on pub.dev ?? source on github.com ?? dart docs api reference Manage multiple icon

Bent Hillerkus 5 May 27, 2022
The COCO icon pack with - +600 Editable icons available for your flutter project.

cocoicons The COCO icon pack with - +600 Editable icons available for your flutter project. Made from COCO icon pack. ?? Installation In the dependenc

Samuel Abada 5 Sep 23, 2022
This package will animate a floating action button at the center and icons at the bottomNavigationBar using AnimatedContainer and SlideTransition respectively.

floating_bottom_bar This package will animate a floating action button at the center and icons at the bottomNavigationBar using AnimatedContainer and

MindInventory 11 Oct 10, 2022
Boris Gautier 1 Jan 31, 2022
This is a Flutter plugin that takes a JSON string and converts it onto a customizable Flutter Widget.

Colored JSON Convert JSON string into customizable widget. Getting Started ColoredJson is a stateless widget that produces a structured view of JSON s

null 4 May 20, 2022
Create highly customizable, simple, and controllable autocomplete fields for Flutter.

Field Suggestion Installing Depend on it Add this to your package's pubspec.yaml file: dependencies: field_suggestion: <latest_version> Install it Y

Ismael Shakverdiev 21 Oct 18, 2022