Iconify → components · viewBox 0 0 24 24

Any icon, ready for
your framework.

Relaxicons is a CLI that fetches any Iconify icon, normalizes its SVG for theming, and generates an idiomatic component — for eight frameworks, from one command.

0122401224
House.tsx
export function House() {
return <svg …/>
}
$

Install

Up and running in three commands.

Install globally, initialize a config, then add your first icon. Relaxicons detects your framework and writes the component where it belongs.

terminal 3 commands 
$ npm install -g relaxicons
$ relaxicons init
$ relaxicons add lucide:house

One command · eight targets

React
Vue
Angular
Svelte
Solid
Laravel
Web Components
Next.js

The pipeline

Fetch, transform, generate, tidy.

Four steps run on every icon you add — in order, every time.

01

Fetch from any collection

Pull any icon from Iconify's 200k+ set by prefix — lucide:house, mdi:cog, tabler:bolt. Fuzzy suggestions when you typo the name.

02

Transform for theming

Strips fixed width and height, rewrites fills and strokes to currentColor, and normalizes the viewBox so icons inherit size and color.

03

Output for your framework

One command emits idiomatic components for React, Vue, Angular, Svelte, Solid, Laravel, Web Components, and RSC-safe Next.js.

04

Keep the library tidy

Auto-formats output and updates barrel exports, so every icon stays importable from one place without manual bookkeeping.

See it work

One command in, a component out.

React

command

$ relaxicons add lucide:house
export function House(props) {
  return (
    <svg viewBox="0 0 24 24"
      fill="none" stroke="currentColor"
      strokeWidth={2} {...props}>
      <path d="M3 10.5 12 3l9 7.5M5 9…" />
    </svg>
  );
}

Start on the grid

Your first component is one command away.

Get started CLI reference