docs Getting Started

Getting Started

Install

npm install -g relaxicons

Install your app framework if needed:

# React / Next.js
npm i react react-dom
npm i next   # optional, for Next.js

# Vue
npm i vue

# Angular
npm i @angular/core

# Svelte
npm i svelte

# Solid
npm i solid-js

# Web Components
# no extra install required

Initialize Config

Run the init command to create relaxicons.config.json.

relaxicons init

You’ll be prompted for:

Framework (auto-detected suggestions)
Output directory for generated components
TypeScript preference

Resulting minimal config:

{
  "framework": "react",
  "outDir": "src/components/icons",
  "typescript": true
}

Add Your First Icon

relaxicons add lucide:home

This will:

Fetch raw SVG from Iconify.
Transform attributes (remove width/height, set fill/stroke to currentColor).
Generate a React component file (e.g. HomeIcon.tsx).
Append export to barrel index.

Listing & Suggestions

List icons in a collection and narrow with a filter:

relaxicons icons lucide --filter home
relaxicons collections --filter luc

If you mistype an icon name, Relaxicons shows close suggestions.

Dive into the CLI Reference or explore the Icon Explorer.