zipzy-icons

v1.0.34

Published

4 days ago

Lightweight, customizable React SVG icon library for ZipZy products — logomarks, wordmarks, and product icons (HRMS, Payments, Dashboard) with TypeScript support and Tailwind CSS compatibility.

zipzy-icons

Lightweight, customizable React icon library for ZipZy products — logomarks, wordmarks, and product icons with full TypeScript support.

zipzy-icons is the official icon package for ZipZy products. It provides brand logos, logomarks, and product-specific icons (HRMS, Payments, Dashboard) as optimized React SVG components. Every icon supports currentColor, Tailwind CSS classes, inline styles, and standard SVG props — zero configuration needed.

Installation

npm install zipzy-icons

yarn add zipzy-icons

pnpm add zipzy-icons

Quick Start

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

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

      {/* Full stacked logo */}
      <ZipZyLogo className="h-10 text-orange-500" />

      {/* Horizontal layout */}
      <ZipZyLogoHorizontal className="h-10 text-orange-500" />
    </div>
  );
}

Available Icons

Brand (Standalone)

| Component | Description | Color pattern | |-----------|-------------|---------------| | ZipZyMark | Logomark only — no text | currentColor | | ZipZyLogo | Stacked: mark + wordmark | currentColor | | ZipZyLogoHorizontal | Horizontal: mark + wordmark | currentColor |

Products

| Component | Description | Color pattern | |-----------|-------------|---------------| | ZipZyHrms | HRMS product logo | primaryColor · secondaryColor · accentColor | | ZipZyPayments | Payments product logo | primaryColor · secondaryColor | | ZipZyDashboard | Dashboard branded logo | primaryColor · secondaryColor | | ZipZyDashboardIcon | Dashboard icon (no text) | currentColor |

Usage by Context

Navbar & Header

Use ZipZyLogoHorizontal for top navigation bars. It inherits the nav text color via currentColor.

// Light navbar
<nav className="bg-white border-b px-6 py-4">
  <ZipZyLogoHorizontal className="h-8 text-gray-900" />
</nav>

// Dark navbar
<nav className="bg-gray-900 px-6 py-4">
  <ZipZyLogoHorizontal className="h-8 text-white" />
</nav>

// Brand color
<nav>
  <ZipZyLogoHorizontal className="h-8 text-orange-500" />
</nav>

Favicon & App Icon

Use ZipZyMark when space is constrained — tab icons, breadcrumbs, avatar placeholders.

// Browser tab / favicon context
<ZipZyMark className="h-8 w-8 text-orange-500" />

// Small inline icon
<ZipZyMark size={16} className="text-orange-500" />

// Larger app icon
<ZipZyMark size={48} className="text-orange-500" />

Splash & Loading Screen

Center ZipZyLogo vertically for splash screens and initial load states.

<div className="flex flex-col items-center justify-center min-h-screen gap-4">
  <ZipZyLogo size={72} className="text-orange-500" />
  <p className="text-sm text-gray-400 animate-pulse">Loading...</p>
</div>

Dark Backgrounds

All standalone icons use currentColor — switching to dark themes requires only a color class change.

// Dark sidebar / panel
<aside className="bg-gray-950 p-4">
  <ZipZyLogoHorizontal className="h-7 text-white" />
</aside>

// Colored brand on dark
<header className="bg-gray-900">
  <ZipZyLogoHorizontal className="h-8 text-orange-400" />
</header>

// Collapsed sidebar (mark only)
<aside className="w-16 bg-gray-950 flex flex-col items-center pt-4">
  <ZipZyMark size={28} className="text-orange-400" />
</aside>

Product Pages (HRMS)

ZipZyHrms has three independent color slots: logomark, "ZipZy" text, and "HRMS" accent text.

import { ZipZyHrms } from "zipzy-icons";

// Hero / landing page — light
<ZipZyHrms
  size={140}
  primaryColor="#0DBEFF"   // logomark
  secondaryColor="#000000" // "ZipZy" text
  accentColor="#0DBEFF"    // "HRMS" text
/>

// Login screen header — dark theme
<ZipZyHrms
  size={120}
  primaryColor="#0DBEFF"
  secondaryColor="#ffffff"
  accentColor="#0DBEFF"
/>

// Compact — product card
<ZipZyHrms
  size={64}
  primaryColor="#0DBEFF"
  secondaryColor="#374151"
  accentColor="#0DBEFF"
/>

Product Pages (Dashboard)

ZipZyDashboard takes two colors: the logomark and the combined wordmark.

import { ZipZyDashboard, ZipZyDashboardIcon } from "zipzy-icons";

// Branded login header
<ZipZyDashboard
  size={140}
  primaryColor="#000000"
  secondaryColor="#000000"
/>

// Indigo-themed dashboard header
<ZipZyDashboard
  size={100}
  primaryColor="#6366f1"
  secondaryColor="#111827"
/>

// Icon-only (nav item, button, tab)
<ZipZyDashboardIcon size={20} className="text-indigo-500" />

// Icon on active nav item (white on colored bg)
<ZipZyDashboardIcon size={20} className="text-white" />

Product Pages (Payments)

import { ZipZyPayments } from "zipzy-icons";

// Payments landing hero
<ZipZyPayments
  size={140}
  primaryColor="#10b981"
  secondaryColor="#000000"
/>

// Compact card
<ZipZyPayments
  size={64}
  primaryColor="#10b981"
  secondaryColor="#374151"
/>

Product Switcher Grid

Display all ZipZy products at a consistent size for a unified product-picker UI.

import { ZipZyHrms, ZipZyPayments, ZipZyDashboard } from "zipzy-icons";

<div className="grid grid-cols-2 gap-4 p-4">
  <div className="flex flex-col items-center gap-2 p-4 rounded-xl border hover:bg-gray-50 cursor-pointer">
    <ZipZyHrms size={80} primaryColor="#0DBEFF" secondaryColor="#000" accentColor="#0DBEFF" />
    <span className="text-xs text-gray-500">HR Management</span>
  </div>

  <div className="flex flex-col items-center gap-2 p-4 rounded-xl border hover:bg-gray-50 cursor-pointer">
    <ZipZyPayments size={80} primaryColor="#10b981" secondaryColor="#000" />
    <span className="text-xs text-gray-500">Payments</span>
  </div>

  <div className="flex flex-col items-center gap-2 p-4 rounded-xl border hover:bg-gray-50 cursor-pointer">
    <ZipZyDashboard size={80} primaryColor="#6366f1" secondaryColor="#000" />
    <span className="text-xs text-gray-500">Dashboard</span>
  </div>
</div>

Sidebar Nav Items

Use ZipZyDashboardIcon (currentColor) in navigation lists — it follows your active/inactive color logic automatically.

const navItems = [
  { label: "Dashboard", icon: ZipZyDashboardIcon, href: "/dashboard" },
  // ...
];

<nav>
  {navItems.map(({ label, icon: Icon, href }) => (
    <a
      key={href}
      href={href}
      className={`flex items-center gap-3 px-4 py-2 rounded-lg transition-colors
        ${isActive(href)
          ? "bg-indigo-600 text-white"
          : "text-gray-600 hover:bg-gray-100"
        }`}
    >
      <Icon size={18} />
      <span className="text-sm font-medium">{label}</span>
    </a>
  ))}
</nav>

Tab Bars

import { ZipZyDashboardIcon } from "zipzy-icons";

<div className="flex border-b">
  <button
    className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors
      ${active === "dashboard"
        ? "border-indigo-600 text-indigo-600"
        : "border-transparent text-gray-500 hover:text-gray-700"
      }`}
    onClick={() => setActive("dashboard")}
  >
    <ZipZyDashboardIcon size={16} />
    Dashboard
  </button>
</div>

Email Templates

For HTML emails, inline the SVG directly — React components don't work in email clients.

<!-- Paste the rendered SVG output inline in your email template -->
<table>
  <tr>
    <td style="padding: 24px;">
      <!-- Export ZipZyLogoHorizontal to SVG string and paste here -->
      <svg width="120" height="32" viewBox="0 0 120 32" ...>
        <!-- SVG path data -->
      </svg>
    </td>
  </tr>
</table>

Tip: Use ReactDOMServer.renderToStaticMarkup(<ZipZyLogoHorizontal />) to get the raw SVG string for email use.

Multi-color Product Icons

Product icons support per-element color control. This allows the same icon to adapt to light, dark, and branded themes without separate assets.

import { ZipZyHrms } from "zipzy-icons";

// Three slots: mark · wordmark · product accent
<ZipZyHrms
  size={140}
  primaryColor="#0DBEFF"   // logomark / mark background
  secondaryColor="#000000" // "ZipZy" wordmark text
  accentColor="#0DBEFF"    // "HRMS" product text
/>

import { ZipZyDashboard } from "zipzy-icons";

// Two slots: mark · wordmark
<ZipZyDashboard
  size={140}
  primaryColor="#000000"   // logomark
  secondaryColor="#000000" // "ZipZy Dashboard" text
/>

import { ZipZyDashboardIcon } from "zipzy-icons";

// No color props — inherits from CSS `color`
<ZipZyDashboardIcon
  size={140}
  className="text-white"
/>

Props Reference

All icons

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | number \| string | — | Sets width; height scales automatically | | className | string | — | Tailwind or CSS class string | | style | React.CSSProperties | — | Inline style object | | ...props | SVGProps<SVGSVGElement> | — | All standard SVG attributes |

Multi-color icons only (`ZipZyHrms`, `ZipZyDashboard`, `ZipZyPayments`)

| Prop | Type | Description | |------|------|-------------| | primaryColor | string | Logomark color (hex recommended) | | secondaryColor | string | "ZipZy" wordmark text color | | accentColor | string | Product label text color (HRMS only) |

Sizing Guide

| Use case | Recommended size | |----------|-----------------| | Favicon / breadcrumb | size={16} or className="h-4" | | Inline icon (button, tab) | size={18} – size={20} | | Navbar / sidebar logo | size={24} or className="h-8" | | Product switcher tile | size={48} – size={80} | | Login / auth screen header | size={80} – size={120} | | Splash / loading screen | size={64} – size={80} | | Landing page hero | size={100} – size={140} |

TypeScript

All components are fully typed. Import types directly if needed:

import type { ZipZyIconProps, ZipZyProductIconProps } from "zipzy-icons";

Design Notes

currentColor — standalone brand icons (ZipZyMark, ZipZyLogo, ZipZyLogoHorizontal, ZipZyDashboardIcon) inherit the CSS color property, making them trivial to theme with Tailwind or CSS variables.
Responsive — all icons scale cleanly at any size. Use size for fixed dimensions or className="h-X" for fluid scaling.
Tailwind compatible — works with Tailwind CSS v3 and v4.
CSS-in-JS compatible — pass any valid React.CSSProperties via style.
No external dependencies — pure SVG wrapped in React. Zero runtime overhead.
Tree-shakeable — import only the icons you use; unused icons are excluded from your bundle.

Requirements

React 18+
Node.js 16+

Roadmap

[ ] More brand and UI icons
[ ] Outlined / filled variants
[ ] Auto-generated SVG pipeline from Figma
[ ] Next.js Image-compatible exports
[ ] Vue 3 support

Repository

The source code for zipzy-icons is available on GitHub.

Repository: https://github.com/zipzy/zipzy-icons
Issues: https://github.com/zipzy/zipzy-icons/issues
Discussions: https://github.com/zipzy/zipzy-icons/discussions

Keywords

zipzy · zipzy-icons · react icons · svg icons · logo component · hrms icons · dashboard icons · payments icons · typescript icons · tailwind icons · react svg · icon library · zipzy hrms · zipzy dashboard · zipzy payments

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

zipzy-icons

Contents

Installation

Quick Start

Available Icons

Brand (Standalone)

Products

Usage by Context

Navbar & Header

Favicon & App Icon

Splash & Loading Screen

Dark Backgrounds

Product Pages (HRMS)

Product Pages (Dashboard)

Product Pages (Payments)

Product Switcher Grid

Sidebar Nav Items

Tab Bars

Email Templates

Multi-color Product Icons

Props Reference

All icons

Multi-color icons only (ZipZyHrms, ZipZyDashboard, ZipZyPayments)

Sizing Guide

TypeScript

Design Notes

Requirements

Roadmap

Repository

Keywords

License

Links

Multi-color icons only (`ZipZyHrms`, `ZipZyDashboard`, `ZipZyPayments`)