Skip to Content
Documentation
Starter kits
Get Pro
Overview
Getting Started

Icon Sets

Browse and discover available icon sets in @saas-js/iconify

Icon Sets

Iconx 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.

Lucide (lucide)

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

iconx 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

iconx 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

iconx 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

iconx 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

iconx 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

iconx 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

iconx 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

iconx 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

iconx 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

iconx 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

iconx 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

iconx 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

iconx 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

iconx 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

iconx 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

iconx 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

Icon SetIconsLicenseStyleBest For
Lucide1,000+MITOutlineModern UI
Heroicons230+MITOutline/SolidTailwind CSS
Tabler4,000+MITOutlineClean designs
Feather280+MITOutlineSimple interfaces
Phosphor1,200+MITMultiple weightsFlexible systems
Material Design7,000+Apache 2.0FilledMaterial Design
Font Awesome1,600+CC BY 4.0VariousEstablished projects

Using Multiple Icon Sets

You can mix icon sets in the same project:

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

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

# Specialized icons from Octicons
iconx 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
iconx add --set lucide home user settings mail search

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

2. Use Aliases for Consistency

{
  "aliases": {
    "house": "home",
    "cog": "settings",
    "envelope": "mail"
  }
}
# Navigation icons
iconx add --set lucide home dashboard settings help

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

# Social icons
iconx 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

Icon Sets | Saas UI