React Native

The @hugeicons/react-native package is freely available on the public npm registry. To use HugeIcons in your React Native project, you'll need to install both the React Native component package and at least one icon package of your choice. This modular approach allows you to keep your bundle size minimal by including only the icons you plan to use.

Installation

Install the React Native component package:

npm install @hugeicons/react-native

Install your preferred icon package(s):

npm install @hugeicons-pro/core-{variant}-{style}

Available styles:

HugeIcons Pro offers 36,000+ icons across 9 unique styles:

# Stroke Styles (Line icons with different corner styles)
@hugeicons-pro/core-stroke-rounded
@hugeicons-pro/core-stroke-sharp
@hugeicons-pro/core-stroke-standard
 
# Solid Styles (Filled icons with different corner styles)
@hugeicons-pro/core-solid-rounded
@hugeicons-pro/core-solid-sharp
@hugeicons-pro/core-solid-standard
 
# Special Styles (Unique visual treatments)
@hugeicons-pro/core-bulk-rounded      # Chunky style with depth
@hugeicons-pro/core-duotone-rounded   # Two-color design with primary/secondary emphasis
@hugeicons-pro/core-twotone-rounded   # Alternative two-color treatment

For more detailed information about our core packages and available styles, please visit our Core Packages page.

Basic Usage

import { HugeiconsIcon } from '@hugeicons/react-native';
import { Notification03Icon } from '@hugeicons-pro/core-stroke-rounded';
 
function App() {
  return (
    <HugeiconsIcon
      icon={Notification03Icon}
      size={24}
      color="black"
      strokeWidth={1.5}
    />
  );
}

Props

Prop	Type	Default	Description
icon	IconSvgObject	Required	The main icon component imported from an icon package
altIcon	IconSvgObject	-	Alternative icon component from an icon package for states, interactions, or animations
showAlt	boolean	false	When true, displays the altIcon instead of the main icon
size	number	24	Icon size in pixels
color	string	black	Icon color (any valid React Native color)
strokeWidth	number	1.5	Width of the icon strokes (works with stroke-style icons)
style	object	-	Additional styles (View style props)

Icon Naming

Each icon in our packages can be imported using either its main name or its style-specific alias:

// Both imports refer to the same icon
import { SearchIcon } from '@hugeicons-pro/core-stroke-rounded';
import { SearchStrokeRounded } from '@hugeicons-pro/core-stroke-rounded';

We recommend using the shorter main name (e.g., SearchIcon) for better readability. The style-specific aliases are useful when importing the same icon from different style packages to avoid naming conflicts.

Examples of Dynamic Icon Interactions

Search Bar with Clear Button

A search input that shows a clear button when text is entered:

import React, { useState } from 'react';
import { View, TextInput, TouchableOpacity } from 'react-native';
import { HugeiconsIcon } from '@hugeicons/react-native';
import { SearchIcon, CloseCircleIcon } from '@hugeicons-pro/core-stroke-rounded';
 
function SearchBar() {
  const [value, setValue] = useState('');
 
  return (
    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
      <TextInput
        value={value}
        onChangeText={setValue}
        placeholder="Search..."
        style={{ flex: 1 }}
      />
      <TouchableOpacity onPress={() => value.length > 0 && setValue('')}>
        <HugeiconsIcon
          icon={SearchIcon}
          altIcon={CloseCircleIcon}
          showAlt={value.length > 0}
        />
      </TouchableOpacity>
    </View>
  );
}

Theme Toggle with Style Switch

A simple dark mode toggle using different icons:

import React, { useState } from 'react';
import { TouchableOpacity } from 'react-native';
import { HugeiconsIcon } from '@hugeicons/react-native';
import { SunIcon, Moon02Icon } from '@hugeicons-pro/core-solid-rounded';
 
function ThemeToggle() {
  const [isDark, setIsDark] = useState(false);
 
  return (
    <TouchableOpacity onPress={() => setIsDark(!isDark)}>
      <HugeiconsIcon
        icon={SunIcon}
        altIcon={Moon02Icon}
        showAlt={isDark}
      />
    </TouchableOpacity>
  );
}

Navigation Bar with Style Switch

A navigation bar that uses different icon styles to indicate the active state:

import React, { useState } from 'react';
import { View, TouchableOpacity } from 'react-native';
import { HugeiconsIcon } from '@hugeicons/react-native';
import { 
  HomeIcon,
  SearchIcon,
  Notification03Icon,
  UserIcon 
} from '@hugeicons-pro/core-solid-rounded';
import {
  HomeIcon as HomeDuotone,
  SearchIcon as SearchDuotone,
  Notification03Icon as NotificationDuotone,
  UserIcon as UserDuotone
} from '@hugeicons-pro/core-duotone-rounded';
 
function NavigationBar() {
  const [activeTab, setActiveTab] = useState('home');
  
  const navItems = [
    { id: 'home', solidIcon: HomeIcon, duotoneIcon: HomeDuotone },
    { id: 'search', solidIcon: SearchIcon, duotoneIcon: SearchDuotone },
    { id: 'notifications', solidIcon: Notification03Icon, duotoneIcon: NotificationDuotone },
    { id: 'profile', solidIcon: UserIcon, duotoneIcon: UserDuotone }
  ];
 
  return (
    <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
      {navItems.map(item => (
        <TouchableOpacity
          key={item.id}
          onPress={() => setActiveTab(item.id)}
          style={[
            styles.navItem,
            activeTab === item.id && styles.activeNavItem
          ]}
        >
          <HugeiconsIcon
            icon={item.solidIcon}
            altIcon={item.duotoneIcon}
            showAlt={activeTab === item.id}
            size={24}
          />
        </TouchableOpacity>
      ))}
    </View>
  );
}

Svelte Flutter