Icon

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

Basic Usage

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

<Icon icon="Home" />

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

Props

Prop	Type	Default	Description
icon	IconName	—	Icon name from the Iconsax library or the built-in custom icon set
size	number	20	Size of the icon in pixels. Defaults to 20
color	ColorKeys	—	Icon color key from the active theme palette
type	IconType	'Linear'	Iconsax icon style variant. Defaults to 'Linear'
margin	SpacingProps	2	Margin around the icon. Defaults to 2
isLoading	boolean	false	Show a circular loading skeleton in place of the icon
testID	string	—	Test identifier for UI automation
onPress	() => void	—	Press handler for interactive icons. When provided, the icon is wrapped in a pressable with the same press/hover feedback as the button components

Available Icons

Custom Icons (Icons)

Built-in branded icons for common social and brand use cases:

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

Iconsax Icons

993 icons available via the Iconsax library. 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

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

Colors

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

Pressable Icon

Passing onPress wraps the icon in a pressable that dims on press and hover, matching the feedback of Button, IconButton, and Badge.

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

Custom (Brand) Icons

<Icon icon="CustomApple" size={24} />
<Icon icon="CustomGoogle" size={24} />
<Icon icon="CustomGithub" size={24} />

Loading State

<Icon icon="User" isLoading />