图标集

YH-UI 图标集合支持 100+ 图标集，以下是常用图标集的详细介绍。

常用图标集对比

图标集	前缀	图标数量	风格特点	推荐场景
Material Design Icons	mdi	7000+	Material Design 风格	通用应用
Element Plus	ep	200+	简洁现代	后台管理系统
Lucide	lucide	1500+	线条风格	现代 Web 应用
Tabler Icons	tabler	4600+	线条/填充	仪表盘/Admin
Remix Icon	ri	2500+	线条风格	移动应用/轻量级
Heroicons	heroicons	600+	线条/填充	Tailwind 项目
Bootstrap Icons	bi	2600+	Bootstrap 风格	Bootstrap 项目
Font Awesome 6	fa	2000+	多种风格	通用

图标集详解

Material Design Icons (mdi)

最流行的开源图标库，提供 7000+ 图标。

Material Design Icons

特点：

• 图标数量最多，覆盖面广
• 风格统一，符合 Material Design 规范
• 社区活跃，持续更新

Element Plus (ep)

Element Plus 官方图标集，简洁现代。

Element Plus

特点：

• 与 Element Plus 组件风格一致
• 适合后台管理系统
• 图标数量适中

Lucide

现代简洁的线条风格图标库。

Lucide

特点：

• 线条粗细统一，视觉整洁
• 适合现代简约风格项目
• 支持自定义线条粗细

Tabler Icons

高质量 SVG 图标库，提供 4600+ 图标。

Tabler Icons

特点：

• 图标丰富多样
• 同时提供线条和填充两种风格
• 适合各类 Web 应用

Remix Icon

精心设计的图标库，风格统一。

Remix Icon

特点：

• 线条风格为主
• 图标命名规范
• 适合需要精细图标的项目

Heroicons

Tailwind CSS 官方图标库。

Heroicons

特点：

• Tailwind CSS 官方推荐
• 线条和填充两种风格可选
• 适合 Tailwind 项目

Bootstrap Icons

Bootstrap 官方图标库。

Bootstrap Icons

特点：

• Bootstrap 官方图标
• 适合 Bootstrap 项目
• 图标风格与 Bootstrap 组件一致

Font Awesome 6

最流行的图标字体库。

Font Awesome 6

特点：

• 历史悠久，生态丰富
• 提供 Free 和 Pro 版本
• 支持多种风格（Solid, Regular, Brands）

选择建议

根据项目类型选择

项目类型	推荐图标集
后台管理系统	ep + mdi
现代 Web 应用	lucide + tabler
移动应用	ri + heroicons
Tailwind 项目	heroicons
Bootstrap 项目	bi
通用/不确定	mdi (最全)

根据风格选择

风格	推荐图标集
Material Design	mdi
简洁现代	ep, lucide
线条风格	lucide, ri, tabler
填充风格	mdi, heroicons, tabler
Bootstrap 风格	bi, fa

图标集前缀映射

// 常用前缀别名
const PREFIX_ALIAS = {
  // Material Design Icons
  'mdi': 'mdi',
  
  // Element Plus
  'ep': 'ep',
  'element-plus': 'ep',
  
  // Lucide
  'lucide': 'lucide',
  
  // Tabler
  'tabler': 'tabler',
  
  // Remix Icon
  'ri': 'ri',
  'remix': 'ri',
  
  // Heroicons
  'heroicons': 'heroicons',
  'hero': 'heroicons',
  
  // Bootstrap
  'bi': 'bi',
  'bootstrap': 'bi',
  
  // Font Awesome
  'fa': 'fa',
  'font-awesome': 'fa',
  
  // Carbon
  'carbon': 'carbon',
  
  // Ant Design
  'antd': 'antd',
  'ant-design': 'antd'
}

在线资源

• Iconify 图标库 - 浏览和搜索所有图标
• Icônes - 图标浏览器，支持预览
• Material Design Icons - MDI 图标库
• Heroicons - Heroicons 官网
• Lucide - Lucide 图标库