Icons

This chapter covers flutter_miuix's icon system: MiuixIcon (the unified rendering entry), MiuixIcons (the icon set entry), MiuixBasicIcons (7 basic vector icons), and MiuixExtendedIcons (120+ extended icons × 5 weights).

The underlying vector data model (MiuixVectorIcon / MiuixVectorPath / miuixParsePath) is documented in the "Foundation" chapter.

MiuixIcon

Miuix-style icon. Single-color icons are tinted via tint (defaulting to MiuixContentColor); multi-color icons pass kMiuixTintUnspecified to disable tinting, or supply a custom Widget via child.

Parameter	Type	Default	Description
icon	IconData?	null	Material icon data
vector	MiuixVectorIcon?	null	Miuix vector icon (built-in basic / extended)
child	Widget?	null	Custom icon Widget (e.g., multi-color)
tint	Color?	null	Tint color; null reads MiuixContentColor.of(context); passing kMiuixTintUnspecified disables any tint
contentDescription	String?	null	Accessibility description; null skips Semantics (decorative icon)
size	double?	null	Icon size; null falls back to MiuixIconDefaults.defaultSize (24) for icon, or keeps the child's intrinsic size

icon / vector / child are mutually exclusive (the constructor asserts exactly one is non-null).

kMiuixTintUnspecified

Sentinel color Color(0x00000001), meaning "no tint" (for multi-color icons). Compared by identical: only this exact constant is treated as "no tint".

MiuixIconDefaults

Constant	Value	Description
defaultSize	24	Default icon size (logical pixels)

Render paths:

Input	Behavior
icon	Calls Flutter Icon with color/size/semanticLabel; defaults to 24, tinted via SrcIn
vector	Target box is the explicit size (square) or vector.intrinsicSize; FittedBox(BoxFit.contain) scales the viewport-coordinate drawing into the target box; tint is applied via MiuixVectorIconPainter using ColorFilter.mode(tint, BlendMode.srcIn)
child	Any Widget; when size is non-null, constrained by SizedBox+FittedBox(BoxFit.contain); unless "no tint", wrapped in ColorFiltered(BlendMode.srcIn); finally wrapped in Semantics if needed

Example:

// 1. Single-color vector icon (defaults to MiuixContentColor)
MiuixIcon(vector: MiuixIcons.basic.search);

// 2. Custom tint and size
MiuixIcon(
  vector: MiuixIcons.extended.byName('home')!,
  tint: theme.colors.primary,
  size: 28,
);

// 3. Material icon
MiuixIcon(icon: Icons.favorite, tint: Colors.red);

// 4. Multi-color custom icon (no tint)
MiuixIcon(
  child: Image.asset('assets/multicolor_logo.png'),
  tint: kMiuixTintUnspecified,
  contentDescription: 'Logo',
);

MiuixIcons

Entry point for the built-in Miuix icon set. MiuixIcons._() private constructor; only static fields are exposed.

Field	Type	Description
basic	MiuixBasicIcons	Basic vector icons used internally
extended	MiuixExtendedIcons	Extended icons, 120+ × 5 weights

MiuixBasicIcons

Basic icon namespace. Each getter returns a MiuixVectorIcon via lazy-loaded cached singleton (so each icon is built only once).

getter	Viewport	Description
arrowRight	10×16	Right arrow (>)
arrowUpDown	10×16	Up-down double arrow
check	56×56	Check mark
close	24×24	Close (x, stroked)
search	20×20	Search (magnifier)
searchCleanup	68×68	Search clear (circled x)
sidebar	1224×1224	Sidebar (with vertical flip)

Example:

MiuixIcon(vector: MiuixIcons.basic.check, tint: theme.colors.primary);
MiuixIcon(vector: MiuixIcons.basic.arrowRight, size: 12);

MiuixExtendedIcons

Extended icon set. 120+ icons × 5 weights.

Field / Method	Type	Description
MiuixExtendedIcons.internal()	constructor	Internal constructor; use the MiuixIcons.extended singleton, do not instantiate directly
byName(name, [weight = MiuixIconWeight.regular])	MiuixVectorIcon?	Returns the icon by name; names are lowerCamelCase (e.g., addCircle); returns null if not found
names	List<String>	All icon names (lowerCamelCase), sorted alphabetically; useful for icon browser pages

MiuixIconWeight

Icon weight for extended icons.

Value	Description
light	Light
normal	Normal
regular	Regular (default)
medium	Medium
demibold	Demibold

Implementation notes: the raw data for extended icons is generated by tool/gen_extended_icons.py, which compresses each icon's 5-weight PathNode lists into SVG path strings, restored at runtime via miuixParsePath into MiuixVectorIcon. Built lazily and cached by name#weightIndex.

Available icon names (selected)

The full set of 120+ icons can be obtained at runtime via MiuixIcons.extended.names. Common icons:

Category	Icon names (selected)
General actions	add, addCircle, addFolder, close, clear, remove, ok, check (basic)
File actions	copy, cut, paste, delete, rename, replace, merge, moveFile, convertFile, trim
Navigation	back, forward, chevronBackward, chevronForward, reply, replyAll, send
Edit	edit, create, undo, redo, rotateLeft, reset, update, refresh
View	gridView, listView, horizontalSplit, verticalSplit, expandLess, expandMore, zoomOut, sort, filter
Media	play, pause, music, mic, micSlash, album, image, photos, screenCapture, appRecording, recording, recordingTape, stopwatch, timer
Communication	phone, messages, email, contacts, contactsBook, contactsCircle, removeContact, answer, callRecording
System	home, settings, theme, lock, unlock, pin, unpin, hide, show, blocklist, scan, screenMirroring, searchDevice
Data	backup, download, fileDownloads, topDownloads, uploadCloud, import, cloudFill, update, reset
Folders	folder, folderFill, favorites, favoritesFill, recent, years, months, weeks, all
Info	info, help, report, alarm, worldClock, tasks, notes, notesFill, mindMap, playlist
People	community, contacts, carrier, promotions, store, bankCards
Other	link, share, translate, location, mapAlbum, sidebar, tune, layers, selectAll, volumeOff, volumeUp

Example:

// Default Regular weight
final home = MiuixIcons.extended.byName('home')!;
MiuixIcon(vector: home, tint: theme.colors.primary);

// Specify weight
final homeLight = MiuixIcons.extended.byName('home', MiuixIconWeight.light)!;
MiuixIcon(vector: homeLight, size: 28);

// List all icon names (for icon browser)
final allNames = MiuixIcons.extended.names;

Full example: a button using a built-in icon

MiuixButton.icon(
  onPressed: () {},
  child: MiuixIcon(
    vector: MiuixIcons.extended.byName('settings')!,
    tint: MiuixTheme.of(context).colors.onSurface,
  ),
)