Quick Start

Get up and running with rn-iconify in 5 minutes.

Basic Usage

Import any icon set component and use it:

import { Mdi, Heroicons, Lucide, Ph } from 'rn-iconify';

function MyComponent() {
  return (
    <>
      <Mdi name="home" size={24} color="blue" />
      <Heroicons name="user" size={24} color="red" />
      <Lucide name="camera" size={24} />
      <Ph name="house" size={24} color="#6366f1" />
    </>
  );
}

Available Props

Prop	Type	Default	Description
name	string	required	Icon name (with autocomplete)
size	number	24	Icon width and height
color	string	'#000000'	Icon color
rotate	number	0	Rotation angle in degrees (any value accepted)
flip	'horizontal' | 'vertical' | 'both'	-	Flip direction
style	ViewStyle	-	Additional styles

Popular Icon Sets

Material Design Icons (Mdi)

The most comprehensive icon set with 7,447+ icons.

import { Mdi } from 'rn-iconify';

<Mdi name="home" size={24} />
<Mdi name="settings" size={24} />
<Mdi name="account" size={24} />
<Mdi name="heart" size={24} color="red" />

Heroicons

Beautiful hand-crafted icons by the makers of Tailwind CSS.

import { Heroicons } from 'rn-iconify';

<Heroicons name="home" size={24} />
<Heroicons name="user" size={24} />
<Heroicons name="cog-6-tooth" size={24} />

Lucide

Community-driven fork of Feather Icons.

import { Lucide } from 'rn-iconify';

<Lucide name="house" size={24} />
<Lucide name="settings" size={24} />
<Lucide name="user" size={24} />

Phosphor (Ph)

Flexible icon family with 9,072 icons.

import { Ph } from 'rn-iconify';

<Ph name="house" size={24} />
<Ph name="gear" size={24} />
<Ph name="user" size={24} />

Rotation & Flip

Transform icons with rotation and flip:

import { Mdi } from 'rn-iconify';

// Rotation
<Mdi name="arrow-right" rotate={90} />   // Points down
<Mdi name="arrow-right" rotate={180} />  // Points left
<Mdi name="arrow-right" rotate={270} />  // Points up

// Flip
<Mdi name="arrow-right" flip="horizontal" />  // Mirror horizontally
<Mdi name="arrow-right" flip="vertical" />    // Mirror vertically
<Mdi name="arrow-right" flip="both" />        // Mirror both

tip

The rotate prop accepts any degree value, not just multiples of 90. For example, rotate={45} produces a 45-degree diagonal rotation.

Loading States

Show placeholders while icons load:

import { Mdi } from 'rn-iconify';

// Built-in presets
<Mdi name="home" placeholder="skeleton" />  // Gray box
<Mdi name="home" placeholder="pulse" />     // Fading animation
<Mdi name="home" placeholder="shimmer" />   // Gradient sweep

// Custom placeholder
<Mdi
  name="home"
  placeholder={<ActivityIndicator size="small" />}
/>

Prefetching

Preload icons for instant rendering:

import { prefetchIcons } from 'rn-iconify';

async function initApp() {
  // Prefetch commonly used icons
  await prefetchIcons([
    'mdi:home',
    'mdi:settings',
    'mdi:account',
    'heroicons:user',
  ]);
}

Finding Icons

Browse icons at Iconify Design:

1. Search for an icon (e.g., "home")
2. Note the icon set prefix (e.g., mdi)
3. Note the icon name (e.g., home)
4. Use it: <Mdi name="home" />

Or use our Icon Browser to search all 268,000+ icons.

Next Steps

• TypeScript - Full autocomplete setup
• Placeholders - Loading states
• Theme Provider - Global styling
• Babel Plugin - 0ms first render