🎨

Version 1.1.0 now includes automatic theme color inheritance, dark mode support, and optimized SVG caching!

Flutter Package Installation

Hugeicons Flutter package provides two versions: Pro (40,000+ icons, all styles) and Free (4,700+ icons, stroke-rounded style).

Pro Package Installation

To install the Hugeicons Pro package, you will find the installation instructions at your Hugeicons account (opens in a new tab).

Import Options

The Pro package offers two import strategies:

Full Package Import (All Icons)

import 'package:hugeicons/hugeicons-full.dart';
 
// Access all 40,000+ icons across 9 styles
HugeIcon(
  icon: HugeIcons.strokeRoundedHome01,
  size: 48.0,
)

Tree-Shaking Import (Optimal Bundle Size)

import 'package:hugeicons/hugeicons.dart';
import 'package:hugeicons/styles/stroke_rounded.dart';
import 'package:hugeicons/styles/bulk_rounded.dart';
 
// Only these styles are included in your app bundle
HugeIcon(
  icon: HugeIconsStrokeRounded.home01,
  size: 48.0,
)

Free Package Installation

Install the Free version from pub.dev:

dependencies:
  hugeicons: ^1.1.0

After adding the package to your pubspec.yaml file, run the following command to install the package:

flutter pub get

dart pub get

Basic Usage

Import the package into your Flutter project:

Theme-Aware Icons (Recommended)

import 'package:flutter/material.dart';
import 'package:hugeicons/hugeicons.dart';
import 'package:hugeicons/styles/stroke_rounded.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      darkTheme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.deepPurple,
          brightness: Brightness.dark,
        ),
        useMaterial3: true,
      ),
      themeMode: ThemeMode.system,
      home: MyHomePage(),
    );
  }
}
 
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('HugeIcons Theme Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Theme-aware icons - automatically adapt to light/dark themes
            HugeIcon(
              icon: HugeIconsStrokeRounded.home01,
              size: 48.0,
              strokeWidth: 2.0,
            ),
            const SizedBox(height: 16),
            HugeIcon(
              icon: HugeIconsStrokeRounded.home01,
              size: 48.0,
            ),
            const SizedBox(height: 16),
            // Explicit color - overrides theme
            HugeIcon(
              icon: HugeIconsStrokeRounded.home01,
              color: Colors.red, // Fixed color
              size: 48.0,
            ),
          ],
        ),
      ),
    );
  }
}

Advanced Usage

Pro Package (All Styles)

import 'package:hugeicons/hugeicons.dart';
import 'package:hugeicons/styles/bulk_rounded.dart';
import 'package:hugeicons/styles/duotone_rounded.dart';
import 'package:hugeicons/styles/solid_rounded.dart';
 
class AdvancedExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // Different styles with theme inheritance
        HugeIcon(
          icon: HugeIconsBulkRounded.home01,
          size: 32.0,
        ),
        const SizedBox(height: 8),
        HugeIcon(
          icon: HugeIconsDuotoneRounded.home01,
          size: 32.0,
        ),
        const SizedBox(height: 8),
        HugeIcon(
          icon: HugeIconsSolidRounded.home01,
          size: 32.0,
        ),
      ],
    );
  }
}

Custom Stroke Width & Theme Integration

class CustomIconExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // Custom stroke width with theme colors
        HugeIcon(
          icon: HugeIconsStrokeRounded.home01,
          size: 64.0,
          strokeWidth: 1.0, // Thin stroke
        ),
        const SizedBox(height: 16),
        HugeIcon(
          icon: HugeIconsStrokeRounded.home01,
          size: 64.0,
          strokeWidth: 3.0, // Thick stroke
        ),
      ],
    );
  }
}

Theme Integration

Automatic Color Inheritance

The HugeIcon widget automatically inherits colors based on this priority chain:

Explicit color (if provided)
IconTheme color (from app's icon theme)
DefaultTextStyle color (theme's text color)
Theme surface color (Material 3 colorScheme.onSurface)

Dark Mode Support

Icons automatically adapt to light and dark themes:

MaterialApp(
  theme: ThemeData(useMaterial3: true),
  darkTheme: ThemeData.dark(useMaterial3: true),
  themeMode: ThemeMode.system, // Follows system setting
  home: MyHomePage(),
)

Dynamic Theme Switching

class ThemeSwitchingExample extends StatefulWidget {
  @override
  _ThemeSwitchingExampleState createState() => _ThemeSwitchingExampleState();
}
 
class _ThemeSwitchingExampleState extends State<ThemeSwitchingExample> {
  bool _isDarkMode = false;
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.deepPurple,
          brightness: Brightness.light,
        ),
        useMaterial3: true,
      ),
      darkTheme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.deepPurple,
          brightness: Brightness.dark,
        ),
        useMaterial3: true,
      ),
      themeMode: _isDarkMode ? ThemeMode.dark : ThemeMode.light,
      home: Scaffold(
        floatingActionButton: FloatingActionButton(
          onPressed: () => setState(() => _isDarkMode = !_isDarkMode),
          child: Icon(_isDarkMode ? Icons.light_mode : Icons.dark_mode),
        ),
        body: Center(
          child: HugeIcon(
            icon: HugeIconsStrokeRounded.home01,
            size: 100.0,
            // Automatically adapts to theme changes!
          ),
        ),
      ),
    );
  }
}

API Reference

HugeIcon Widget

HugeIcon({
  Key? key,
  required List<List<dynamic>> icon, // Icon data
  Color? color, // Optional - inherits theme if not provided
  double? size = 24.0, // Icon size
  double? strokeWidth, // Stroke width (for stroke-based icons)
})

Icon Styles (Pro Package Only)

Style	Import	Example
Stroke Rounded	`package:hugeicons/styles/stroke_rounded.dart`	`HugeIconsStrokeRounded.home01`
Stroke Sharp	`package:hugeicons/styles/stroke_sharp.dart`	`HugeIconsStrokeSharp.home01`
Stroke Standard	`package:hugeicons/styles/stroke_standard.dart`	`HugeIconsStrokeStandard.home01`
Solid Rounded	`package:hugeicons/styles/solid_rounded.dart`	`HugeIconsSolidRounded.home01`
Solid Sharp	`package:hugeicons/styles/solid_sharp.dart`	`HugeIconsSolidSharp.home01`
Solid Standard	`package:hugeicons/styles/solid_standard.dart`	`HugeIconsSolidStandard.home01`
Bulk Rounded	`package:hugeicons/styles/bulk_rounded.dart`	`HugeIconsBulkRounded.home01`
Duotone Rounded	`package:hugeicons/styles/duotone_rounded.dart`	`HugeIconsDuotoneRounded.home01`
Twotone Rounded	`package:hugeicons/styles/twotone_rounded.dart`	`HugeIconsTwotoneRounded.home01`

Free Package (Stroke Rounded Only)

import 'package:hugeicons/hugeicons.dart';
 
HugeIcon(
  icon: HugeIconsStrokeRounded.home01, // Only stroke-rounded style available
  color: Colors.blue, // Optional color parameter
  size: 48.0,
)

Performance Tips

Tree-Shaking (Pro Package)

Import only the styles you need to minimize bundle size:

import 'package:hugeicons/styles/stroke_rounded.dart';
import 'package:hugeicons/styles/solid_rounded.dart';
// Only these styles will be included in your app

Full Package Import (Pro Package)

For convenience, you can import all icons at once (increases bundle size):

import 'package:hugeicons/hugeicons-full.dart';
// Access all 40,000+ icons across 9 styles
HugeIcon(
  icon: HugeIcons.strokeRoundedHome01,
  size: 48.0,
)

SVG Caching

The widget automatically caches SVG strings to avoid unnecessary rebuilds when theme colors change. This provides optimal performance even with dynamic theming.

Icon Size Optimization

Use appropriate icon sizes to balance visual quality and performance:

HugeIcon(
  icon: HugeIconsStrokeRounded.home01,
  size: 24.0, // Small icons
)
 
HugeIcon(
  icon: HugeIconsStrokeRounded.home01,
  size: 48.0, // Medium icons
)
 
HugeIcon(
  icon: HugeIconsStrokeRounded.home01,
  size: 100.0, // Large icons
)

SVG vs Legacy Font Rendering

Hugeicons v1.1.0+ uses SVG-based rendering for superior performance and quality:

✅ SVG Advantages

Scalable: Perfect quality at any size (no pixelation)
Theme-Aware: Automatic color inheritance from Material Design themes
Performance: Efficient caching and rendering with flutter_svg
Customization: Dynamic stroke width control
Future-Proof: Modern web standards

❌ Legacy Font Limitations

Fixed color palette (no theme inheritance)
Pixelation at large sizes
Limited customization options
Deprecated font loading mechanisms

The new SVG-based system provides better performance, scalability, and theme integration compared to the legacy font-based rendering in previous versions.

Migration from v1.0.x

Breaking Changes

None - all changes are backward compatible

New Features

Automatic theme color inheritance
Dark mode support
StatefulWidget architecture for better performance
Modern color API (.toARGB32() instead of deprecated .value)

Code Migration

No changes required - existing code continues to work:

// This still works exactly as before
HugeIcon(
  icon: HugeIconsStrokeRounded.home01,
  color: Colors.blue, // Explicit color
  size: 48.0,
)
 
// New: Theme-aware icons (no color parameter needed)
HugeIcon(
  icon: HugeIconsStrokeRounded.home01,
  size: 48.0, // Automatically inherits theme colors
)
 
// New: Full package import (Pro package)
import 'package:hugeicons/hugeicons-full.dart';
 
HugeIcon(
  icon: HugeIcons.strokeRoundedHome01, // Access all styles
  size: 48.0,
)

SVG Migration Benefits

The move from font-based to SVG-based rendering provides:

Better Performance: Optimized SVG caching and rendering
Theme Integration: Automatic color inheritance from Material Design
Scalability: Perfect quality at any size
Customization: Dynamic stroke width and color control

Examples with React Native Swift