04 - Iconography

A small twist, applied everywhere.

Phosphor Light is the geometric backbone. The Pitvolt twist is two marks: a clay-red corner notch on the top-right, and a yellow voltage spark at the lower-left. Both apply via CSS, so the icon family scales without per-icon redrawing.

Base family
Phosphor Light
Geometric skeleton, ~1.5 stroke. Pairs with Bricolage / Pally architecture.
Twist
Notch + spark
Clay-red corner cut + yellow voltage dot. Applied via wrapper, not per-icon.
Delivery
<PvIcon name="plug" />
One component, one prop. react-icons dependency only.

Anatomy

What every icon is composed of, top to bottom.

  • Glyph
    Phosphor Light. Inherits currentColor from text. Stroke 1.25.
  • Notch - top right
    22% triangle cut from the corner, filled with --accent-secondary.
  • Spark - lower left
    14% dot, --accent-primary with a soft glow. The voltage signal.

Sizes

Notch and spark scale up at small sizes so the brand reads at 14px. They scale down at large sizes so the glyph stays the hero.

The library

First pass: 26 icons, grouped by use. Add to PvIcon.jsx's registry to extend.

Variants

Outline is default. Filled for active/selected. Tones for status. plain drops the twist when an icon needs to disappear into UI.

In context

How they actually look inside the page patterns you've already built.

Nav
Feature list (on off-white)
Status row
Inline with copy

Reserve a stall at one of our partner sites - most go live within 2 weeks of contract signing.

Have a question? Email Joojo

Usage

One component. One prop. Twist is automatic.

// 1. Install
npm i react-icons

// 2. Import once
import './icons.css';
import { PvIcon } from './PvIcon';

// 3. Use
<PvIcon name="plug" />
<PvIcon name="lightning" size="lg" />
<PvIcon name="warning" tone="warning" title="Charger offline" />
<PvIcon name="check" filled />
<PvIcon name="external-link" plain />  // no twist