Foundations
Icons

Icons

Ledger UI uses two icon libraries depending on context.

Lucide React (Primary)

Used for navigation, toolbar, and general UI icons:

import { Search, Settings, Users, LayoutGrid, Bell } from 'lucide-react';
 
<Search size={16} />
<Settings size={20} />
<Users size={20} />

Lucide provides 1,500+ icons with consistent stroke-width and design language.

Ant Design Icons

Used for Ant Design component integration:

import { CheckCircleOutlined, WarningOutlined } from '@ant-design/icons';
 
<Alert type="success" icon={<CheckCircleOutlined />} message="Saved" />

Icon Sizes

ContextSizeExample
Inline text14pxBadge icons, table cell icons
Button icon16pxToolbar buttons, action buttons
Navigation20pxSidebar menu, header toolbar
Feature icon24pxEmpty states, feature cards

MetronicLayout Icons

The MetronicLayout sidebar renders menu icons automatically from the menu configuration. Icon names are passed as strings:

const menu = [
  { title: 'Dashboard', path: '/', icon: 'LayoutGrid' },
  { title: 'Users', path: '/users', icon: 'Users' },
];

Guidelines

  • Use Lucide for UI icons (consistent stroke weight)
  • Use Ant Design Icons only when required by Ant Design components
  • Default icon size is 16px for actions, 20px for navigation
  • Icons should always have accessible labels (aria-label or adjacent text)
  • Use strokeWidth={1.5} for Lucide icons in body text
GridTheming