Hugeicons with SolidJS Overview
Hugeicons gives you a flexible icon system for SolidJS, from a free starter pack to the full 60,000+ icon Pro library.
The @hugeicons/solid-js package exposes a single HugeiconsIcon component that can render any icon you import from our packages.
Use this overview page as the entry point into all SolidJS-related docs.
The package is named
@hugeicons/solid-js, not@hugeicons/solid. “Solid” is also one of our icon styles (@hugeicons-pro/core-solid-*), so the-jssuffix keeps the two apart.
Prerequisites
Before using Hugeicons with SolidJS, you should have:
- A SolidJS app (Vite, SolidStart, Astro, etc.) using
solid-js1.8 or later - Node.js and a package manager (npm, pnpm, or Yarn)
- Basic familiarity with JSX and Solid components
Free vs Pro at a glance
| Free | Pro | |
|---|---|---|
| Icon library | 6,000+ free icons in 1 style (Stroke Rounded only) | 60,000+ icons across 10 styles |
| Packages | @hugeicons/solid-js, @hugeicons/core-free-icons | @hugeicons/solid-js, @hugeicons-pro/core-* |
| Registry | Public npm registry | Private Hugeicons registry (https://npm.hugeicons.com/) |
| Best for | Trying Hugeicons, simple projects, or commercial projects that only need Stroke Rounded icons | Full access for personal and commercial projects with all 10 styles and 60,000+ icons |
| Setup guide | Quick Start (Free) | Hugeicons Pro with SolidJS |
Choose your path
-
Just getting started and want free icons?
Go to Quick Start (Free) to install@hugeicons/solid-jsand@hugeicons/core-free-icons, and render your first icon. -
Already a Pro customer or need more styles?
Go to Hugeicons Pro with SolidJS to authenticate with our private registry, install Pro icon packages, and use them in your app. -
Need the full API for
HugeiconsIcon?
Go to HugeiconsIcon Wrapper for the props table, styling options, and multicolor icons. -
Optimizing how you use icons across your app?
Go to Best Practices with SolidJS for patterns around imports, reactivity, accessibility, and SSR. -
Looking for ready-made patterns and snippets?
Go to Examples with SolidJS for copy-paste examples like search bars, favorite toggles, and navigation bars that showcase dynamic icon behavior.