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

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:

Visit Iconify Icon Sets
Browse your preferred icon set
Verify the icons you need are available
Note the exact icon names

Icon Set Comparison

Icon Set	Icons	License	Style	Best For
Lucide	1,000+	MIT	Outline	Modern UI
Heroicons	230+	MIT	Outline/Solid	Tailwind CSS
Tabler	4,000+	MIT	Outline	Clean designs
Feather	280+	MIT	Outline	Simple interfaces
Phosphor	1,200+	MIT	Multiple weights	Flexible systems
Material Design	7,000+	Apache 2.0	Filled	Material Design
Font Awesome	1,600+	CC BY 4.0	Various	Established projects

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"
  }
}

# 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

Browse by Set: icon-sets.iconify.design
Search by Name: Use the search function on the Iconify website
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

Icon Sets

On this page