Icons

The icon system provides clear, consistent visual communication that transcends language barriers. Each icon is designed for optimal recognition at small sizes while maintaining semantic meaning and accessibility standards.

Principles

Design Principles

Universal Recognition: Icons use familiar metaphors and conventions
Scalable Design: Clear and legible from 16px to 48px sizes
Consistent Style: Unified stroke width, corner radius, and visual weight
Semantic Clarity: Each icon has a clear, single meaning

Accessibility Standards

Text Alternatives: All icons include descriptive alt text or labels
Color Independence: Icons work in monochrome and high contrast modes
Touch Targets: Interactive icons meet 44px minimum touch size
Screen Reader Support: Proper ARIA labels and semantic markup

Current Icon Library

Navigation & Interface Icons

Explore

Discovery and browsing

Gift

Rewards and benefits

Shop

Commerce and purchasing

Account

User profile and settings

Sign In

Authentication and login

Search

Finding and filtering content

Settings

Configuration and preferences

Language

Internationalization

Refresh

Updating and reloading content

Icon Sizes & Usage

Size Guidelines

16px

Inline with text, small UI elements

20px

Form inputs, compact interfaces

24px

Standard UI icons, navigation

32px

Prominent actions, headers

48px

Feature highlights, empty states

Implementation Examples

Button with Icon

Navigation Item

Account Settings

Input Field

Icon States & Interactions

Default

Standard appearance

Hover

Interactive feedback

Active

Selected or pressed

Disabled

Unavailable action

Usage Guidelines

Best Practices

Always provide alternative text for screen readers
Use consistent icon sizes within the same context
Pair icons with text labels when meaning might be unclear
Maintain adequate contrast against backgrounds
Test icon recognition with users from different cultures
Use semantic HTML elements (button, link) for interactive icons

Common Mistakes

Using decorative icons without proper alt attributes
Relying solely on icons without text labels
Inconsistent icon styles within the same interface
Icons that are too small to be easily recognizable
Using complex icons that don't scale well
Cultural assumptions about icon meanings

Implementation

Code Examples

<!-- Decorative Icon -->
<Image
  src="/icons/search.svg"
  alt=""
  width={24}
  height={24}
  className="icon icon--24"
/>

<!-- Interactive Icon -->
<button className="btn-primary" style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}>
  <Image
    src="/icons/search.svg"
    alt="Search"
    width={20}
    height={20}
    className="icon icon--20"
  />
  <span>Search</span>
</button>

<!-- Icon with Text -->
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
  <Image
    src="/icons/account.svg"
    alt=""
    width={20}
    height={20}
    className="icon icon--20"
  />
  <span>Profile</span>
</div>

Accessibility Implementation

Use empty alt="" for decorative icons
Provide descriptive alt text for meaningful icons
Include aria-label for icon-only buttons
Use role="img" for complex icon combinations
Ensure icons work in high contrast mode
Test with screen readers regularly