Icons

The VUER UI Kit uses Lucide icons as the foundation for our icon system. Lucide provides a comprehensive collection of beautifully crafted, customizable icons that maintain consistency across all applications.

Icon Sizing Guidelines

Size	Use Case	Description
16px	Dense interfaces	Small icons for compact layouts
20px	Default UI	Standard size for most elements
24px	Buttons/Actions	Primary action buttons
32px	Emphasis	Large icons for touch targets

Color Type	Usage	Application
Current Color	Default	Inherits parent text color
Gray Scale	Secondary	Disabled states and subtle elements
Accent Colors	Emphasis	Actions and highlights (use sparingly)

Guidelines:

Maintain consistent sizing within interface sections
Scale proportionally when resizing
Ensure minimum 44px touch targets for mobile

Icon Library

Below is the complete collection of icons available in the VUER UI Kit, organized in a table format for easy reference. The table shows all available icons with their names and categories. You can hover over rows to highlight them, and the table is responsive for different screen sizes.

Loading icons...

Implementation Guidelines

Stroke Width	Usage
`1.5`	Default
`1`	Light
`2`	Bold

Ge's Notes

Add text labels for actions
Don't mix different icon styles
Monitor bundle size, minimize dependencies.

Using Icons in Components

import { ChevronUp, Plus, Search } from 'lucide-react';

// Standard usage
<ChevronUp size={24} strokeWidth={1.5} />

// With custom styling
<Plus 
  size={20} 
  strokeWidth={2}
  className="text-blue-500 hover:text-blue-700"
/>

Accessibility Best Practices

// Always provide descriptive text or aria-labels
<button aria-label="Delete item">
  <Trash size={20} />
</button>

// For decorative icons, hide from screen readers
<Search size={16} aria-hidden="true" />

Responsive Icon Usage

// Adjust icon sizes for different screen sizes
<ChevronRight 
  size={window.innerWidth < 768 ? 16 : 24}
  strokeWidth={1.5}
/>