@iconicapp/iconic-react NPM

Iconic React Package

Iconic brings premium, “do wtf you want with” pixel-perfect icons right into React code, making your development process seamless. With over 1,400 icons available, you can find exactly what you need for any project—whether it’s a sleek UI element or a fun emoji. We add new icons every week, so there’s always something fresh to work with.

Features

🎨 1,400+ high-quality SVG icons
⚡️ Zero runtime dependencies
📦 Tree-shakeable
🎯 TypeScript support
🎨 Customizable size, color, and stroke width
🔄 Easy icon syncing
💼 Pro icons support with license key

Installation

Step 1:

# Using npm
npm install iconic-react

# Using yarn
yarn add iconic-react

# Using pnpm
pnpm add iconic-react

Step 2:

Sync to get free icons

npx iconic-react-sync

Step 3:

Configure license key for pro icons

npx iconic-react configure --license-key YOUR_LICENSE_KEY

Note: If you don't have an Iconic Pro license key, you can get one at iconic.app or use the free icons.

Step 4 (Optional):

If you notice that you're missing icons, run the following command to update your library

npx iconic-react-sync

Quick Start

import AcornIcon from './components/icons/AcornIcon';

function App() {
  return (
    <div>
      <AcornIcon size={24} stroke="#000000" />
      <AcornIcon size={32} stroke="#FF0000" />
    </div>
  );
}

Icon Props

All icons accept the following props:

Prop	Type	Default	Description
size	number	24	Icon size in pixels
stroke	string	currentColor	Stroke color
color	string	transparent	Color

Project Structure

/your-project
  /node_modules
    /iconic-react
  /src
    /components
      /icons
        /AcornIcon.tsx
        /HeartIcon.tsx
        /index.ts

Troubleshooting

Common Issues

Icons not appearing
- Verify icons are in the correct directory (src/components/icons/)
- Check component naming (PascalCase with optional "Icon" suffix)
- Ensure proper imports
Styling issues
- Verify prop types and values
- Check CSS specificity
- Ensure SVG viewBox is correct