npm Package — <iconsax-icon>

"One component, every framework. No React package, no Vue package, no Svelte package — just HTML."

iconsax ships as a native Custom Element, so it works identically in React, Vue, Svelte, or a plain <script type="module"> tag — no framework-specific build needed.

Install

npm install iconsax

import "iconsax" // registers <iconsax-icon> as a custom element

Free icons (1200+, zero setup)

<iconsax-icon name="home" type="linear" size="24" color="#6366f1"></iconsax-icon>

Free icons resolve on their own — no key, no account, no network call to any Iconsax server beyond the package's own bundled data chunks.

Props

PropWhat it doesDefault
nameIcon name (required)—
typeStyle: bold · broken · bulk · linear · outline · twotonelinear
sizeSize in px24
colorAny CSS colorcurrentColor
proBoolean flag — resolves from the Pro registry instead of freeabsent

All props are reactive: changing an attribute at runtime (el.setAttribute("color", "red"), or a bound prop in React/Vue/Svelte) re-renders the icon automatically.

Pro icons

Pro icons are never bundled in the package — they're resolved once, locally, via the CLI, then committed to your repo like any other asset. This means:

  • Production has zero runtime dependency on Iconsax's servers or your subscription status.
  • An icon you've already resolved keeps working even if you cancel later — the license check only happens at sync time.

Step 1 — Write the icon with the pro attribute

<iconsax-icon pro name="rocket" type="bold" size="24"></iconsax-icon>

Step 2 — Get your API key

Same key used for MCP:

  1. Go to iconsax.io and log in
  2. Click your avatar → Subscription
  3. Scroll to the API Key section → Generate key (starts with ix_pro_...)

Step 3 — Sync

npx iconsax sync --key ix_pro_XXXXXXXXXXXXXXXX

This scans your code for <iconsax-icon pro ...> usages, requests any new ones from the API, and writes them to iconsax-pro.icons.json at your project root.

Rate limit: 300 new icons per day per key. Icons you already synced don't count against it.

Step 4 — Register them once

import proIcons from "./iconsax-pro.icons.json"
import { registerProIcons } from "iconsax"

registerProIcons(proIcons)

Call this once at your app's entry point. If a <iconsax-icon pro> renders before registerProIcons() runs, it re-renders itself automatically the moment the icon becomes available — no manual retry needed.

CLI reference

iconsax sync [--key ix_pro_xxx] [--src ./src] [--api <url>]
FlagDescriptionDefault
--keyPro API keyIX_PRO_KEY env var
--srcFolder to scan for icon usages./src
--apiAPI endpointhttps://app.iconsax.io/api/npm-pro-icon

FAQ

Do I need a key for free icons? No. Free icons work with just npm install iconsax — no account, no key.

What happens if I cancel my Pro subscription? Icons already synced into iconsax-pro.icons.json keep working forever in your project. iconsax sync will stop resolving new Pro icons once your key is no longer tied to an active subscription.

Does this work with SSR / static builds? Yes. Free icon chunks are fetched relative to the package's own URL, and Pro icons are resolved from your local JSON — nothing depends on the request being server-rendered vs. client-rendered.

Can I use it without a bundler? Yes — it's a plain ES module. <script type="module">import "iconsax"</script> works directly in the browser.

Ready to drop icons into your code?

npm install iconsax, import it once, and start writing <iconsax-icon name="..." /> anywhere in your app.

cat-working

Use with AI (MCP)
Connect Iconsax directly to Claude, Cursor, or any MCP-compatible AI tool — no installation required.