Icons Style Guide

Overview

The VUER UI Kit utilizes Lucide icons as its foundational icon system, providing a "comprehensive collection of beautifully crafted, customizable icons that maintain consistency" across applications.

Icon Sizing Guidelines

Size	Use Case	Description
16px	Dense interfaces	Compact layout icons
20px	Default UI	Standard element sizing
24px	Buttons/Actions	Primary action buttons
32px	Emphasis	Large touch target icons

Color Application

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)

Implementation Guidelines

Best Practices:

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

Stroke Width Options

Width	Usage
1.5	Default
1	Light
2	Bold

Code Examples

Standard Usage:

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

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

Custom Styling:

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

Accessibility

Always provide descriptive labels for icon-only buttons:

<button aria-label="Delete item">
  <Trash size={20} />
</button>

Hide purely decorative icons from screen readers using aria-hidden="true".

Responsive Implementation

Adjust sizes based on viewport dimensions for optimal display across devices.

1.7 KiB Raw Blame History