MultinaireIcon

SVG icon component with theme-aware colors and optional press handling.

Basic Usage

import { MultinaireIcon } from '@multinaire/multinaire-design';

<MultinaireIcon icon="Home" />

<MultinaireIcon icon="Settings" size={32} color="primary" />

Props

Prop	Type	Default	Description
icon	MultinaireIcons	-	Icon name from the icon set
size	number	24	Icon size in pixels
color	ColorKeys	'text'	Icon color from theme
margin	SpacingProps	-	Margin spacing
isLoading	boolean	false	Show loading skeleton
onPress	() => void	-	Press handler (makes icon tappable)

Available Icons

The library includes 53+ icons. Common icons include:

• Navigation: Home, Back, Forward, Menu, Close
• Actions: Add, Edit, Delete, Save, Share
• Media: Camera, Image, Video, Play, Pause
• Communication: Message, Email, Phone, Notification
• UI: Check, Search, Filter, Settings, More

Examples

Different Sizes

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

Colors

<MultinaireIcon icon="Heart" color="primary" />
<MultinaireIcon icon="Heart" color="error" />
<MultinaireIcon icon="Heart" color="neutral" />

Pressable Icon

<MultinaireIcon
  icon="Settings"
  size={28}
  onPress={() => navigation.navigate('Settings')}
/>

Loading State

<MultinaireIcon icon="User" isLoading />