← Back to system
Seed 03 · Primitive

Icons

Lucide is the icon system. Small, restrained, always accent-coloured. Used inside tags and cards to add signal, never decoration.

Principles

How icons should feel

Type carries the meaning. Icons amplify it when they add real signal — a status, an action, a concept the words alone don't convey. If a label reads cleanly without the icon, leave it off.

Size

Small by default

14–16px in body contexts. They should sit at the type's x-height, not compete with it. Reach for 20–28px only when the icon is the focal point of a card.

Color

Always accent

Forest green on light surfaces, teal on dark, automatically via var(--ps-accent). Never raw hex. Never a second colour competing with the text.

Weight

Lightened from default

Lucide ships at stroke-width: 2. The system overrides to 1.75 so icons sit beside Inter without feeling chunky.

Restraint

Sparingly

One icon per element, max. Don't pepper a paragraph with icons. Don't put an icon on every bullet. Quiet support, not decoration.

Sizes

Scale tokens

Set --ps-icon-size directly or use the .ps-icon-sm / -lg / -xl modifiers.

.ps-icon-sm · 14
default · 16
.ps-icon-lg · 20
.ps-icon-xl · 28
The set

Icons we reach for

Lucide has thousands. These are the ones that come up repeatedly in PocketSeed contexts — credentials, evidence, sharing, AI, products, impact. Browse lucide.dev/icons for the full library.

shield-check
badge-check
check
file-check
file-text
paperclip
users
user-check
link
external-link
qr-code
sparkles
package
leaf
sprout
trees
recycle
bar-chart-3
trending-up
info
circle-help
arrow-right
In tags

Icons inside pills

Drop a Lucide icon at the start of a pill to add a status hint. Auto-sizes against the pill's font; in accent pills it picks up the vivid tone.

.ps-pill .ps-icon
Verified Tamper-proof AI-interactive Public link 2 co-signers Vegan Recycled glass QR-ready OK
In feature cards

Replacing the numerator

For a softer entry point than 01 / 02 / 03, swap the numerator for an icon at .ps-icon-xl. Pairs naturally with the existing accent pill in the top-right.

Build trust

Credentials

Tamper-proof, digitally signed packages that back claims with evidence.

Show the work

Products

Verifiable product pages for every SKU, backed by evidence and insight.

Activate impact

Campaigns

Real-world impact attributed to real customer interactions.

In buttons

Action affordance

Icons in buttons inherit the button's text colour rather than the accent. Use a leading icon for an action (download, share) and a trailing arrow for "go forward" CTAs.

.ps-btn + .ps-icon
Get a demo
On dark

Icons on ink surfaces

Inside .ps-bg-ink the accent flips to teal automatically — icons follow.

In dark pills
Tamper-proof AI-interactive DPP-ready Plug-and-play
How to wire it up

Setup

Lucide is a tiny script. Drop the CDN tag at the end of the <body> and call lucide.createIcons() after the DOM is ready. The script walks the page and replaces every <i data-lucide="…"> with the matching SVG, keeping any classes you put on the placeholder.

<!-- end of body -->
<script src="https://unpkg.com/lucide@latest"></script>
<script>lucide.createIcons();</script>

<!-- usage -->
<span class="ps-pill ps-pill-accent">
  <i class="ps-icon" data-lucide="check"></i>
  Verified
</span>

For static / build-time contexts (decks exported as PDF, server-rendered pages, anywhere JS isn't running), copy the SVG directly from lucide.dev/icons and drop it inline with stroke="currentColor" so it still inherits --ps-accent.