🎨 InfiniteIcons

Procedurally generated, unique SVG icons for React. The biggest icon collection ever.

🚀 Features

• ✅ Truly Infinite Icons – Generates a unique icon for any string.
• 🎨 Deterministic & Consistent – The same name always produces the same icon and color.
• 🧩 Lightweight & Zero-Dependency – Adds virtually no weight to your bundle.
• 🧱 Easy Integration – A simple React component that works anywhere.
• 🖌️ Customizable Size – Control the icon size with a simple prop.

📆 Installation

npm install infinite-icons

🔧 Usage

Import the InfiniteIcon component and provide a unique name prop. It's that simple!

Basic Example

import React from 'react';
import { InfiniteIcon } from 'infinite-icons';

function MyComponent() {
  return (
    <div>
      {/* Basic Usage */}
      <InfiniteIcon name="user-profile-avatar" />

      {/* With Custom Size */}
      <InfiniteIcon name="dashboard-metrics" size={64} />

      {/* It will generate a unique icon for any string! */}
      <InfiniteIcon name="a-very-specific-action-item" size={24} />
    </div>
  );
}

Creating an Icon Grid

Here's an example of how you can quickly generate a gallery of unique icons for a list of features, perfect for a navigation or features section.

import React from 'react';
import { InfiniteIcon } from 'infinite-icons';

const featureList = ['Dashboard', 'Analytics', 'User Settings', 'Logout', 'API-Keys', 'Notifications'];

function FeatureGrid() {
    return (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '1rem', textAlign: 'center' }}>
            {featureList.map(feature => (
                <div key={feature} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.5rem' }}>
                    <InfiniteIcon name={feature} size={48} />
                    <span>{feature}</span>
                </div>
            ))}
        </div>
    );
}

💡 How It Works

InfiniteIcons does not contain any pre-made icon files. It generates them on the fly.

1. Hashing – It converts the name prop into a unique number.
2. Color Generation – It uses this number to generate a unique, consistent HSL color.
3. Pattern Generation – The number is converted to a binary string, which maps to a 5x5 symmetrical grid, creating a unique, abstract pattern.

⚙️ API / Props

| Prop | Type | Default | Description | |-------|--------|---------|--------------------------------------| | name | string | Required | The unique identifier for your icon. | | size | number | 32 | The width and height of the icon in pixels. |

📄 License

MIT © Akash Dubey