storkly_icons 0.4.0
storkly_icons: ^0.4.0 copied to clipboard
Soft, rounded, stroke-based SVG icon set for the Storkly baby and family app — 49 currentColor icons that tint to your theme.
storkly_icons #
Soft, rounded SVG icon set for the Storkly baby and family app — 49 monochromatic icons, each in outline and filled styles, that tint to your theme via BlendMode.srcIn.
Install #
flutter pub add storkly_icons
Or add it manually:
dependencies:
storkly_icons: ^0.1.0
The package bundles its SVG assets and declares them in its own pubspec.yaml, so you do not need to copy assets or add anything to your app's flutter.assets block.
Usage #
import 'package:flutter/material.dart';
import 'package:storkly_icons/storkly_icons.dart';
class Example extends StatelessWidget {
const Example({super.key});
@override
Widget build(BuildContext context) {
return Row(
children: [
StorklyIcon(StorklyIcons.sleep, size: 24, color: Colors.indigo), // outline
StorklyIcon(StorklyIcons.sleepFilled, size: 24, color: Colors.indigo), // filled
StorklyIcon(StorklyIcons.bottle),
StorklyIcon.byName('head-circumference', size: 32),
StorklyIcon.byName('head-circumference-filled', size: 32),
],
);
}
}
StorklyIcon inherits the surrounding IconTheme, so a single IconTheme (or IconButton) can tint a whole subtree — no per-icon color: needed.
IconTheme(
data: const IconThemeData(color: Colors.pinkAccent, size: 28),
child: Row(
children: const [
StorklyIcon(StorklyIcons.baby),
StorklyIcon(StorklyIcons.feeding),
StorklyIcon(StorklyIcons.diaper),
],
),
)
If you'd rather render the SVG yourself (e.g. with a custom flutter_svg configuration), use the asset path directly:
import 'package:flutter_svg/flutter_svg.dart';
SvgPicture.asset(
StorklyIcons.sleep.assetPath, // or StorklyIcons.sleepFilled.assetPath
package: 'storkly_icons',
width: 24,
height: 24,
colorFilter: const ColorFilter.mode(Colors.blue, BlendMode.srcIn),
)
Variants #
Every icon ships in two styles:
- Outline —
StorklyIcons.<name>(e.g.StorklyIcons.bottle),StorklyIcon.byName('bottle'). - Filled —
StorklyIcons.<name>Filled(e.g.StorklyIcons.bottleFilled),StorklyIcon.byName('bottle-filled').
Typical pattern — outline at rest, filled when active or selected:
StorklyIcon(selected ? StorklyIcons.bottleFilled : StorklyIcons.bottle)
API #
| Export | Type | Description |
|---|---|---|
StorklyIcon |
StatelessWidget |
Renders a StorklyIconData and inherits IconTheme. |
StorklyIcon.byName |
factory | Looks up by kebab-case name ('bottle' or 'bottle-filled'); throws on unknown names. |
StorklyIcons.<name> |
StorklyIconData |
Outline constant per icon (e.g. StorklyIcons.sleep, StorklyIcons.headCircumference). |
StorklyIcons.<name>Filled |
StorklyIconData |
Filled variant per icon (e.g. StorklyIcons.sleepFilled, StorklyIcons.bottleFilled). |
StorklyIcons.all |
Map<String, StorklyIconData> |
Map keyed by kebab-case name. Outline keys are <name>, filled keys are <name>-filled. |
StorklyIcons.values |
List<StorklyIconData> |
Alphabetical list of every icon (outline + filled). |
StorklyIcons.byName(name) |
function | Typed lookup; throws on unknown name. Accepts both outline and filled keys. |
StorklyIconData |
class | { name, assetPath }. |
Design contract #
| Attribute | Value |
|---|---|
viewBox |
0 0 24 24 |
| Hardcoded colors | not allowed (only currentColor is permitted) |
Designed for legibility at 20–24 px. StorklyIcon repaints rendered pixels with BlendMode.srcIn, so the source's own fill/stroke is irrelevant — your color (or surrounding IconTheme) wins.
Icon gallery #
49 icons, each available in outline and filled styles (98 SVGs total).
Outline — 49 icons — click to expand
activity |
baby |
baby-boy |
baby-girl |
bathing |
bottle |
calendar |
car-seat |
care |
check |
cheerful |
close |
crying |
diaper |
doctor-visit |
family |
father |
feeding |
fine |
growth |
head-circumference |
health |
height |
illnesses |
length |
measurement |
medications |
medicine |
milestone |
mood |
more |
mother |
note |
nursing |
parent |
play |
plus |
pumping |
reminder |
sad |
sleep |
solids |
stroll |
stroller |
temperature |
travel |
tummy-time |
vaccinations |
weight |
Filled — 49 icons — click to expand
activity-filled |
baby-filled |
baby-boy-filled |
baby-girl-filled |
bathing-filled |
bottle-filled |
calendar-filled |
car-seat-filled |
care-filled |
check-filled |
cheerful-filled |
close-filled |
crying-filled |
diaper-filled |
doctor-visit-filled |
family-filled |
father-filled |
feeding-filled |
fine-filled |
growth-filled |
head-circumference-filled |
health-filled |
height-filled |
illnesses-filled |
length-filled |
measurement-filled |
medications-filled |
medicine-filled |
milestone-filled |
mood-filled |
more-filled |
mother-filled |
note-filled |
nursing-filled |
parent-filled |
play-filled |
plus-filled |
pumping-filled |
reminder-filled |
sad-filled |
sleep-filled |
solids-filled |
stroll-filled |
stroller-filled |
temperature-filled |
travel-filled |
tummy-time-filled |
vaccinations-filled |
weight-filled |
Other platforms #
This package is the Flutter surface of a multi-platform icon set. TypeScript (@storkly/icons), Android VectorDrawable, and iOS variants are generated from the same source SVGs — see the storkly-ai/icons repository.
License #
CC BY-ND 4.0