Design Elements / Iconography
Auto-style an icon ↓

Design Elements · Iconography

Iconography

Our icons are flat, multi-tone illustrations built from the brand's blue-and-teal family — friendly volumes, soft corners, never technical-spec-sheet sharp. Every icon, wherever it came from, is normalized to one 4-tone ramp called Airy. One ramp, one deterministic rule, applied to every icon. This page shows the look first, then the ramp, the rule, the library, and a tool that does the recoloring for you.

01

The icons at a glance

Before the ramp and the rule — this is the look and the range. Flat, multi-tone illustrations on the Airy ramp, with friendly volumes and soft corners, drawn for the subjects our work is actually about: the relationship, security, the cloud, the people, and the outcomes. Pick the brand set and stay in it — this is what it should feel like.

02

The Airy ramp

Airy icon ramp

The only icon ramp. Deep and Teal are core brand colors; Mid and Light are tints on the same hue axes. Click any value to copy.

--ps-icon-deep#257CA8
--ps-icon-mid#3B9DCE
--ps-icon-teal#40CAC3
--ps-icon-light#93F6F1

Why these four. Deep = Trust Blue, Teal = Innovation Teal — the two core brand colors verbatim. Mid is a tint of Deep; Light a bright tint of Teal. Everything stays on the brand's two hue axes, so icons never drift into an off-brand blue.

03

The normalization rule

Don't eyeball it icon-by-icon. Every icon — from any source — runs through one deterministic rule that maps its existing colors onto the Airy ramp by brightness. Same input, same output, every time. Re-runnable on a whole folder.

  1. Collect the colors

    Gather every fill, stroke and stop-color in the SVG — including inside <style> blocks and gradients. Dedupe, case-insensitive.

  2. Sort dark → light

    Order the distinct colors by WCAG relative luminance, not a naive average. This keeps a source teal on the teal slot and a source sky-blue on the mid slot.

  3. Map onto the ramp

    Distribute the sorted colors across Deep · Mid · Teal · Light by rank. A single-tone icon takes Deep (Trust Blue).

  4. Strip the source's fingerprints

    Delete the orphaned class="…svgShape" editor classes the vendor left behind, so the file is self-describing and carries no trace of where it came from.

The mapping, exactly

position i of n → ramp[ round( i / (n−1) × 3 ) ]

index 0 Deep #257CA8
index 1 Mid #3B9DCE
index 2 Teal #40CAC3
index 3 Light #93F6F1

So a 2-tone icon lands on Deep + Light, a 3-tone on Deep + Teal + Light, a full 4-tone on all four. The tool below runs exactly this.

Proof — genuine raw → brand pairs from the repo

04

The library

The full set, synced from the psky-design-systems repo and normalized to Airy on pull. Search by name or what it means, flip the preview to a dark ground, and copy or download any icon as a clean SVG.

Library store

UI chrome & special cases

Not illustrative — so not run through the ramp. Plus and Close are single-tone Trust Blue glyphs for toolbars; the Liberty Bell is monochrome and meant to be recolored with CSS fill.

05

Using them well

Do

  • Normalize every icon to Airy before it ships — run it through the tool below or the rule above.
  • Use them at illustration scale — 24 / 32 / 48 / 64. They hold up large, in feature tiles and section headers.
  • Keep them on white or navy grounds with room to breathe.
  • Pick the brand set and stay in it for a whole artifact.

Don't

  • Don't reintroduce the retired ramp — no #2590C3 / #67C0EA / #87F5ED. It no longer exists.
  • Don't mix these multi-tone icons with line icons, emoji, 3D, or photo-real in the same piece.
  • Don't lean on them at 16px UI scale — the tones muddy. Use a CSS-drawn glyph there.
  • Don't recolor a multi-tone icon by hand — the ramp is the rule, not a suggestion.
06

What makes a good SVG

Before you drop an icon into the auto-styler — or hand one to a design tool — it has to be the right kind of file. A good icon is a multi-tone vector: real fill colors the rule can remap onto Airy, a viewBox so it scales, and nothing active or external baked in. A bad one is a single-color line icon with no fills to recolor, or it carries scripts, embedded bitmaps, or a missing viewBox — the things that quietly break when a renderer ingests them. Here's the same idea drawn both ways.

The format that travels. The auto-styler below outputs exactly this safe shape every time — it strips scripts, inline handlers, and external links, guarantees a viewBox, and recolors onto Airy. A clean static SVG drops into a design canvas, a slide, or a doc without surprises. A line icon with no fills will still paste — it just won't go on-brand, so the styler won't let you save it to the library.

07

The Airy auto-styler

Found an icon you like anywhere? Drop the SVG or paste its markup — this applies the rule above instantly: remaps every color onto Airy, strips the source's leftover classes, and hands you a clean, on-brand SVG to copy or download. Runs entirely in your browser.

Drop in any SVG

Click to choose or drop an .svg file

— or paste the markup below —

Try one: Security lock Quote Check Growth

Result

Your normalized icon and its color mapping will appear here. Nothing leaves your browser — the recoloring runs locally.


        

        
The honest limits. This styles any SVG you give it — paste from an icon site, drop a file, or load one of the examples. It can't browse the web from inside this page to fetch icons for you, and a raster (PNG/JPG) icon has no colors to remap. The workflow that always works: find an icon anywhere, grab its SVG, drop it here, get it Airy-styled. For the search box, that's the in-house library above — your own normalized set.