Integrations
React
Quick Start (Free)

Quick Start with React (Free)

Get up and running with Hugeicons Free in your React app. This guide covers prerequisites, installing the React 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 app set up (Create React App, Next.js, Vite, etc.)
  • Basic familiarity with JSX and components

1. Install Packages

First, install the React component package:

npm install @hugeicons/react

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 { HugeiconsIcon } from '@hugeicons/react'
import { Notification03Icon } from '@hugeicons/core-free-icons'
 
function App() {
  return <HugeiconsIcon icon={Notification03Icon} size={24} color="currentColor" strokeWidth={1.5} />
}

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

3. Next steps

OverviewHugeicons Pro with React