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.

HubToolify Line icons drawn by HtiIcon

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:

Create a Flutter token at hubtoolify.com/account/npm.
Run dart pub token add https://hubtoolify.com/api/pub and paste the token.

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.