Examples with React Native

This page shows practical patterns for using HugeiconsIcon in common React Native UI components.
All examples assume you've already installed @hugeicons/react-native and either the free or Pro icon packages.

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, CancelCircleIcon } from '@hugeicons/core-free-icons'
 
export 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={CancelCircleIcon}
          showAlt={value.length > 0}
          size={24}
          color="black"
        />
      </TouchableOpacity>
    </View>
  )
}

Favorite toggle button with Pro Icons

A favorite toggle button that switches based on the state:

import React, { useState } from 'react'
import { TouchableOpacity } from 'react-native'
import { HugeiconsIcon } from '@hugeicons/react-native'
import { FavouriteStrokeStandard } from '@hugeicons-pro/core-stroke-standard'
import { FavouriteSolidStandard } from '@hugeicons-pro/core-solid-standard'
 
export function FavoriteButton() {
  const [isFavorite, setIsFavorite] = useState(false)
 
  return (
    <TouchableOpacity onPress={() => setIsFavorite(!isFavorite)}>
      <HugeiconsIcon
        icon={FavouriteStrokeStandard}
        altIcon={FavouriteSolidStandard}
        showAlt={isFavorite}
        size={20}
        color="black"
      />
    </TouchableOpacity>
  )
}

Bottom navigation with active state

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

import React, { useState } from 'react'
import { View, TouchableOpacity, StyleSheet } from 'react-native'
import { HugeiconsIcon } from '@hugeicons/react-native'
import { HomeIcon, SearchIcon, Notification03Icon, UserIcon } from '@hugeicons/core-free-icons'
import {
  HomeIcon as HomeDuotone,
  SearchIcon as SearchDuotone,
  Notification03Icon as NotificationDuotone,
  UserIcon as UserDuotone,
} from '@hugeicons-pro/core-duotone-rounded'
 
export 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={styles.container}>
      {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}
            color="black"
          />
        </TouchableOpacity>
      ))}
    </View>
  )
}
 
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-around',
  },
  navItem: {
    padding: 8,
  },
  activeNavItem: {
    borderBottomWidth: 2,
  },
})

Next steps

For full prop details, see the HugeiconsIcon wrapper page
For setup instructions, visit Quick Start with React Native (Free) or Hugeicons Pro with React Native

Best Practices with React Native Flutter