HugeiconsIcon Wrapper

The @hugeicons/react-native package provides a HugeiconsIcon component that can render any icon from our libraries.
Think of it as a smart wrapper: you pass it an icon object via the icon prop, and it handles sizing, color, stroke width, and even switching between two icons for different states.

Props

State-based icons with altIcon and showAlt

Use altIcon and showAlt to swap between two icons based on component state:

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

Styling icons

You can style icons in a few ways:

• size: controls the rendered icon size in pixels.
• color: accepts any valid React Native color ('#111827', rgb(0,0,0), named colors, etc.).
• strokeWidth: adjusts the thickness of stroke-based icons.
• absoluteStrokeWidth: keeps that thickness fixed as the icon scales.
• style: apply layout and positioning using standard React Native style objects.

import React from 'react'
import { View, StyleSheet } from 'react-native'
import { HugeiconsIcon } from '@hugeicons/react-native'
import { Notification03Icon } from '@hugeicons/core-free-icons'
 
export function NotificationIcon() {
  return (
    <View style={styles.container}>
      <HugeiconsIcon
        icon={Notification03Icon}
        size={32}
        color="#6366f1"
        strokeWidth={1.75}
        style={styles.icon}
      />
    </View>
  )
}
 
const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  icon: {
    marginHorizontal: 4,
  },
})

When using colors like 'black' or theme-aware values from your design system, the icon will render with that color; you can also integrate with libraries like react-native-paper or styled-components for theming.

absoluteStrokeWidth changes how strokeWidth scales. By default the stroke grows with size, so a 48px icon has a stroke twice as thick as a 24px one. With absoluteStrokeWidth the stroke stays at the width you pass no matter the size, which keeps a set of differently sized icons visually consistent. It only takes effect when strokeWidth is set explicitly.

More patterns and examples

• For accessibility, theming, and composition patterns, see Best Practices with React Native.
• For complete UI examples (search bar, theme toggle, navigation), see Examples with React Native.