Icon Libraries 2026 — Lucide / Heroicons / Phosphor / Tabler / Radix / FontAwesome 7 / Material Symbols / Iconify Deep Dive

Prologue — The End of Icon Fonts, the Rise of SVG and Variable Fonts

Picture 2014. The Bootstrap 3 era still shipped glyphicon as a font file, and FontAwesome 4 rendered through CSS ::before pseudo-elements. We downloaded a woff2 bundle for a single icon and recited color: #fff to recolor it.

2026 looks different.

• SVG is the standard. Color, stroke, size are all free parameters, and currentColor makes dark mode a one-liner.
• Variable fonts are the new weapon. Google Material Symbols packs four axes — weight 100-700, fill 0-1, grade -25 to +200, opsz 20-48 — into a single file.
• Iconify unifies 200,000+ icons behind one API. Lucide, Phosphor, Tabler all called from one component.
• Pro licenses are still alive. FontAwesome Pro, Streamline, Iconjar buy designer time.
• Variable fonts + tree-shaking + ESM mean bundle size is basically a non-issue.

This article walks the 2026 icon-library landscape end to end — for developers shipping a line of code, designers building a Figma module system, and everyone caught in between asking "where do I pick what."

1. The 2026 Icon Map — Four Buckets

There are too many icon libraries in the world. So we start with classification.

1.1 Free OSS Libraries (MIT/ISC/Apache)

The default pick. Side projects through commercial SaaS, all without friction.

• Lucide — Feather's true successor, 1500+ MIT, the most active community
• Heroicons — Tailwind team, 296 curated icons
• Phosphor Icons — 5400+ x 6 weights, highest visual consistency
• Tabler Icons — 4000+, MIT, growing fast
• Iconoir — Roman Cabrol, unified aesthetics
• Radix Icons — pairs with Radix UI, 15x15 single size
• BoxIcons / Bootstrap Icons / Eva Icons / Remix Icon

1.2 Pro / Commercial

The toolkit in a designer's hand. A license buys release cadence, support, and exclusive icons.

• FontAwesome 7 Pro — Duotone, Sharp, Thin, Brands
• Streamline 8 — 100,000+ illustrations and icons
• Iconjar — Mac-only icon manager, sells proprietary libraries

1.3 Design-System Companions

Corporate design systems ship icon sets with strict color, grid, and stroke rules baked in.

• Material Symbols (Google) — Material 3
• Carbon Icons (IBM) — Carbon Design System
• Octicons (GitHub) — GitHub.com icons
• Radix UI Themes Icons — pairs with Radix UI v3 components

1.4 Variable Fonts and Dynamic

One CSS line to tune weight, optical size, and grade — the new 2026 paradigm.

• Material Symbols — 4-axis variable font
• Iconoir Variable — beta, variable stroke
• Phosphor Variable — 6 weights in one font file

2. Lucide — Feather Successor, 1500+ MIT

Feather Icons is the 24x24 stroke set Cole Bemis released in 2017. The minimalist 2px-stroke line style defined an era, but by 2020 it was effectively stalled — last major release in 2018.

Lucide was the answer. Forked from Feather in 2021 by ariperkkio, Eric Fennis, and others, by 2026 it ships 1500+ icons across 30+ official packages and is the most active OSS icon library out there.

2.1 Why Lucide

• Faithful to Feather's aesthetic — 24x24, 2px stroke, line style
• Fast additions — new icon PRs merge weekly
• Official React, Vue, Svelte, Angular, Solid packages
• Tree-shaking optimized — only used icons hit the bundle
• MIT license — commercial use free

2.2 React Usage

npm install lucide-react

import { Camera, Github, Settings } from 'lucide-react'

export default function Toolbar() {
  return (
    <div className="flex gap-2">
      <Camera size={20} strokeWidth={1.5} />
      <Github size={20} color="#333" />
      <Settings size={20} className="text-gray-600 hover:text-gray-900" />
    </div>
  )
}

2.3 The Killer Feature — currentColor + stroke

Every icon ships with stroke="currentColor", inheriting the parent's color. Dark mode in a single line:

<button className="text-gray-700 dark:text-gray-300 hover:text-blue-500">
  <Settings size={20} />
</button>

2.4 Lucide Lab — Experimental Set

The lucide-lab package holds icons in the queue for merging into the main library — candidates for promotion.

2.5 Limits

• Single stroke style only (no multi-weight system like Phosphor)
• The Feather-era simplicity is both a virtue and a constraint. Illustration-heavy expressive icons are missing.

3. Heroicons — 296 Curated Icons from the Tailwind Team

Heroicons is from Steve Schoger and Adam Wathan — the same team behind Tailwind CSS and Tailwind UI. v1 dropped in 2020; v2.x is current in 2026.

3.1 The Philosophy

• 296 icons. By design. Few enough to memorize.
• Three variants — outline (24x24, 1.5px stroke), solid (24x24, fill), mini (20x20, fill), micro (16x16, fill)
• Single @heroicons/react package
• Same visual language as Tailwind UI components

3.2 Usage

import { ChevronRightIcon } from '@heroicons/react/24/outline'
import { CheckCircleIcon } from '@heroicons/react/24/solid'
import { XMarkIcon } from '@heroicons/react/20/solid'

export default function Notification() {
  return (
    <div className="flex items-center gap-2">
      <CheckCircleIcon className="h-5 w-5 text-green-500" />
      <span>Saved</span>
      <button>
        <XMarkIcon className="h-4 w-4 text-gray-400" />
      </button>
    </div>
  )
}

3.3 Why Heroicons

• Visual harmony with Tailwind — slots into Tailwind tokens naturally
• Clear variants — outline/solid/mini/micro map to distinct contexts
• Single-designer consistency — comes from one designer's hand

3.4 Limits

• 296 icons isn't enough often. Domain icons (coding, medical, automotive) are almost absent.
• Additions are usually rejected with "Use Iconify or Lucide" boilerplate.

4. Phosphor Icons — 5400+ x 6 Weights

Phosphor Icons is from Rafael Conde and Helena Zhang. v1 in 2021, v2.1 in 2026, 5400+ icons across six weight variants.

4.1 The Six Weights

The same icon exists in six forms, all visually consistent.

4.2 In React

npm install @phosphor-icons/react

import { Heart, BookOpen, Camera } from '@phosphor-icons/react'

export default function Gallery() {
  return (
    <div>
      <Heart size={24} weight="fill" color="#ff4d4f" />
      <BookOpen size={24} weight="duotone" />
      <Camera size={24} weight="bold" />
    </div>
  )
}

4.3 Phosphor's Strengths

• 5400+ icons — wide category coverage (medical, games, casino, music, books)
• 6-weight system — natural for toggle-on-active expressions via Fill
• Duotone — fits marketing pages and empty-state illustrations
• MIT license
• Figma plugin + Sketch + iOS + Flutter packages

4.4 Limits

• 5400 sounds like a lot but still flows from two designers' hands. PR throughput is slower than Tabler.
• Mapping Duotone's two-color system to your design tokens takes some plumbing.

5. Iconoir — Roman Cabrol's Aesthetic

Iconoir is by Luca Burgio, Sam Pollman, and designer Roman Cabrol. Started 2021, now around 1600 24x24 stroke icons.

5.1 Why Iconoir

• Visual unity — feels like one designer's hand throughout
• MIT license
• Official React, Vue, React Native, Flutter, Tailwind packages
• Separate CSS font package — iconoir-css is a one-line import

5.2 Usage

import { Camera, Github, Settings } from 'iconoir-react'

<Camera height={24} width={24} strokeWidth={1.5} color="#333" />

5.3 Iconoir vs Lucide

Both are 24x24 stroke libraries with different aesthetics.

• Lucide — Feather-orthodox, more mechanical and functional
• Iconoir — softer curves, slightly illustrative

Worth A/B testing — designer taste splits it.

5.4 Limits

• Less community momentum than Lucide
• 1600 is a smaller set

6. Tabler Icons — 4000+ Growing Fast

Tabler Icons is from the Polish codecalm team, 24x24 stroke. Started 2020, now 4900+ in 2026 and still growing.

6.1 Why Tabler

• 4900+ icons — quantity that overwhelms
• Outline + Filled variants
• MIT license
• Fast cadence — biweekly releases
• Official React, Vue, Svelte, Solid, Astro, Web Components packages

6.2 In React

npm install @tabler/icons-react

import { IconHome, IconUser, IconSettings } from '@tabler/icons-react'

export default function Nav() {
  return (
    <nav>
      <IconHome size={20} stroke={1.5} />
      <IconUser size={20} stroke={1.5} />
      <IconSettings size={20} stroke={1.5} />
    </nav>
  )
}

6.3 The Real Value — Domain Breadth

Icons missing from Lucide and Iconoir are in Tabler.

• Automotive and transport (IconCar, IconBus, IconShip)
• Medical and health (IconStethoscope, IconHeartbeat)
• Games and casino (IconDice, IconChess)
• Currency and payments (hundreds)
• Brand logos (hundreds)

Many startup SaaS teams ship "almost everything from one Tabler import."

6.4 Limits

• Volume strains consistency at the edges (especially brand logos)
• React 19 Server Component compatibility was sorted out late

7. Radix Icons / Radix UI Themes Icons

Radix is the design system and component library inside WorkOS. Two icon strands.

7.1 Radix Icons (@radix-ui/react-icons)

• 15x15 fixed size
• About 300 icons
• Single stroke style
• MIT license

import { GitHubLogoIcon, MoonIcon, SunIcon } from '@radix-ui/react-icons'

<GitHubLogoIcon />
<MoonIcon />

7.2 Radix UI Themes Icons

Companion icons for Radix UI v3 — tuned to the Themes visual tokens (scale, accent, gray).

7.3 Why Radix

• Visual consistency with Radix UI components is the whole pitch
• Mixing with Lucide or Heroicons leaves a noticeable seam
• 15x15 is optimized for menus, tooltips, small buttons

7.4 Limits

• 300 is thin for domain coverage — usually mixed with Tabler or Phosphor
• Scaling to other sizes needs transform: scale(), not design-recommended

8. FontAwesome 7 — Classic, Free + Pro

FontAwesome is the longest-running icon library, started 2012. v7 is current in 2026.

8.1 The v7 Lineup

• Free — ~2000 icons free
• Pro — 32,000+ icons across 8 styles (Classic, Sharp, Duotone, Light, Regular, Solid, Thin, Brands)
• Sharp Duotone new in v7
• Kit — per-user CDN package with analytics and hosting

8.2 In React

npm install @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

<FontAwesomeIcon icon={faCoffee} size="2x" color="#6f4e37" />

8.3 Why FontAwesome Still

• Brand recognition — non-developers know it
• WordPress, Drupal, legacy compatibility — single CSS import
• Brands — 1000+ brand logos under Pro
• Kit for hosting, analytics, subset bundles

8.4 Limits

• The per-icon import pattern feels clunky in modern React
• Bundle size heavier than Lucide and Tabler
• Pro license costs ($99/year individual, $399/year team)

9. Material Symbols — Google's Variable Font, Material Icons Replacement

In 2022 Google rebranded Material Icons to Material Symbols as a 4-axis variable font.

9.1 Four Axes

• Weight — 100 to 700
• Fill — 0 to 1 (outline to filled)
• Grade — -25 to +200 (fine-grained weight)
• Optical Size — 20 to 48 (thicker strokes at small sizes)

Tens of thousands of shapes from one font file.

9.2 Three Styles

• Material Symbols Outlined — line default
• Material Symbols Rounded — soft corners
• Material Symbols Sharp — angular corners

9.3 Plain CSS

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" rel="stylesheet" />

<span className="material-symbols-outlined">home</span>

.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

.active .material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 600;
}

9.4 In React

react-material-symbols or Iconify (@iconify-icons/material-symbols) for SVG paths.

import { MaterialSymbol } from 'react-material-symbols'

<MaterialSymbol icon="home" size={24} fill grade={-25} weight={500} />

9.5 Why Material Symbols

• 3000+ icons — wide design-system coverage
• Visual harmony with Google and Android
• 4-axis variable — toggle-on-active via fill variable is natural
• Apache 2.0

9.6 Limits

• Material 3 visual language is polarizing (the Material You softness isn't for everyone)
• Variable-font learning curve (powerful once internalized)

10. BoxIcons / Bootstrap Icons / Octicons / Carbon Icons

10.1 BoxIcons

boxicons.com — Atisa's work. ~1600 icons, MIT.

Three variants: Regular (outline), Solid, Logos. Brand logos are the strength, but cadence slowed after 2024.

10.2 Bootstrap Icons

icons.getbootstrap.com — Bootstrap team official. ~2000, MIT.

Bundled with Bootstrap CSS. Natural pick for Bootstrap users. Solid 1.5px stroke style.

10.3 Octicons

GitHub Primer — companion to GitHub's Primer Design System. ~250 icons.

Same visual as github.com. PR, Issue, Branch domain icons are the strength. Almost mandatory for a GitHub clone.

10.4 Carbon Icons

Carbon Design System — IBM official. ~2200 icons.

Enterprise SaaS visual language. Strong for IBM Cloud and Watson domain. Heavy and serious feel — well-suited to B2B SaaS.

10.5 Comparison

11. Remix Icon / Eva Icons / Streamline

11.1 Remix Icon

remixicon.com — Chinese designer Jimmy Cheung. ~3000 icons, Apache 2.0.

Outline + Fill variants. Relatively thick stroke. Most popular OSS icons in the Chinese-language sphere.

import { RiHomeLine, RiHomeFill } from '@remixicon/react'

<RiHomeLine size={20} />

11.2 Eva Icons

Akveo — Akveo team. ~480 icons, MIT.

Pairs with the Nebular design system. Outline + Fill variants. Cadence stalled after 2020, but the set itself is high-quality.

11.3 Streamline

streamlinehq.com — paid, 100,000+ assets.

• 80,000+ icons plus 30,000+ illustrations plus UI patterns
• Four styles (Light, Regular, Bold, Plump, Cute)
• Figma plugin, Sketch, iOS, Android, React packages
• $109/year to$599/year

You're buying designer time. Very strong for marketing pages, empty states, and onboarding illustrations.

12. Iconjar — Mac Icon Manager

Iconjar is a Mac-only desktop app. It manages icon libraries at the OS level.

12.1 What It Does

• Unified search across icon libraries — Lucide, Phosphor, Tabler, FontAwesome, 30+ libraries in one search box
• Drag-and-drop — into Figma, Sketch, VS Code, Slack, anywhere
• Tag system — your own classification overlay
• SVG, PNG, ICNS, PDF export
• Built-in icon libraries for sale — 80,000+ assets

12.2 Price

$39.99 one-time (perpetual license). Extra libraries billed separately.

12.3 Who It's For

• Full-time designers on Mac who hunt for icons daily
• People juggling multiple projects with different libraries
• Windows/Linux users have fewer alternatives (Nucleo, Iconpacks are the rivals)

13. Iconify — 200K+ Icons Through One API

Iconify is the meta-tool that unifies every icon library behind a single API. 2026: 200+ icon sets, 250,000+ icons indexed.

13.1 Core Idea

Stop npm-installing icon libraries one by one — call them all from one component.

import { Icon } from '@iconify/react'

<Icon icon="lucide:home" />
<Icon icon="phosphor:heart-fill" />
<Icon icon="material-symbols:settings" />
<Icon icon="tabler:user-circle" />
<Icon icon="fa6-solid:coffee" />

13.2 How It Works

• On-demand download — first use fetches SVG from the CDN
• Self-hostable — @iconify/json package for local builds
• Tree-shaking friendly — @iconify-icons/lucide per-set packages

13.3 React with Self-Hosting

// Bundled at build time
import { Icon } from '@iconify/react'
import homeIcon from '@iconify-icons/lucide/home'
import heartIcon from '@iconify-icons/phosphor/heart-fill'

<Icon icon={homeIcon} />
<Icon icon={heartIcon} color="#ff4d4f" />

13.4 Iconify's Strengths

• One learning curve for all icons — if the designer wants Phosphor and the developer wants Tabler, same component
• Tailwind plugin — @iconify/tailwind enables bg-[mask-image] CSS-only usage
• VS Code extension — preview icons in the editor
• Figma plugin — same libraries in Figma

13.5 Limits

• The unified abstraction can lose set-specific optimizations (Phosphor's weight prop needs extra handling)
• Dynamic-import dependency — slight first-render delay

14. Korea — Toss Design System, Kakao Design

14.1 Toss Design System Icons

Toss sets the Korean fintech design-system standard. The Toss icon set is not published as a public package, but the internal TDS (Toss Design System) holds consistent stroke, corner, and grid rules.

Features:

• 24x24 grid
• 2px stroke default
• Rounded corners — Toss's signature
• Finance-domain icons — transfer, card, savings rich

Toss's design isn't open, but many Korean fintech sites imitate its aesthetic. You should not copy without a license, but the influence is overwhelming.

14.2 Kakao Design System

Kakao Design runs an internal icon set. Not public. KakaoTalk, KakaoMap, KakaoPay all share the same visual language.

14.3 NAVER Design

NAVER also runs internal design systems (Nuxt Design System and others) with limited public disclosure. LINE Design System is partially public.

14.4 What Korean Developers Actually Pick

• Public domain (government, non-Toss-styled sites): Lucide, Phosphor, Tabler are safe defaults
• Fintech SaaS: Do not copy Toss directly — start with Heroicons solid plus your own rounded-corner convention
• Messengers and community: For Kakao-adjacent UX, Phosphor Bold and Fill variants are the closest match

15. Japan — NAVITIME Pictograms, JR / Public Icon Standards

15.1 JIS Z 8210 — Japanese Public Pictogram Standard

JIS Z 8210 is the Japanese Industrial Standard for public pictograms — restroom, exit, elevator, first-aid signage all conform. Updated toward the international standard (ISO 7001) ahead of the 2020 Tokyo Olympics.

15.2 NAVITIME Pictograms

NAVITIME is Japan's leading map and transit app. It runs its own pictogram set, partly public. Japanese transit (JR, Metro, bus) line colors and pictograms are integrated.

15.3 JR Signage

JR (Japan Railway) station signage is canonical Japanese graphic design. Clock, transfer, exit guidance bundled into one visual language. Not distributed externally, but cultural awareness matters when designing for Japanese audiences.

15.4 What Japanese Developers Actually Pick

• Public sites: Material Symbols Rounded + JIS Z 8210 pictograms (custom SVG)
• Travel and transit SaaS: Phosphor Regular + Duotone combo (close to NAVITIME's tone)
• Manga and game-style: Phosphor Bold + Fill plus Tabler's game-domain icons

16. Who Should Pick What — Scenario Recommendations

16.1 Side Project / Quick Prototype

Pick: Lucide

• 1500 is enough
• Feather-orthodox aesthetic
• Cleanest tree-shaking

16.2 Startup Building a Design System

Pick: Phosphor

• 6-weight system maps perfectly to design tokens
• Toggle and active states feel natural
• 5400 covers domain breadth

16.3 Tailwind UI / Full-stack Tailwind

Pick: Heroicons + Lucide fallback

• Heroicons for visual harmony
• Lucide for missing domain icons

16.4 Large SaaS, Wide Domain

Pick: Tabler + Iconify fallback

• 4900 covers nearly everything
• Iconify fills in Phosphor and Material Symbols gaps

16.5 Enterprise B2B SaaS

Pick: Carbon Icons + FontAwesome Pro

• Carbon's heavier feel matches enterprise tone
• FontAwesome Pro Brands covers integration logos

16.6 Google / Android Consistency

Pick: Material Symbols

• Visual language Google/Android users have learned
• Variable font means overwhelming expressive range

16.7 GitHub / Developer-Tool Clone

Pick: Octicons + Lucide

• Octicons for GitHub domain
• Lucide for general UI

16.8 Designer Full-time on Mac

Pick: Iconjar + Streamline

• Iconjar manages all libraries
• Streamline for illustrations and empty states

16.9 Decision Matrix

17. Licensing, Commercial Use, Wrap-Up

17.1 License Cheat Sheet

17.2 Attribution Requirements

• CC BY 4.0 (FontAwesome Free): footer or about-page credit "Icons by Font Awesome"
• MIT/Apache: no attribution required (just keep the license file)
• Pro licenses: depends on terms, generally no attribution needed

17.3 Korean/Japanese Attribution Conventions

• Korean SaaS: footer credits like "Icons: Lucide, Phosphor" are increasingly common
• Japanese sites: public-pictogram references cite JIS Z 8210 standard
• Both: CC BY 4.0 is a duty, MIT is a courtesy

Epilogue — Icons Are Design Tokens

A good icon library in 2026 is no longer a pretty-picture archive.

• stroke width is a design token
• fill variable is an interaction state
• 6-weight system is the scale of an emphasis system
• 24px vs 20px vs 15px is an information-density decision

Lucide's minimalism, Phosphor's expressiveness, Tabler's breadth, Material Symbols' four-axis variable font, Iconify's unification — each gives a different answer.

What is the identity of the product I'm building, and which icon set carries that identity best? I hope this article serves as a map for that decision.

A good icon tells the user "this is what this is" in 0.1 seconds. Don't take that 0.1 second lightly.

References

• Lucide: https://lucide.dev
• Lucide GitHub: https://github.com/lucide-icons/lucide
• Feather Icons: https://feathericons.com
• Heroicons: https://heroicons.com
• Heroicons GitHub: https://github.com/tailwindlabs/heroicons
• Phosphor Icons: https://phosphoricons.com
• Phosphor GitHub: https://github.com/phosphor-icons
• Iconoir: https://iconoir.com
• Tabler Icons: https://tabler.io/icons
• Tabler GitHub: https://github.com/tabler/tabler-icons
• Radix Icons: https://www.radix-ui.com/icons
• Radix UI: https://www.radix-ui.com
• FontAwesome: https://fontawesome.com
• Material Symbols: https://fonts.google.com/icons
• BoxIcons: https://boxicons.com
• Bootstrap Icons: https://icons.getbootstrap.com
• Octicons (Primer): https://primer.style/octicons
• Carbon Design System Icons: https://carbondesignsystem.com/elements/icons/library/
• Remix Icon: https://remixicon.com
• Eva Icons: https://akveoeva.netlify.app
• Streamline: https://www.streamlinehq.com
• Iconjar: https://geticonjar.com
• Iconify: https://iconify.design
• Iconify React: https://iconify.design/docs/icon-components/react/
• Iconify Tailwind plugin: https://iconify.design/docs/usage/css/tailwind/
• Toss Design: https://toss.im
• Kakao Design: https://www.kakaocorp.com/page/service/design
• LINE Design System: https://designsystem.line.me
• JIS Z 8210 (Japanese pictogram standard): https://www.jisc.go.jp
• Nerd Fonts: https://www.nerdfonts.com