hubtoolify_icons 2.0.2

4,309 original HubToolify Line icons for Flutter, drawn as vector paths at any size and themed like Icon. No SVG plugin, every platform.

hubtoolify_icons

4,309 original HubToolify icons for Flutter, in the free Line style. Each icon is drawn as vector paths by Flutter itself, so it stays sharp at every size on Android, iOS, web, Windows, macOS and Linux. There is no SVG plugin and no font to load.

Install

flutter pub add hubtoolify_icons

Use

import 'package:hubtoolify_icons/hubtoolify_icons.dart';

const HtiIcon(HtiIcons.home)
HtiIcon(HtiIcons.calendarCheck, size: 32, color: Colors.indigo)
HtiIcon(HtiIcons.bell, strokeWidth: 1.8)
const HtiIcon(HtiIcons.heart, semanticLabel: 'Favourite')

IconButton(icon: const HtiIcon(HtiIcons.search), tooltip: 'Search', onPressed: () {})

HtiIcon works like Flutter's Icon. It takes its size, colour and opacity from the nearest IconTheme, so inside an AppBar, IconButton, ListTile or NavigationBar it matches the Material icons around it.

The constant names are the icon names on hubtoolify.com/icons in lowerCamelCase: arrow-up-right becomes HtiIcons.arrowUpRight, and clock-1 becomes HtiIcons.clock1. A name that is a Dart keyword gets an Icon suffix (case becomes HtiIcons.caseIcon).

Properties

Property	Default
icon		an HtiIcons constant; null keeps the space and draws nothing
size	IconTheme size, then 24	width and height in logical pixels
color	IconTheme colour, with its opacity	colour of the icon
strokeWidth	1.2	line weight on the 24 x 24 grid
semanticLabel		name for screen readers

Only the icons you use ship

Each icon is a const on HtiIcons, and a release build keeps only the constants your code references. An app that uses ten icons carries ten icons.

To pick icons by name at runtime (a name from a CMS or an API), import the lookup map:

import 'package:hubtoolify_icons/by_name.dart';

final icon = htiIconsByName['arrow-up-right'];

That map refers to every icon, so importing it keeps all 4,309 in your app (about 1.4 MB of path data before compression).

Drawing in your own painter

HtiIconPainter paints an icon scaled to any canvas size:

HtiIconPainter(icon: HtiIcons.home, color: Colors.white).paint(canvas, const Size(48, 48));

Accessibility

Icons are decorative by default and screen readers skip them. Give an icon a semanticLabel when it carries meaning on its own. For an icon-only button, label the button instead (IconButton(tooltip: 'Search', ...)).

Pro styles

The 14 HubToolify Pro styles (Solid, Duotone, Sharp Line, Sharp Solid, Sharp Duotone, Imprint, Pixel, Slab, Mellow, Jass, Draw, Lineal, Duo and Flat) are in a separate package, hubtoolify_icons_pro. It installs from HubToolify's own package repository with an active Pro plan:

1. Create a Flutter token at hubtoolify.com/account/npm.

2. Run dart pub token add https://hubtoolify.com/api/pub and paste the token.

3. Add the package:

   dependencies:
     hubtoolify_icons_pro:
       hosted: https://hubtoolify.com/api/pub
       version: ^2.0.0
   

import 'package:hubtoolify_icons_pro/slab.dart';

const HtiProIcon(HtiSlabIcons.home)

The full guide is at hubtoolify.com/docs/flutter.

Licence

Free for personal and commercial use in your apps and projects. You may not resell or redistribute the icons as an icon set. See LICENSE. The version number follows the HubToolify Icons npm packages.