Icons

Multinaire Design uses two icon sources:

1. Custom icons — SVG icons you add via the generation script (Apple, Google, Facebook, Instagram, LinkedIn, GitHub, X 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 MultinaireIcon 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
Apple	Apple logo
Google	Google logo (multicolor)
Facebook	Facebook logo
Instagram	Instagram logo
LinkedIn	LinkedIn logo
Github	GitHub logo
X	X (formerly Twitter) logo

Custom icons always render with their original colors and do not respond to the color or type props.

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 { MultinaireIcon } from '@multinaire/multinaire-design';

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

// Custom icon
<MultinaireIcon icon="Apple" />
<MultinaireIcon icon="Google" />

With Color

Color only applies to Iconsax icons. Custom icons always use their original colors.

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

With Type

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

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

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

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

With Size

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

In Buttons

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

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

<MultinaireMenuButton
  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
<MultinaireIcon icon="Apple" />
<MultinaireIcon icon="Google" />

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