Docs — Solar Iconkit for Flutter

Introduction#

Solar Iconkit for Flutter

1,231 icons · 6 styles · MIT · Flutter ≥ 3.27

A hand-crafted icon set covering 37 categories with six distinct visual styles including two duotone variants. Fully bundled offline in one Flutter package.

Install from pub.dev Browse icons

Solar Iconkit is a Flutter package that bundles the entire Solar icon set by 480 Design — 1,231 icons across 6 native styles (7,386 SVG variants total) — behind a single, type-safe SolarIcon widget. MIT-licensed, works offline, no setup beyond adding the dependency. Preview every icon on the browser.

1,231 icons

Curated across 37 categories from arrows to weather.

6 native styles

Linear, Outline, Broken, Bold, Line Duo, Bold Duo.

Offline & bundled

All SVGs ship with the package — no network at runtime.

IconTheme aware

Size and color resolve from the ambient theme.

Semantic-safe

Decorative icons auto-wrap in ExcludeSemantics.

All platforms

Android, iOS, macOS, Windows, Linux, Web.

This site is the icon browser: use it to preview icons, pick a style, and copy either the Flutter widget code or the raw SVG. The package itself is on pub.dev.

Installation#

Add to your Flutter project's pubspec.yaml:

pubspec.yaml

dependencies:
  solar_iconkit: ^0.3.0

Then fetch:

Terminal

flutter pub add solar_iconkit
# or
flutter pub get

Import wherever you need icons:

dart

import 'package:solar_iconkit/solar_iconkit.dart';

Requirements: Flutter ≥ 3.27, Dart ^3.6. Runs on Android, iOS, macOS, Windows, Linux, and Web.

Usage#

Every icon is a SolarIcon widget. Reference icons by their generated constant on SolarIcons and pick a style from SolarIconStyle.

Widget API#

main.dart

// Minimum — default linear style, size from IconTheme (24 px fallback)
SolarIcon(SolarIcons.home2)

// Explicit style and size
SolarIcon(
  SolarIcons.heart,
  style: SolarIconStyle.boldDuotone,
  size: 32,
)

// Full API — every parameter
SolarIcon(
  SolarIcons.rocket,
  style: SolarIconStyle.boldDuotone,
  size: 48,
  color: Colors.deepPurple,
  opacity: 0.9,
  semanticLabel: 'Launch',
)

Parameter	Type	Default
name	String	required
style	SolarIconStyle	linear
size	double?	IconTheme → 24
color	Color?	IconTheme → black87
opacity	double	1.0
semanticLabel	String?	null
fit	BoxFit	BoxFit.contain
alignment	AlignmentGeometry	Alignment.center
matchTextDirection	bool	false

With IconTheme#

SolarIcon integrates with Flutter's built-in IconTheme. When size or coloraren't set on the widget, they fall back to the ambient theme — matching the behaviour of Flutter's Icon widget.

dart

IconTheme(
  data: IconThemeData(color: Colors.indigo, size: 20),
  child: Row(children: [
    SolarIcon(SolarIcons.home2),   // picks up indigo + size 20
    SolarIcon(SolarIcons.heart),   // same
  ]),
)

// Under MaterialApp, ThemeData.iconTheme themes every SolarIcon:
MaterialApp(
  theme: ThemeData(
    iconTheme: IconThemeData(color: Colors.black87, size: 24),
  ),
  home: MyApp(),
)

In buttons and lists#

dart

// Icon-only button
IconButton(
  onPressed: onDelete,
  icon: SolarIcon(SolarIcons.trashBinTrash),
  tooltip: 'Delete',
)

// Filled button with leading icon
FilledButton.icon(
  onPressed: onDownload,
  icon: SolarIcon(SolarIcons.download, size: 18, color: Colors.white),
  label: const Text('Download'),
)

// ListTile
ListTile(
  leading: SolarIcon(
    SolarIcons.folder,
    style: SolarIconStyle.boldDuotone,
    color: Colors.amber,
  ),
  title: const Text('Documents'),
  trailing: SolarIcon(SolarIcons.altArrowRight, size: 18),
  onTap: () {},
)

// NavigationBar with distinct selected style
NavigationBar(
  destinations: [
    NavigationDestination(
      icon: SolarIcon(SolarIcons.home2),
      selectedIcon: SolarIcon(SolarIcons.home2, style: SolarIconStyle.bold),
      label: 'Home',
    ),
  ],
)

Styles#

Every Solar icon comes in six distinct styles. Each has a specific visual character and works best in certain contexts.

Linear

Thin 1.5 px hairline stroke — default, works everywhere.

SolarIconStyle.linear

Outline

Filled shape with evenodd cutouts (macOS-style outline).

SolarIconStyle.outline

Broken

1.5 px stroke with intentional gaps — friendly and casual.

SolarIconStyle.broken

Bold

Fully filled solid shape — high contrast, strong presence.

SolarIconStyle.bold

Line Duo

Linear stroke plus a 50 % opacity accent layer.

SolarIconStyle.lineDuotone

Bold Duo

Bold fill plus a 50 % opacity accent — the richest style.

SolarIconStyle.boldDuotone

Recommendation: use linear for chrome, promote to bold for active/selected states, and reserve boldDuotone for feature moments.

Icon naming#

Solar icon names are kebab-case (alt-arrow-down, home-2). The Flutter package converts them to camelCase Dart identifiers. Iconify identifiers on this browser follow the pattern solar:<name>-<style>.

dart

SolarIcons.home2           // "home-2"
SolarIcons.altArrowDown    // "alt-arrow-down"
SolarIcons.i4k             // "4k"    → leading digit gets 'i' prefix
SolarIcons.caseIcon        // "case"  → Dart reserved word gets 'Icon' suffix
SolarIcons.all             // List<String> of every icon

Iconify identifiers used in the browser and SVG source:

text

solar:home-2-linear         → Linear style
solar:home-2-outline        → Outline style
solar:home-2-broken         → Broken stroke
solar:home-2-bold           → Bold filled
solar:home-2-line-duotone   → Line Duotone
solar:home-2-bold-duotone   → Bold Duotone

Credits#

Icons — Solar icon set by 480 Design (MIT).
Icon data — Provided by Iconify (MIT).
Flutter package — Published on pub.dev.