skribble_icons #

Comprehensive hand-drawn icon library for the Skribble design system.

Provides unified access to all 8,600+ roughened Flutter Material icons plus 30 curated custom icons through a single API. Every icon is rendered with the Skribble hand-drawn aesthetic.

The catalog contains precomputed rough geometry. Render it with WiredSvgIcon from Skribble, which supports solid, hachure, and outline styles. Regenerate the 30 curated icons with dart run packages/skribble_emoji_gen/bin/generate_icons.dart from the workspace root.

Installation #

dependencies:
  skribble: ^0.3.4
  skribble_icons: ^0.1.0

Usage #

Unified lookup (recommended) #

Search custom icons first, then fall back to the full Material set:

import 'package:skribble/skribble.dart';
import 'package:skribble_icons/skribble_icons.dart';

// Any Material icon identifier works:
final alarm = lookupSkribbleIconByIdentifier('access_alarm');
final home = lookupSkribbleIconByIdentifier('home');

// Render it:
if (alarm != null) {
  WiredSvgIcon(data: alarm);
}

Custom icons only #

Access just the 30 curated custom icons:

final star = lookupSkribbleCustomIconByIdentifier('star');

Material icons directly #

Access the full Material rough icon set:

// By identifier
final icon = lookupMaterialRoughIconByIdentifier('favorite');

// By codepoint
final icon = kMaterialRoughIcons[0xe87d];

// All available identifiers
final names = materialRoughIconIdentifiers; // 8,600+ names

Icon count #

print(skribbleIconCount); // custom + Material total
print(kSkribbleCustomIcons.length); // 30 curated icons
print(kMaterialRoughIcons.length); // 8,600+ Material icons

Custom icons #

The 30 curated custom icons cover common app patterns:

Regenerating custom icons #

The curated icons are generated from SVG sources via the rough icon pipeline:

# From the workspace root:
melos run rough-icons-skribble

# Or directly:
cd packages/skribble
dart run tool/generate_rough_icons.dart \
  --kit svg-manifest \
  --manifest ../skribble_icons/tool/skribble_icons.manifest.json \
  --output ../skribble_icons/lib/src/generated/skribble_icons.g.dart \
  --map-name kSkribbleCustomIcons

Adding custom icons #

1. Add a 24x24 SVG file to icons/.
2. Add an entry to tool/skribble_icons.manifest.json:

   {
     "identifier": "my_icon",
     "codePoint": "0xf01f",
     "svgPath": "../icons/my_icon.svg"
   }
   

3. Run melos run rough-icons-skribble.
4. Update the kSkribbleCustomIconsCodePoints map in lib/skribble_icons.dart.

License #

Same as the root Skribble repository — see LICENSE for details.