Relaxicons: Turn Any Iconify Icon into a Native Component for 8 Frameworks

Description and use

Relaxicons generates native icon components from Iconify, eliminating bulky icon packages and runtime loaders while maintaining consistent styling across frameworks.

Problem

Frontend projects struggle to include icons from diverse sets without adding many dependencies, runtime loaders, or inconsistent SVG code.

Outcome

Relaxicons replaces bulky icon packages and runtime loaders with lightweight, framework‑native component files, improving bundle size, consistency, and developer experience.

Workflow

• Install Relaxicons CLI globally with npm
• Run relaxicons init to detect framework and create config
• Use relaxicons add <icon-id> to generate component files
• Import and use generated components like any other component

Evidence

Relaxicons is a Node.js CLI that pulls any icon from the Iconify catalogue (200+ open‑source icon sets) and writes it into your project as a real component for React, Next.js (RSC), Vue, Angular, Svelte, Solid, Laravel Blade or Web Components.

Source

Install the CLI globally (Node 18+): npm install -g relaxicons relaxicons --version # 1.1.2

Source

relaxicons init # ✔ Detected: Next.js # ? Confirm framework › Next.js # ? Where do you want to save icons? › components/ui/icons # ? Do you use TypeScript? › yes # ✔ Created relaxicons.config.json

Source