Iconworld

React icon components for 1246+ icons across 6 weights — tree-shakeable, TypeScript-ready, zero config.

Install

npm i iconworld

Usage

import { Home, ShieldCheck, AltArrowDown } from 'iconworld';

function App() {
  return (
    <div>
      <Home />
      <ShieldCheck size={32} color="#d97757" />
      <AltArrowDown weight="Bold" />
    </div>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | number \| string | 24 | Icon size (number = px) | | color | string | currentColor | Primary icon color | | secondaryColor | string | same as color | Duotone secondary color | | weight | IconWeight | Linear | Icon weight / style | | strokeWidth | number \| string | — | Override stroke width | | className | string | — | Additional CSS class |

Plus all standard SVG attributes.

Weights

• Linear — clean outlined style (default)
• Bold — solid filled style
• BoldDuotone — two-tone filled style
• Broken — broken line style
• LineDuotone — two-tone outlined style
• Outline — outlined with fills

import { Home } from 'iconworld';

<Home weight="Bold" />
<Home weight="BoldDuotone" color="#d97757" secondaryColor="#f472b6" />
<Home weight="Broken" strokeWidth={2} />
<Home weight="LineDuotone" />
<Home weight="Outline" />

Direct icon import (smallest bundle)

import Home from 'iconworld/icons/Home';

All SVG props are supported

<Home
  size={48}
  color="red"
  className="my-icon"
  style={{ marginRight: 8 }}
  onClick={() => console.log('clicked')}
/>

Icon Names

Icons use PascalCase names derived from their kebab-case originals:

| Original | Import | |----------|--------| | home | Home | | shield-check | ShieldCheck | | alt-arrow-down | AltArrowDown | | shopping-cart | ShoppingCart |

TypeScript

Full TypeScript support out of the box:

import { Home, IconProps, IconWeight } from 'iconworld';

const weight: IconWeight = 'BoldDuotone';
const props: IconProps = { size: 32, color: '#d97757', weight };

<Home {...props} />

License

MIT © devchauhan