Integrations
React
Examples with React

Examples with React

This page shows practical patterns for using HugeiconsIcon in common React UI components.
All examples assume you've already installed @hugeicons/react 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 { useState } from 'react'
import { HugeiconsIcon } from '@hugeicons/react'
import { SearchIcon, CancelCircleIcon } from '@hugeicons/core-free-icons'   
 
function SearchBar() {
    const [value, setValue] = useState('')
 
    return (
        <div>
            <input type="text" value={value} onChange={e => setValue(e.target.value)} placeholder="Search..." />
            <HugeiconsIcon icon={SearchIcon} altIcon={CancelCircleIcon} showAlt={value.length > 0} onClick={() => value.length > 0 && setValue('')} />
        </div>
    )
}

Favorite toggle button with Pro Icons

A favorite toggle button that switches based on the state:

import { useState } from 'react'
import { HugeiconsIcon } from '@hugeicons/react'
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 (
    <button onClick={() => setIsFavorite(!isFavorite)}>
      <HugeiconsIcon icon={FavouriteStrokeStandard} altIcon={FavouriteSolidStandard} showAlt={isFavorite} size={20} />
    </button>
  )
}

Bottom navigation with active state

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

import { useState } from 'react'
import { HugeiconsIcon } from '@hugeicons/react'
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'
 
function NavigationBar() {
    const [activeTab, setActiveTab] = useState('home')
 
    const NavItem = ({ id, SolidIcon, DuotoneIcon }) => (
        <button onClick={() => setActiveTab(id)} className={`nav-item ${activeTab === id ? 'active' : ''}`}>
            <HugeiconsIcon icon={SolidIcon} altIcon={DuotoneIcon} showAlt={activeTab === id} size={24} />
        </button>
    )
 
    return (
        <nav>
            <NavItem id="home" SolidIcon={HomeIcon} DuotoneIcon={HomeDuotone} />
            <NavItem id="search" SolidIcon={SearchIcon} DuotoneIcon={SearchDuotone} />
            <NavItem id="notifications" SolidIcon={Notification03Icon} DuotoneIcon={NotificationDuotone} />
            <NavItem id="profile" SolidIcon={UserIcon} DuotoneIcon={UserDuotone} />
        </nav>
    )
}

Next steps

Best Practices with ReactOverview