Iconography

The oneSlash Design System uses Lucide React for all icons, providing access to 1,400+ consistent, high-quality SVG icons optimized for performance and accessibility.

Library: Lucide React v0.553.0

Bundle Size: ~1 KB per icon

License: ISC (permissive)

Browse Icons: lucide.dev/icons

Why Lucide?

  • 1,400+ Icons: Comprehensive icon set covering all common use cases
  • Lightweight: 54% smaller than previous library (~1 KB vs ~2.2 KB per icon)
  • Consistent Design: All icons share the same visual language and stroke width
  • Tree-shakeable: Only bundle the icons you actually use
  • TypeScript Support: Full type definitions included

Icon Sizes

The design system uses three standard icon sizes:

Small

16px (size-4)

Compact UIs, inline text

Medium

20px (size-5)

Default size

Large

24px (size-6)

Emphasized actions

Using Icons in Components

Icons are integrated into multiple components throughout the design system. Here are common examples:

IconButton

<IconButton
  iconName="X"
  color="primary"
  size="medium"
  state="enabled"
  onClick={handleClose}
/>

Button with Icons

<Button
  label="Save Changes"
  decoIcon="CheckCircle"        // Left icon
  actionIcon="ChevronDown"      // Right icon
  type="primary"
  size="medium"
  state="enabled"
  onClickButton={handleSave}
  onClickActionIcon={handleDropdown}
/>

MenuItem with Icons

<MenuItem
  label="Settings"
  iconName="Settings"          // Left icon
  iconRight="ChevronRight"     // Right icon
  onClick={handleNavigate}
/>

Tab with Icons

<Tab
  label="Dashboard"
  decoIcon="Home"               // Left icon
  actionIcon="X"                // Right icon
  isSelected={isActive}
  onClickTab={handleSelect}
  onClickActionIcon={handleClose}
/>

Tag with Icon

<Tag
  variant="contained"
  size="medium"
  label="Active"
  iconName="CheckCircle"
  state="enabled"
/>

Select with Icon

const options = [
  { value: '1', label: 'Option 1', iconName: 'Home' },
  { value: '2', label: 'Option 2', iconName: 'Settings' },
];

<Select
  options={options}
  value={selectedValue}
  onChange={handleChange}
  decoIconName="Search"        // Icon in select trigger
/>

Popular Icons

Here are the most commonly used icons in the design system:

Actions

X

Close, dismiss, remove

Check

Confirm, complete, success

Plus

Add, create, expand

Minus

Remove, decrease, collapse

Trash2

Delete, remove permanently

Pencil

Edit, modify

Copy

Duplicate, copy to clipboard

Download

Download files

Upload

Upload files

RefreshCw

Refresh, reload

Navigation

ChevronDown

Expand, dropdown

ChevronUp

Collapse, scroll up

ChevronLeft

Previous, back

ChevronRight

Next, forward

ArrowLeft

Go back

ArrowRight

Go forward

Home

Home navigation

Menu

Menu, hamburger

Status & Feedback

AlertCircle

Error, alert, warning

AlertTriangle

Warning, caution

Info

Information, help

CheckCircle

Success, completed

XCircle

Error, failed

HelpCircle

Help, tooltip

Communication

Mail

Email, messages

MessageCircle

Chat, comments

Phone

Phone, call

Bell

Notifications

Send

Send message

User & Account

User

User profile

UserCircle

User avatar

Users

Group, team

Settings

Settings, configuration

Lock

Secure, private

Unlock

Unlocked, public

Content

Search

Search functionality

Filter

Filter, refine

File

Generic file

FileText

Document, text file

Folder

Folder, directory

Image

Image, photo

Calendar

Date, calendar

Clock

Time, timestamp

Icon Naming Conventions

Lucide uses PascalCase naming without an "Icon" suffix:

Correct

CheckCircle

AlertTriangle

X

Settings

Incorrect

check-circle (kebab-case)

CheckCircleIcon (has "Icon" suffix)

checkCircle (camelCase)

Design Guidelines

Stroke Width

All icons use strokeWidth={2} for visual consistency. This is automatically applied by components.

Color

Icons inherit text color by default and respect light/dark mode.

Spacing

Gap between icon and text: 8px (space-2)
Icon button padding: Based on size (4px or 8px)

Accessibility

Icon-only buttons must have accessible labels:

// Good - has accessible label
<IconButton
  iconName="X"
  onClick={handleClose}
  aria-label="Close dialog"
/>

Components with Built-in Icons

Some components include icons automatically - no icon props needed:

Alert

Alert icons are automatically selected based on type:

<Alert type="success" message="Saved!" />  // Uses CheckCircle
<Alert type="error" message="Failed" />    // Uses AlertCircle
<Alert type="warning" message="Warning" /> // Uses AlertTriangle
<Alert type="info" message="Info" />       // Uses Info

EmptyBox

Empty state component includes a default icon:

<EmptyBox text="No items found" size="large" />  // Uses AlertCircle

Select

Dropdown chevron is included automatically:

<Select options={options} value={value} />  // ChevronDown included

Best Practices

Do

  • Use semantic icon names that match their purpose
  • Keep icons consistent in size within the same context
  • Use icon components provided by the design system
  • Provide accessible labels for icon-only buttons
  • Test icons in both light and dark modes

Don't

  • Mix different icon sizes in the same component group
  • Use icons without considering accessibility
  • Override icon stroke width (breaks consistency)
  • Use icons for decoration only
  • Rely solely on color to convey meaning

Resources