Search packages, repositories and app categories

GitHub repositoryThisIsMonta/iconify_design_flutter

iconify_design_flutter

A Flutter package that allows you to use icons from the Iconify.design API with ease. This package provides a widget called IconifyIcon that takes an icon string and optionally allows you to specify the size and color of the icon.

iconify_design_flutter project cover
Stars
5
Forks
1
Last push (UTC)
Jun 6, 2026
Project status
Active

Original README

English project snapshot. Visit GitHub for the latest content.

Iconify Design

A Flutter package that allows you to use icons from the Iconify.design API with ease. This package provides a widget called IconifyIcon that takes an icon string and optionally allows you to specify the size, color, placeholder, and error widget of the icon.

iconify-design

Installation

Add the following to your pubspec.yaml file:

dependencies:
  iconify_design: ^1.0.2

Then run:

flutter pub get
Usage
import 'package:iconify_design/iconify_design.dart';
import 'package:flutter/material.dart';
Example

Here is an example of how to use the IconifyIcon widget:

import 'package:flutter/material.dart';
import 'package:iconify_design/iconify_design.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Iconify Flutter Example'),
        ),
        body: Center(
          child: IconifyIcon(
            icon: 'mdi:home',
            size: 48.0,
            color: Colors.blue,
            placeholder: CircularProgressIndicator(),
            errorWidget: Icon(
              Icons.error_outline,
              color: Colors.red,
            ),
          ),
        ),
      ),
    );
  }
}
Parameters

The IconifyIcon widget has the following parameters:

  1. icon: The icon string (e.g., 'mdi:home', 'iconoir:fill-color-solid', etc.).
  2. size (optional): The size of the icon. Default is 24.0.
  3. color (optional): The color of the icon. Default is Black. Passing null also falls back to Black.
  4. placeholder (optional): The widget to display while the icon is loading. Default is a small circular progress indicator.
  5. errorWidget (optional): The widget to display when the icon cannot be loaded. Default is an empty widget.
Custom Placeholder and Error Widget

You can customize the loading and error states:

IconifyIcon(
  icon: 'mdi:home',
  placeholder: const SizedBox(
    width: 24,
    height: 24,
    child: CircularProgressIndicator(strokeWidth: 2),
  ),
  errorWidget: const Icon(
    Icons.error_outline,
    color: Colors.red,
  ),
)
Contribution

Feel free to open issues or submit pull requests to help improve this package.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

Don't forget to support (if you can).

"Buy Me A Coffee"

Maintainers
Monta GitHub avatar
GitHub author

Monta ↗

🌐 Building websites. 📱 Making mobile apps.

LanguagesDartCMakeC++SwiftHTMLCKotlinObjective-C

Packages published by this repository

Dependencies used

Dependency list 7 items

How do I choose a repository?

Start with your use case, compare repository activity, and check the original project before adopting it.

  1. Search by repository name, owner or description, then narrow the results by topic.
  2. Compare stars, forks and recent pushes. Stars show community interest, not a guarantee of quality.
  3. Read the README, license and issues on GitHub before using a project.

Sources and maintenance

“A repository is the most basic element of GitHub.”

GitHub Docs — About repositories ↗