Icons

Provides a consistent icon system based on the Lucide Icons library. For size details, see Icon Sizes.

Lucide Icons

24px viewBox

5 size tokens

Icon Library

Click to copy icon name

Navigation

Page navigation and menu interaction

Actions

User actions and tools

Media

Media playback and controls

Status

Status and feedback display

Communication

Notifications and messaging

Users

Users and settings

Files

File and folder management

Development

Development and infrastructure

Objects

Objects and symbols

AI & ML

AI, machine learning, automation

Voice & Audio

Voice, audio, and recording

Call Center

Call center and phone support

Chat & Messaging

Chat and messaging

Analytics

SaaS analytics and dashboards

Business

Business and enterprise

Workflow

Workflow and integrations

Dashboard

Admin panels and settings

Others

Other utilities

Size Scale

5-step semantic icon size scale. See the Icon Sizes token page for details

icon-xs14px

icon-sm16px

icon-md20px

icon-lg24px

icon-xl32px

Token	Size	Usage
`icon-xs`	14px	xs/sm buttons, badges, tags
`icon-sm`	16px	default/lg buttons, form elements
`icon-md`	20px	IconButton, navigation
`icon-lg`	24px	Large icons, cards
`icon-xl`	32px	Empty states, heroes

Auto Sizing

Icons inside UI components are automatically sized. No className specification needed.

Button lg

With text

icon-sm

IconButton lg

Icon only

icon-lg

With text

leftIcon / rightIcon

icon-xs14px

icon-sm16px

Icon only

IconButton

icon-xs14px

icon-sm16px

icon-md20px

icon-lg24px

Auto sizing works for components that render SVGs directly. Wrapper elements like <span><svg>…</svg></span> will not work.