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

$3

``bash

Using npm

npm install @iconicapp/iconic-react

Using yarn

yarn add @iconicapp/iconic-react

Using pnpm

pnpm add @iconicapp/iconic-react

`

$3

Sync to get free icons
`bash
npx iconic-react-sync
`

$3

Configure license key for pro icons

`bash
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.




$3

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


`bash
npx iconic-react-sync
`

Quick Start

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

function App() {
return (



);
}
`

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

$3

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