HarmonyOS Symbol

A Flutter icon library for HarmonyOS Symbol — 3,844 icons shipped as a single variable font.

HarmonyOS Symbol is an important evolution of the HarmonyOS system icon design. It relies on simplified shapes and intuitive semantics so that every glyph is easy to recognize, while adding a younger, fresher touch to the overall visual style.

Because HarmonyOS Symbol is a font, it pairs seamlessly with system text: icons inherit their size and color from IconTheme, align with text like any other character, and cost nothing to add to an existing app. The font is also a variable font, so a single asset adapts its weight to the surrounding text — no per-density icons, no extra files to bundle.

✨ Features

🎨 3,844 icons covering the complete HarmonyOS Symbol set.
🎚️ Variable font: continuous weight control, no duplicate glyph variants to maintain.
🔍 Searchable: every name is exposed at runtime through harmonySymbolCatalog.

🌐 Live demo

A searchable gallery runs on the web, no install required:

runoob-coder.github.io/hm_symbol_flutter/

It is the example/ app of this repository, deployed to GitHub Pages on every push to master.

📦 Install

flutter pub add hm_symbol

Then:

import 'package:hm_symbol/hm_symbol.dart';

🚀 Usage

Use it with the Icon class. Every icon is identified by its name, as listed in the web gallery:

Icon(HarmonySymbols.HarmonyOS);

Icons behave like text, so they can be styled from a single place:

IconTheme(
  data: IconThemeData(size: 24, color: Theme.of(context).colorScheme.primary),
  child: Row(
    children: const [
      Icon(HarmonySymbols.wifi),
      Icon(HarmonySymbols.lock),
      Icon(HarmonySymbols.star_fill),
    ],
  ),
);

🎚️ Variable font: size and weight

The font exposes a continuous weight axis, so icons can follow the typographic hierarchy:

Icon(HarmonySymbols.wifi, size: 32, weight: 600);
Icon(HarmonySymbols.wifi, size: 32, weight: 200);

🔍 Searching icons at runtime

harmonySymbolCatalog maps every symbol name to its IconData, which is all you need to build an icon picker, a gallery or a search field:

final results = harmonySymbolCatalog.entries
    .where((entry) => entry.key.contains('wifi'))
    .toList();

for (final entry in results) {
  debugPrint('${entry.key} -> ${entry.value.codePoint}');
}

📱 Example app

cd example
flutter pub get

flutter run -d chrome   # web
flutter run             # any attached device or desktop target

The gallery features keyword search, outline/fill category filters, adjustable grid size, light/dark themes, and a detail sheet with copy-to-clipboard snippets.

🛠️ Building the web version

cd example
flutter build web --release --base-href "/hm_symbol_flutter/"

The generated site lands in example/build/web and can be served by any static host. Pushing to master triggers .github/workflows/deploy_web.yml, which publishes it to GitHub Pages — set your own repository name in --base-href if you fork it.

🔁 Regenerating the bindings

lib/src/*.g.dart is generated from tool/HMSymbol.nam (a codepoint name table):

dart run tool/generate.dart

📐 Design guides & resources

📄 License

The HarmonyOS Symbol font itself is owned by Huawei and is distributed here for convenience only. Please follow the official guidelines linked above.

💛 Support

If hm_symbol helps you build better UIs, please consider supporting it. It only takes a few seconds and helps other Flutter developers discover the library.