Skip to Content
IntegrationsSolidJSExamples with SolidJS

Examples with SolidJS

This page shows practical patterns for using HugeiconsIcon in common SolidJS UI components.
All examples assume you’ve already installed @hugeicons/solid-js 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 { createSignal } from 'solid-js'
import { HugeiconsIcon } from '@hugeicons/solid-js'
import { SearchIcon, CancelCircleIcon } from '@hugeicons/core-free-icons'
 
function SearchBar() {
    const [value, setValue] = createSignal('')
 
    return (
        <div>
            <input type="text" value={value()} onInput={e => setValue(e.currentTarget.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 { createSignal } from 'solid-js'
import { HugeiconsIcon } from '@hugeicons/solid-js'
import { FavouriteStrokeStandard } from '@hugeicons-pro/core-stroke-standard'
import { FavouriteSolidStandard } from '@hugeicons-pro/core-solid-standard'
 
export function FavoriteButton() {
  const [isFavorite, setIsFavorite] = createSignal(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 { createSignal, For } from 'solid-js'
import { HugeiconsIcon } from '@hugeicons/solid-js'
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'
 
const tabs = [
    { id: 'home', icon: HomeIcon, activeIcon: HomeDuotone },
    { id: 'search', icon: SearchIcon, activeIcon: SearchDuotone },
    { id: 'notifications', icon: Notification03Icon, activeIcon: NotificationDuotone },
    { id: 'profile', icon: UserIcon, activeIcon: UserDuotone },
]
 
function NavigationBar() {
    const [activeTab, setActiveTab] = createSignal('home')
 
    return (
        <nav>
            <For each={tabs}>
                {(tab) => (
                    <button onClick={() => setActiveTab(tab.id)} classList={{ 'nav-item': true, active: activeTab() === tab.id }}>
                        <HugeiconsIcon icon={tab.icon} altIcon={tab.activeIcon} showAlt={activeTab() === tab.id} size={24} />
                    </button>
                )}
            </For>
        </nav>
    )
}

Next steps

Best Practices with SolidJSOverview