Iconography 图标规范

严格区分功能性图标与品牌图标的使用场景。

Lucide React

Recommended 推荐

用于: 菜单、设置、用户、文件、箭头等所有功能性 UI 元素。风格: 统一 Stroke 风格，工业精密感。

home

settings

user

file

chevron

bell

calendar

React Icons (Fa/Si)

Restricted 受限

仅用于: 第三方品牌 Logo (GitHub, Google, WeChat)。禁止: 严禁用于常规 UI 图标 (如不要用 FaHome)。

FaGithub

FaGoogle

WeChat

FaMicrosoft

FaApple

FaDiscord

FaTwitter

FaFacebook

尺寸与比例

统一的图标尺寸阶梯用于构建清晰的层级。

小号

w-4 h-4 (16px)

默认

w-5 h-5 (20px)

大号

w-6 h-6 (24px)

展示

w-8 h-8 (32px)

实现指南

在 React 组件中使用图标的标准模式。

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>
  );
}