Icon Sets

The YH-UI Icon Collection supports over 100 icon sets. Below is a detailed introduction to the most commonly used ones.

Comparison of Common Icon Sets

Icon Set	Prefix	Icon Count	Style Characteristics	Recommended Scenarios
Material Design Icons	mdi	7000+	Material Design style	General applications
Element Plus	ep	200+	Clean and modern	Admin management systems
Lucide	lucide	1500+	Line/Outline style	Modern web applications
Tabler Icons	tabler	4600+	Line/Filled styles	Dashboards/Admin panels
Remix Icon	ri	2500+	Line/Outline style	Mobile apps / Lightweight
Heroicons	heroicons	600+	Line/Filled styles	Tailwind CSS projects
Bootstrap Icons	bi	2600+	Bootstrap style	Bootstrap projects
Font Awesome 6	fa	2000+	Multiple styles	General purpose

Icon Set Details

Material Design Icons (mdi)

The most popular open-source icon library, offering over 7,000 icons.

Material Design Icons

Features:

• Largest variety of icons, covering almost any use case.
• Unified style adhering to Material Design specifications.
• Active community with continuous updates.

Element Plus (ep)

The official icon set from Element Plus, clean and modern.

Element Plus

Features:

• Perfectly matches the styling of Element Plus components.
• Ideal for back-office management systems.
• Moderate, focused selection of icons.

Lucide

A modern, clean line-style icon library.

Lucide

Features:

• Consistent stroke weight for clean visuals.
• Suitable for modern minimalist projects.
• Supports custom stroke weight adjustments.

Tabler Icons

A high-quality SVG icon library with over 4,600 icons.

Tabler Icons

Features:

• Diverse and experimental icon selection.
• Provides both outline and filled styles for many icons.
• Suitable for all types of web applications.

Remix Icon

A set of open-source neutral style system symbols elaborately crafted.

Remix Icon

Features:

• Primarily line-styled.
• Standardized and intuitive icon naming.
• Ideal for projects requiring refined and elegant symbols.

Heroicons

Official icon library from the creators of Tailwind CSS.

Heroicons

Features:

• Officially recommended for Tailwind CSS projects.
• Available in both outline and solid styles.
• Professional and clean aesthetic.

Bootstrap Icons

Official icon library from the Bootstrap team.

Bootstrap Icons

Features:

• Native icons for the Bootstrap ecosystem.
• Consistent with the design language of Bootstrap components.
• Large and well-known library.

Font Awesome 6

The world's most popular icon set and toolkit.

Font Awesome 6

Features:

• Long-standing history and massive ecosystem.
• Both Free and Pro versions available.
• Supports multiple styles including Solid, Regular, and Brands.

Selection Tips

By Project Type

Project Type	Recommended Icon Sets
Admin Systems	ep + mdi
Modern Web Apps	lucide + tabler
Mobile Apps	ri + heroicons
Tailwind Projects	heroicons
Bootstrap Projects	bi
General / Not Sure	mdi (Most comprehensive)

By Style

Style	Recommended Icon Sets
Material Design	mdi
Clean and Modern	ep, lucide
Outline/Line Style	lucide, ri, tabler
Filled/Solid Style	mdi, heroicons, tabler
Bootstrap Style	bi, fa

Icon Set Prefix Mappings

// Common prefix aliases
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'
}

Online Resources

• Iconify Icon Library - Browse and search all available icons.
• Icônes - A clean icon browser with preview support.
• Material Design Icons - Official MDI icon library.
• Heroicons - Official Heroicons website.
• Lucide - Official Lucide icon library.