Icons

Multinaire UI uses two icon sources:

1. Custom icons — SVG icons you add via the generation script (brand logos and a few list glyphs are included by default)
2. Iconsax icons — 993 unique icon shapes × 6 style types = 6,000+ icons via iconsax-react-nativejs

Both are accessed through the same Icon component.

Installation

iconsax-react-nativejs is a required dependency — install it alongside the library:

npm install iconsax-react-nativejs

react-native-svg is also required (already listed in peer dependencies).

Custom Icons

Name	Description
CustomApple	Apple logo
CustomGoogle	Google logo (multicolor)
CustomFacebook	Facebook logo
CustomInstagram	Instagram logo
CustomLinkedIn	LinkedIn logo
CustomGithub	GitHub logo
CustomX	X (formerly Twitter) logo
CustomPlan	Plan / route glyph
CustomBulletList	Bullet list glyph, used by MarkdownToolbar
CustomNumberedList	Numbered list glyph, used by MarkdownToolbar
CustomGrid	Six-dot grid glyph, the drag handle for a SortableContainer row

Custom icons render with the colors baked into their SVG unless color is passed, which recolors every filled shape — flattening a multicolor logo like CustomGoogle to a single color. They ignore the type prop, which is Iconsax-only.

Iconsax Icons

All 993 Iconsax icons are available. Browse them at iconsax.io — the name shown on the site maps directly to the icon prop.

Each icon supports 6 style types via the type prop:

Type	Description
Linear (default)	Thin outline strokes
Outline	Medium outline
Broken	Broken/dashed stroke
Bold	Solid filled
Bulk	Two-tone solid
TwoTone	Two-tone outline

Usage

Basic

import { Icon } from '@multinaire/expo-ui';

// Iconsax icon (Linear type by default)
<Icon icon="Home2" />

// Custom icon
<Icon icon="CustomApple" />
<Icon icon="CustomGoogle" />

With Color

color takes a key from the active theme palette. On a custom icon it replaces every filled shape, so pass it only for single-color glyphs — a multicolor logo is flattened.

<Icon icon="TickCircle" color="success" />
<Icon icon="CloseCircle" color="error" />
<Icon icon="Home2" color="primary" />

With Type

// Outline
<Icon icon="Heart" type="Outline" />

// Bold (filled)
<Icon icon="TickCircle" type="Bold" color="success" />

// Broken
<Icon icon="Setting2" type="Broken" />

// Bulk
<Icon icon="Home2" type="Bulk" color="primary" />

With Size

<Icon icon="SearchNormal1" size={16} />
<Icon icon="SearchNormal1" size={24} />
<Icon icon="SearchNormal1" size={32} />

In Buttons

<IconButton icon="Setting2" onPress={handleSettings} />

<ActionButton
  icon="Add"
  title="Add Item"
  onPress={handleAdd}
/>

<MenuButton
  type="primary"
  leading="TickCircle"
  trailing="ArrowRight2"
  title="Confirm"
/>

Adding Custom Icons

Place your SVG file in src/assets/icons/svgs/, then run:

npm run generate:icons

The script reads all .svg files from that folder and generates a React FC component for each one using the filename as the component name (PascalCase, hyphens stripped). The generated components follow the same API as Iconsax icons.

TypeScript

The icon prop is fully typed — your IDE will autocomplete all custom icon names and all 993 Iconsax icon names:

// ✅ Custom icons
<Icon icon="CustomApple" />
<Icon icon="CustomGoogle" />

// ✅ Iconsax icons with autocomplete
<Icon icon="Home2" type="Bold" color="primary" />
<Icon icon="SearchNormal1" />
<Icon icon="TickCircle" type="Bold" />