Iconography

Strict distinction between functional icons and brand icons.

Lucide React

Recommended

For: Menus, settings, users, files, arrows, etc. Style: Unified stroke style, industrial precision.

home

settings

user

file

chevron

bell

calendar

React Icons (Fa/Si)

Restricted

Only for: Third-party brand logos (GitHub, Google, WeChat). Forbidden: Do not use for regular UI icons.

FaGithub

FaGoogle

WeChat

FaMicrosoft

FaApple

FaDiscord

FaTwitter

FaFacebook

Sizes & Scale

Unified icon size ladder for clear hierarchy.

Small

w-4 h-4 (16px)

Default

w-5 h-5 (20px)

Large

w-6 h-6 (24px)

Extra Large

w-8 h-8 (32px)

Implementation

Standard pattern for using icons in React components.

tsx

import { Home, Settings, User } from 'lucide-react';

export function MyComponent() {
  return (
    <div className="flex gap-2">
      <Home className="w-5 h-5" />     {/* Default 20px */}
      <Settings className="w-4 h-4" /> {/* Small 16px */}
    </div>
  );
}