Icon

Icon

Icons provide visual context and enhance user experience throughout the interface. Use them to represent actions, features, and status indicators. All icons are inline SVGs with customizable fill colors.

Visual Specifications

Property	Value
Icons Available	128 different icons
Color	Customizable
Scaling	Vector-based, infinitely scalable

Sizing

Icons have fixed dimensions defined in their SVG. Most common sizes:

• 24x32px - Standard icon size
• 32x32px - Larger icons

Note: Use container styling or CSS transforms for scaling.

CSS Scaling Example:

.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 48px; height: 48px; }

Accessibility

Attribute	Usage
aria-hidden="true"	Use for decorative icons (no screen reader text)
aria-label	Add descriptive label for meaningful icons
role="img"	Explicitly decorative when needed

Best Practices:

• Use aria-hidden="true" for purely visual icons
• Provide aria-label for icons that convey meaning
• Ensure 4.5:1 contrast ratio for icon visibility
• White fill icons (e.g., wallet-white) require dark backgrounds

Filled Variants

18 icons have filled/solid versions:

Regular	Filled
cart	cart-filled
chat	chat-filled
connect	connect-filled
controller	controller-filled
coupon	coupon-filled
credit-card	credit-card-filled
credit-plus	credit-plus-filled
donation	donation-filled
home	home-filled
internet-service	internet-service-filled
location	location-filled
megaphone	megaphone-filled
music	music-filled
play	play-filled
poin	poin-filled
rocket	rocket-filled
value-plus	value-plus-filled
voice	voice-filled

Also: plane-filled (no regular variant)

Special Variants

Variant	Description	Usage Note
*-white	White fill icons	Requires dark background
*-inactive	Disabled/grayed state	Use for non-interactive elements
checklist-green	Green success indicator	Fixed green color
circle-red	Red error/warning	Fixed red color
sim-black, union-black	Black fill	For high contrast needs

Icon Catalog

Communication (13 icons)

airplane, appointment, chat, chat-filled, email, email-open, message, phone, phone-ringtone, phone-sms, phone-sparkle, sms, telegram

Social Media (6 icons)

facebook, instagram, linkedin, twitter, youtube, connection

Commerce (17 icons)

cart, cart-filled, coupon, coupon-filled, credit, credit-card, credit-card-filled, credit-plus, credit-plus-filled, donation, donation-filled, package, package-extra, shopping-bag, store, ticket, wallet, wallet-white

Navigation & Location (5 icons)

globe, globe-arrow-top-right, location, location-filled, map

Media & Entertainment (10 icons)

camera, entertainment, megaphone, megaphone-filled, music, music-filled, people-entertainment, play, play-filled, video, ringtone

Utilities & Services (8 icons)

internet, internet-service, internet-service-filled, modem, roaming, signal, sim-black, union-black

Actions (11 icons)

copy, delete, edit, filter, migration, report, save, scheduled, share, stacks-plus, cancel

Status & Indicators (14 icons)

badge-checkmark, check, checklist-green, circle-red, clock, deliver, delivered, duration, heartbeat, hourglass, info-circle, last-transaction, rating, thumb-left-up

Account & Profile (6 icons)

customer-service, family, favorite, profile, user-circle-plus, users

Finance & Business (10 icons)

automobile, bank, bill, credit-card, credit-card-filled, data, transaction, value-plus, value-plus-filled, crown

Misc (24 icons)

beauty, controller, controller-filled, dining, education, experience, fitness, help, home, home-filled, hot-offer, luckydraw, news, other, phonebook-inactive, plane-filled, plane-inactive, poin, poin-filled, rocket, rocket-filled, voice, voice-filled, voice-line, calendar, digital

Guidelines

When to use

• Add visual meaning to text labels
• Represent actions in buttons and navigation
• Indicate status (success, warning, error, info)
• Enhance visual hierarchy and scannability

Best practices

✅ Do	❌ Don’t
Use icons that semantically match their purpose	Use icons as the only means of conveying information
Ensure adequate contrast ratios for accessibility	Mix different icon styles arbitrarily
Maintain consistent sizing within a group	Overcrowd interfaces with too many icons
Pair with labels for critical actions	Use icons with complex meanings without labels
Use white icons only on dark backgrounds	Use white icons on light/white backgrounds

View in Storybook