@xpacio/icons

XPAC product marks and vendor brand logos, as React components and as raw data.

This package deliberately holds only what nobody else can draw for us. Generic UI glyphs — arrows, checks, search, gears — come from lucide and are not duplicated here. If you are looking for a chevron, install lucide-react.

npm install @xpacio/icons

Three families

Logos are XPAC's identity: the compact Xpac symbol and the custom XpacWordmark lettering. They follow currentColor and keep their native aspect ratio. Use the symbol where space is tight and the wordmark when the brand name should lead.

Marks are XPAC's own product icons — one per plugin. They share a 128×128 canvas, 8-unit strokes, and rounded caps and joins. Each has a distinct silhouette, with a neutral structure that follows currentColor and a fixed coral detail (#FF4658) that expresses its purpose. Keep those two colours separate when styling the icon. The simplified geometry reads reliably at 24px and above; 40px and above gives the details more comfortable space.

Brands are third-party service logos on a 24×24 canvas, one filled path that takes currentColor. Each carries a colour triple: the vendor's own hex, plus a light-surface and dark-surface variant walked along the same hue until it clears 3:1 contrast. A brand picks its colour for its own site, and several are illegible on one of ours untouched — Mailchimp yellow is 1.35:1 on white.

Use

import { Forms, Webhooks, Mailchimp } from '@xpacio/icons';

<Forms size={ 44 } />
<Webhooks size={ 44 } title="Webhooks" />
<Mailchimp size={ 20 } />

Every component takes size (default 44 for logos and marks, 24 for brands), an optional title, and any other SVG prop. With no title the icon is aria-hidden; with one it becomes role="img" and is announced.

For logos, size sets the height and the width scales proportionally. Numbers, numeric strings, and CSS lengths such as 2em are supported. Set the SVG width and height props explicitly when controlling both dimensions yourself.

import { Xpac, XpacWordmark } from '@xpacio/icons';

<Xpac size={ 28 } title="XPAC" />
<XpacWordmark size={ 40 } title="XPAC" />

The structure follows currentColor, so give it a neutral colour that contrasts with its surface while the semantic detail stays coral:

.plugin-card .icon { color: var(--ink); }
.plugin-card:hover .icon { color: var(--paper); }

For brands, the corrected colours are exported rather than baked in, so you keep control of your own theming:

import { brandColors } from '@xpacio/icons';

brandColors.mailchimp; // { brand: '#FFE01B', light: '#A68700', dark: '#FFE01B' }

Outside React

icons.json is the same data every other build output is generated from, and is what the PHP renderers in this monorepo read:

import icons from '@xpacio/icons/icons.json';

icons.marks.forms;  // { title, viewBox, body }
icons.logos['xpac-wordmark']; // { title, viewBox, body }, native wide canvas
icons.brands.stripe; // { title, viewBox, body, brand, light, dark, multicolor, source }

body is the inner SVG markup verbatim, so strokes, transforms and fill-rule survive. Wrap it in an <svg viewBox> of your own.

Raw files ship too, at @xpacio/icons/svg/<name>.svg.

Adding or changing an icon

Drop the SVG into src/marks/ or src/logo/ (or add an entry to src/brands.json) and run npm run build. Nothing is hand-transcribed and no path data is copied into a second file — that is the entire point of this package. Change the source, bump, publish, and every consumer moves together on its next install.

npm test renders every component and fails on an icon that draws nothing. An SVG that is merely almost right does not throw anywhere downstream; it renders an empty box, which every naive check passes.

Names

An icon's name is its plugin slug, exactly as the slug appears in URLs and in assets/packages/. multi-step-form, not forms-multi-step. Components are the PascalCase form: MultiStepForm.

Licensing

The XPAC marks are © xpac.io, released here under this package's ISC licence.

The webhook motif in webhooks is adapted from Lucide (ISC).

Brand logos are included for identification of the services XPAC integrates with. The path data comes from Simple Icons (CC0) and WordPress core (GPL), but the trademarks remain the property of their respective owners and are not covered by this package's licence. Their inclusion does not imply affiliation with or endorsement by those companies.