Skip to main content
Slatico logo
Monorepo Release Notice (v0.1.0 · Workspace Monorepo Release): Packages are verified in the open-source Slatico monorepo CI pipeline and prepared for upcoming public registry publishing (npm, pub.dev, Maven Central, and Swift Package Index). Clone github.com/infitusofficial/slatico to consume packages via workspace or local path today.
slatico_icons · v0.1.0

Flutter Integration Guide (iOS, Android, Web & Desktop)

slatico_icons delivers all 27 Slatico icon families across all 7 official styles (189 total variants): 135 native TTF IconData glyphs for the 5 monochrome styles (thin, light, regular, bold, fill) and 54 vector SVG templates for duotone and color via flutter_svg.

1. Installation (pubspec.yaml)

pubspec.yaml / Terminal
# 1. Install from pub.dev:
dependencies:
  slatico_icons: ^0.1.0

# Or via Flutter CLI:
# flutter pub add slatico_icons

# 2. Or consume directly from a local monorepo checkout:
dependencies:
  slatico_icons:
    path: ../slatico/packages/flutter

2. Unified SlaticoIcon Widget & Native IconData

main.dart
import 'package:flutter/material.dart';
import 'package:slatico_icons/slatico_icons.dart';

class ToolbarExample extends StatelessWidget {
  const ToolbarExample({super.key});

  @override
  Widget build(BuildContext context) {
    return const Row(
      children: [
        // 1. Native Flutter Icon with bundled monochrome TTF IconData
        Icon(SlaticoIcons.houseRegular, size: 24, color: Color(0xFF010520)),
        Icon(SlaticoIcons.arrowUpRightBold, size: 24, color: Color(0xFF010520)),

        // 2. Unified SlaticoIcon widget (Monochrome — delegates to native Icon)
        SlaticoIcon(
          name: SlaticoIconName.bell,
          style: SlaticoStyle.regular,
          size: 24,
          color: Color(0xFF010520),
        ),

        // 3. Duotone style with primary color, secondaryColor & secondaryOpacity
        SlaticoIcon(
          name: SlaticoIconName.shieldCheck,
          style: SlaticoStyle.duotone,
          size: 28,
          color: Color(0xFF010520),
          secondaryColor: Color(0xFFFF6040),
          secondaryOpacity: 0.25,
          semanticLabel: 'Security Verified',
        ),

        // 4. Color style with default brand palette (#FF6040 primary + #000000 secondary)
        SlaticoIcon(
          name: SlaticoIconName.wallet,
          style: SlaticoStyle.color,
          size: 28,
          semanticLabel: 'Wallet',
        ),

        // 5. Color style with two custom colors (color + secondaryColor)
        SlaticoIcon(
          name: SlaticoIconName.bell,
          style: SlaticoStyle.color,
          size: 28,
          color: Color(0xFFFF6040),
          secondaryColor: Color(0xFF010520),
          semanticLabel: 'Notifications',
        ),
      ],
    );
  }
}

3. Subtree Styling with SlaticoIconTheme

theme_example.dart
SlaticoIconTheme(
  data: const SlaticoIconThemeData(
    style: SlaticoStyle.duotone,
    size: 24,
    color: Color(0xFF010520),
    secondaryColor: Color(0xFFFF6040),
    secondaryOpacity: 0.22,
  ),
  child: const Row(
    children: [
      SlaticoIcon(name: SlaticoIconName.bell),
      SlaticoIcon(name: SlaticoIconName.layoutDashboard),
      SlaticoIcon(name: SlaticoIconName.arrowUpRight),
    ],
  ),
)

4. Complete Parameter Reference (SlaticoIcon)

ParameterTypeDefaultDescription
nameSlaticoIconNamerequiredCamelCase enum constant (SlaticoIconName.bell, SlaticoIconName.arrowUpRight).
styleSlaticoStyle?SlaticoStyle.regularStyle variant (thin, light, regular, bold, fill, duotone, color).
sizedouble?24.0Width and height in logical pixels (falls back to SlaticoIconTheme or IconTheme).
colorColor?IconTheme color (#FF6040 in color)Primary foreground color for monochrome, duotone, and color styles.
secondaryColorColor?color (#000000 in color)Secondary tone color for duotone and color styles.
secondaryOpacitydouble?0.2 (authored SVG)Opacity (0.0–1.0) for the secondary layer in SlaticoStyle.duotone.
semanticLabelString?nullTalkBack / VoiceOver label. When null, sets excludeFromSemantics: true.