Iconography v1.0

brand.3cosystem.net/icons

Icons that speak the same language

Every icon in 3cosystem reinforces meaning across surfaces — from M3ET to CURR3NCY. Built on Lucide React, the icon system delivers consistent stroke weight, optical sizing, and semantic clarity at every scale.

Lucide React

Icon library

1.75px

Default stroke weight

20px

Default size

Surface icons

Icon Library

Surface icons

Each surface has a dedicated Lucide icon rendered at its brand colour. Default props: size{20} strokeWidth{1.75}

Lucide React

Install via npm i lucide-react. Import icons individually: import { Sparkles } from 'lucide-react'

M3ET

Sparkles

Connection and serendipity

N3TWORK

Network

Distributed identity graph

SP3AK EASY

BookOpen

Narrative and storytelling

SUCC3SS

Heart

Community care

M3SH

Hexagon

Ecosystem shape

R3CHARGE

Battery

Energy restoration

T3ACH

GraduationCap

Learning milestones

EL3VATE

TrendingUp

Upward growth

MARK3T

ShoppingBag

Cooperative commerce

CURR3NCY

Coins

Value and exchange

Sizing Grid

Four standard sizes

Icons scale across four stops. Use the smallest size that remains legible in context; default to sm for interactive elements.

16px

20px

24px

32px

Size

Pixels

Use Case

16px

Inline with small text, badges

smDEFAULT

20px

Default — buttons, nav items, list items

24px

Card headers, section icons

32px

Feature highlights, empty states

Pairing Rules

Icons and text, together

Icons are always paired with a text label — they reinforce meaning, not replace it. Consistent gap values and colour handling ensure coherence across every surface.

Always accompany text

Icons never stand alone except in toolbars after onboarding completion.

Inline gap: 8px

Use 8px of space between icon and label when displayed side-by-side.

Stacked gap: 12px

Use 12px when the icon sits above the label in vertical layouts.

Match icon colour

Icon colour matches text colour, or uses the surface primary for emphasis.

44×44px touch targets

Interactive icons must meet minimum touch target size — add padding if needed.

Visual examples

Inline · 16px · gap 8px

M3ET surface activity

Inline · 20px · gap 8px (default)

EL3VATE

Card header · 24px · gap 8px

N3TWORK

Stacked · 32px · gap 12px

T3ACH

Do / Don't

Rules for consistent usage

These constraints keep the icon system coherent as the product grows across surfaces, teams, and time.

Use Lucide consistently — never mix icon libraries

Always pair icons with text labels

Match icon colour to text or surface primary

Maintain 44×44px touch targets on interactive icons

Don't

Use icons without labels in primary navigation

Mix Lucide with other icon sets (Heroicons, Feather, etc.)

Use icons smaller than 16px

Use filled icons — Lucide is stroke-based

Visual comparison

CORRECT

INCORRECT — no labels

Navigation icons without labels fail accessibility and discoverability requirements.

Custom Icons

Only one custom icon

The hexagon mark is the sole custom icon in 3cosystem. Everything else comes from Lucide. Proposals for new custom icons must clear a strict set of criteria before design lead approval.

16px

20px

24px

32px

48px

HexagonMark

The only custom icon in the system. Used as the brand mark in the top-left of every surface and doc page.

Requirements for proposing a new custom icon

Must match Lucide's stroke weight (1.75px)

Must work at 20px default size without detail loss

Must be outlined, not filled — no fill shapes

Must be impossible to express with any existing Lucide icon

Must be approved by design lead before use in production

Icon in Context

Real usage patterns

See how icons behave across common 3cosystem UI patterns — buttons, navigation, empty states, and badges.

Button · icon + label

Navigation · icon + label

Empty state · large icon

No community yet

Start building your SUCC3SS network by connecting with members.

Badge · small icon + text

M3ET

T3ACH

R3CHARGE

EL3VATE

M3SH

Status badges

Active

Featured

Charging