ZipZy Icons

Lightweight, customizable React icon library for ZipZy products.

🚀 Installation

npm install zipzy-icons

📦 Usage

import { ZipZyLogo, ZipZyMark } from "zipzy-icons";

export default function App() {
  return (
    <div className="flex items-center gap-2">
      <ZipZyMark className="h-8 w-8 text-orange-500" />
      <ZipZyLogo className="h-10 text-orange-500" />
    </div>
  );
}

🎨 Customization

All icons support standard SVG props:

<ZipZyLogo size={40} />
<ZipZyLogo className="h-8 text-blue-500" />
<ZipZyLogo style={{ color: "red", width: 60 }} />

🎯 Multi-color Support (Product Icons)

Product icons like ZipZyHrms support independent color control:

import { ZipZyHrms } from "zipzy-icons";

export default function App() {
  return (
    <ZipZyHrms
      size={140}
      primaryColor="#0DBEFF"   // logo mark
      secondaryColor="#000000" // ZipZy text
      accentColor="#0DBEFF"    // HRMS text
    />
  );
}

Product icons like ZipZyPayments support independent color control:

import { ZipZyPayments } from "zipzy-icons";

export default function App() {
  return (
    <ZipZyPayments
      size={140}
      primaryColor="#1E40AF"   // logo mark
      secondaryColor="#000000" // ZipZy text
      accentColor="#1E40AF"    //Payments text
    />
  );
}

Props

| Prop | Type | Description | | ----------- | ------------------- | ---------------------------- | | size | number | string | Controls width (auto height) | | className | string | Tailwind / CSS classes | | style | React.CSSProperties | Inline styles | | ...props | SVGProps | All standard SVG attributes |

🧩 Available Icons

• ZipZyLogo → Full logo (mark + text)
• ZipZyMark → Logomark only

Products

• ZipZyHrms → HRMS product icon
• ZipZyPayments → ZipZy Payments icon

📐 Design Notes

• Uses currentColor → inherits text color
• Fully responsive
• Works with Tailwind, CSS, and inline styles
• Optimized for modern React apps

⚙️ Requirements

• React 18+

📄 License

MIT © ZipZy

💡 Why ZipZy Icons?

• Simple and lightweight
• Fully customizable
• Designed for real-world UI usage
• Built with TypeScript

🚧 Roadmap

• More icons
• Icon variants (outlined / filled)
• Auto-generated SVG pipeline