Icons

Multinaire UI 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 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
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 { Icon } from '@multinaire/ui';

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

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

With Color

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

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

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