Skip to Content
IntegrationsSolidJSQuick Start (Free)

Quick Start with SolidJS (Free)

Get up and running with Hugeicons Free in your SolidJS app. This guide covers prerequisites, installing the SolidJS 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 SolidJS app set up (Vite, SolidStart, Astro, etc.) using solid-js 1.8 or later
  • Basic familiarity with JSX and components

1. Install Packages

First, install the SolidJS component package:

npm install @hugeicons/solid-js

Then, install the free icon pack:

npm install @hugeicons/core-free-icons

Our free package, @hugeicons/core-free-icons, includes 6,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/solid-js'
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. Every prop is reactive, so you can pass signals directly (e.g. size={size()}).

3. Next steps

OverviewHugeicons Pro with SolidJS