Iconography

Convert uses Phosphor Icons, a single, consistent line-icon set, for UI affordances and decorative watermarks.

Icon set

We use Phosphor at its regular weight, loaded directly from the CDN. One weight, one set, no mixing in other icon libraries. Reference glyphs by their ph ph-* class.

<link rel="stylesheet" href="https://unpkg.com/@phosphor-icons/web@2/src/regular/style.css">

<i class="ph ph-lightning"></i>

Icon chip

The canonical pairing for an emphasised icon is a rounded --color-violet-100 tile with a --color-violet-700 glyph and --radius-md corners. Use it to anchor feature rows, list items and card headers.

<span class="fnd-icon-chip">
  <i class="ph ph-lightning" aria-hidden="true"></i>
</span>

Watermark treatment

Our signature device: an oversized glyph set at var(--icon-watermark-opacity) that bleeds off a card corner. It adds depth and personality without competing with the content, always decorative, always aria-hidden.

Lift that compounds

Every winning test carries forward into the next. The watermark sits behind the words, never on top of them.

<div class="fnd-watermark" style="padding:28px;
  background:var(--color-surface-cream);
  border:1px solid var(--color-border-cream);
  border-radius:var(--radius-lg);">
  <h3>Lift that compounds</h3>
  <p>Every winning test carries forward into the next.</p>
  <i class="ph ph-chart-line" aria-hidden="true"></i>
</div>

Usage

Use Phosphor regular weight only, never mix weights or other icon sets.
Pair icon chips as a --color-violet-100 background with a --color-violet-700 glyph.
Watermarks use var(--icon-watermark-opacity), never a heavier, distracting opacity.
Always set aria-hidden="true" on decorative icons.