Iconography

Philosophy & Purpose

Icons are the most concise form of communication in our interface—a universal shorthand that transcends language. In Play+, icons aren't decoration; they're high-performance, personality-infused micro-elements that accelerate recognition, reduce visual noise, and support faster decisions.

This guide defines how we apply iconography across Play+, ensuring it resonates with our Intuitive, Distinct, and Inclusive pillars. Our iconography is shaped by the principles of clarity, consistency, and brand tone.

Icons follow our Fluid soul—soft corners, clean lines, and a modern, approachable geometry that feels tactile and human. Used well, they inject clarity, rhythm, and elegance into even the most compact interactions.

Core Icon Principles

Principle	Design Guideline	Developer Implementation
Clear	Each icon must be immediately understandable using universal metaphors.	Use established metaphors (e.g., trash for delete, magnifier for search).
Consistent	Icons must share visual traits: stroke width, detail level, and corner rounding.	Use the official Play+ Lucide set. Do not mix icons from different libraries.
Crisp	Icons must render sharply on all screens and sizes.	Use only SVGs; design on a 24x24px grid to prevent anti-aliasing blur.
Purposeful	Icons should guide action or clarify context—not add visual noise.	Avoid icons that replace critical text unless meaning is universal.
Accessible	Icons must be usable by all. Screen readers must interpret them meaningfully.	Include aria-label or visible labels. Maintain WCAG-compliant contrast.

The Icon System: Lucide

Play+ uses the Lucide icon library—a modern, open-source system with elegant line icons designed for clarity and adaptability.

• Visual Style: Line icons with 1.5px stroke and a 24x24 grid system.
• Aesthetic Fit: Rounded corners, balanced geometry, and a subtle playfulness align with Play+'s Fluid soul and soft contours.
• Consistency: All icons maintain a shared visual DNA to ensure brand continuity.

Application & System

Sizing Tokens

Token	Size	Use Case
$icon-size-sm	16px	Inside compact components: chips, tags, footnotes
$icon-size-md	20px	Default size for most use cases
$icon-size-lg	24px	Buttons, list items, and cards
$icon-size-xl	32px	Large actions, empty states, dashboards

Color System

• Default: Inherit text color from the parent container (usually $color-text-primary or -secondary).
• Interactive: Use action tokens like $color-primary-hover.
• Functional: Use system feedback colors (e.g., $color-feedback-error).

Styling & States

• Line Style: Default usage for a clean and neutral presence.
• Filled Style: Reserved for active, selected, or emphasized states. Never mix filled and line styles without semantic reason.

Best Practices for Choosing an Icon

• Use universal metaphors: e.g., magnifier = search, bell = notifications.
• Be specific, not generic: "Add document" deserves a doc+ icon, not a lone plus.
• Test for clarity: Ask a teammate what the icon means—if unsure, rethink it.
• Label it when in doubt: Never rely on an icon alone unless it's near-universal (X for close).
• Don't overuse: If an icon doesn't improve speed or comprehension, remove it.

Governance: Icon Contribution & Review

To keep our icon system high-quality and future-proof, we follow a structured process for all new additions:

1. Proposal
   Submit a use case with reasoning and existing alternatives explored.

2. Design & Review
   Icon is created on a 24x24 grid with a 1.5px stroke, soft corners, and visual balance. Reviewed by the Play+ DesignOps team.

3. QA & Accessibility Check
   Check rendering across sizes, dark/light mode, and accessibility contrast.

4. Implementation
   Icon added to Figma and codebase (e.g., <Icon name="..." /> component).

5. Documentation
   Each icon is documented with purpose, tags, and component usage guidelines.

Guardrails

✅ Do

• Use icons from the Play+-approved Lucide set.
• Pair icons with labels or aria-label for accessibility.
• Use filled icons to indicate selected or toggled states.
• Maintain consistent stroke weight and color inheritance.

❌ Don't

• Import icons from random libraries or PNGs.
• Use icons alone when meaning isn't obvious.
• Hardcode colors outside token system.
• Mix line and filled styles arbitrarily.