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 @iconicapp/iconic-react

# Using yarn
yarn add @iconicapp/iconic-react

# Using pnpm
pnpm add @iconicapp/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

1. Icons not appearing

   • Verify icons are in the correct directory (src/components/icons/)
   • Check component naming (PascalCase with optional "Icon" suffix)
   • Ensure proper imports

2. Styling issues

   • Verify prop types and values
   • Check CSS specificity
   • Ensure SVG viewBox is correct

License

The Iconic React package is licensed under the MIT License. Pro icons require a valid license key.

Made with ❤️ by the Iconic team