Integrations
React Native
Quick Start (Free)

Quick Start with React Native (Free)

Get up and running with Hugeicons Free in your React Native app. This guide covers prerequisites, installing the React Native component and free icon package, and rendering your first icon.

Prerequisites

Before you start, make sure you have:

  • Node.js and npm (or Yarn / pnpm) installed
  • A React Native app set up (Expo or bare React Native)
  • Basic familiarity with React Native components and JSX

1. Install Packages

First, install the React Native component package:

npm install @hugeicons/react-native

Then, install the free icon pack:

npm install @hugeicons/core-free-icons

Our free package, @hugeicons/core-free-icons, includes 4,000+ icons in 1 style (Stroke Rounded only) you can use in any projects at no cost. For more styles, upgrade to Hugeicons Pro.

2. Basic Usage

Import the HugeiconsIcon component and any icon from the free package to get started.

import React from 'react'
import { View } from 'react-native'
import { HugeiconsIcon } from '@hugeicons/react-native'
import { Notification03Icon } from '@hugeicons/core-free-icons'
 
export default function App() {
  return (
    <View>
      <HugeiconsIcon
        icon={Notification03Icon}
        size={24}
        color="black"
        strokeWidth={1.5}
      />
    </View>
  )
}

You can adjust the size, color, and strokeWidth props to match your design system.

3. Next steps

OverviewHugeicons Pro with React Native