Icon Sets

@saas-js/iconify provides access to 200,000+ icons from 150+ icon sets available in the Iconify ecosystem. This page covers the most popular icon sets and their characteristics.

Popular Icon Sets

Lucide (lucide)

Description: Modern, clean icons with consistent styling
License: MIT
Icons: 1,000+
Style: Outline, 24px grid
Best for: General UI, modern applications

icons add --set lucide home user settings mail search edit trash plus minus

Examples:

• home - House icon
• user - User profile icon
• settings - Gear/cog icon
• mail - Email icon
• search - Magnifying glass
• edit - Pencil icon
• trash - Trash can icon

Heroicons (heroicons)

Description: Tailwind CSS icon set
License: MIT
Icons: 230+
Style: Outline and solid variants, 24px grid
Best for: Tailwind CSS projects, clean interfaces

icons add --set heroicons home user cog envelope magnifying-glass

Examples:

• home - House icon
• user - User icon
• cog - Settings icon
• envelope - Email icon
• magnifying-glass - Search icon

Tabler Icons (tabler)

Description: Free SVG icons designed on a 24px grid
License: MIT
Icons: 4,000+
Style: Outline, stroke-based
Best for: Clean, minimalist designs

icons add --set tabler home user settings mail search edit trash plus minus

Feather (feather)

Description: Simple, beautiful open-source icons
License: MIT
Icons: 280+
Style: Outline, 24px grid
Best for: Clean, simple interfaces

icons add --set feather home user settings mail search edit trash plus minus

Phosphor (phosphor)

Description: Flexible icon family with multiple weights
License: MIT
Icons: 1,200+
Style: Multiple weights (thin, light, regular, bold, fill)
Best for: Flexible design systems

icons add --set phosphor house user gear envelope magnifying-glass

Material Design Icons (mdi)

Description: Google's Material Design icon set
License: Apache 2.0
Icons: 7,000+
Style: Filled, 24px grid
Best for: Material Design applications

icons add --set mdi home account settings email search edit delete plus minus

Font Awesome

Font Awesome offers multiple icon sets:

Solid (fa-solid)

Description: Font Awesome solid icons
License: CC BY 4.0
Icons: 1,000+
Style: Solid/filled

icons add --set fa-solid home user cog envelope search edit trash plus minus

Regular (fa-regular)

Description: Font Awesome regular icons
License: CC BY 4.0
Icons: 150+
Style: Outline

icons add --set fa-regular heart star user bookmark

Brands (fa-brands)

Description: Font Awesome brand icons
License: CC BY 4.0
Icons: 450+
Style: Brand logos

icons add --set fa-brands github twitter linkedin facebook instagram

Specialized Icon Sets

Octicons (octicons)

Description: GitHub's icon set
License: MIT
Icons: 200+
Best for: Development tools, GitHub-style interfaces

icons add --set octicons home person gear mail search pencil trash plus dash

Remix Icon (ri)

Description: Neutral-style icon set
License: Apache 2.0
Icons: 2,800+
Best for: Consistent, neutral designs

icons add --set ri home-line user-line settings-line mail-line search-line

Ionicons (ion)

Description: Ionic framework icons
License: MIT
Icons: 1,300+
Best for: Mobile applications, Ionic projects

icons add --set ion home person settings mail search create trash add remove

Bootstrap Icons (bi)

Description: Bootstrap framework icons
License: MIT
Icons: 1,800+
Best for: Bootstrap projects

icons add --set bi house person gear envelope search pencil trash plus dash

Framework-Specific Sets

Carbon (carbon)

Description: IBM's Carbon Design System icons
License: Apache 2.0
Icons: 2,000+
Best for: Enterprise applications, IBM design system

icons add --set carbon home user settings email search edit trash add subtract

Ant Design (ant-design)

Description: Ant Design icon set
License: MIT
Icons: 700+
Best for: Ant Design projects

icons add --set ant-design home user setting mail search edit delete plus minus

Fluent UI System (fluent)

Description: Microsoft's Fluent Design icons
License: MIT
Icons: 2,000+
Best for: Microsoft design system, Windows applications

icons add --set fluent home person settings mail search edit delete add subtract

Choosing the Right Icon Set

Consider Your Design System

Modern/Clean: Lucide, Heroicons, Feather
Material Design: Material Design Icons
Enterprise: Carbon, Fluent UI
Established: Font Awesome, Tabler

License Considerations

Most icon sets use permissive licenses:

• MIT: Lucide, Heroicons, Tabler, Feather, Phosphor
• Apache 2.0: Material Design Icons, Carbon, Fluent UI
• CC BY 4.0: Font Awesome

Icon Availability

Check icon availability before choosing:

1. Visit Iconify Icon Sets
2. Browse your preferred icon set
3. Verify the icons you need are available
4. Note the exact icon names

Icon Set Comparison

Using Multiple Icon Sets

You can mix icon sets in the same project:

# UI icons from Lucide
icons add --set lucide home user settings mail search

# Brand icons from Font Awesome
icons add --set fa-brands github twitter linkedin

# Specialized icons from Octicons
icons add --set octicons repo issue pull-request

Icon Naming Conventions

Different icon sets use different naming conventions:

Lucide/Heroicons

• home - House icon
• user - User icon
• settings - Settings icon
• mail - Email icon

Material Design Icons

• home - House icon
• account - User icon
• settings - Settings icon
• email - Email icon

Font Awesome

• home - House icon
• user - User icon
• cog - Settings icon
• envelope - Email icon

Tabler Icons

• home - House icon
• user - User icon
• settings - Settings icon
• mail - Email icon

Best Practices

1. Stick to One Primary Set

# Good: Consistent icon set
icons add --set lucide home user settings mail search

# Avoid: Mixing styles unnecessarily
icons add --set lucide home
icons add --set heroicons user
icons add --set feather settings

2. Use Aliases for Consistency

{
  "aliases": {
    "house": "home",
    "cog": "settings",
    "envelope": "mail"
  }
}

3. Group Related Icons

# Navigation icons
icons add --set lucide home dashboard settings help

# Action icons  
icons add --set lucide plus minus edit trash save

# Social icons
icons add --set fa-brands github twitter linkedin

4. Preview Icons Before Adding

Always preview icons at icon-sets.iconify.design to ensure they match your design needs.

Finding Icons

Search Methods

1. Browse by Set: icon-sets.iconify.design
2. Search by Name: Use the search function on the Iconify website
3. Category Browse: Browse by categories like "arrows", "communication", etc.

Icon Search Tips

• Search for common terms: "home", "user", "settings"
• Try variations: "house" vs "home", "cog" vs "settings"
• Check multiple sets for the same concept
• Look for filled vs outline variants

Next Steps

• CLI Reference - Complete command reference
• Configuration - Configure your project
• TypeScript - TypeScript integration