Chaos and Order

💡 왼쪽 원문을 읽으면서 오른쪽에 따라 써보세요. Tab 키로 힌트를 받을 수 있습니다.

원문 렌더가 준비되기 전까지 텍스트 가이드로 표시합니다.

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](https://feathericons.com) 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

export default function Toolbar() {

return (

)

}

2.3 The Killer Feature — `currentColor` + stroke

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

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](https://heroicons.com) 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

export default function Notification() {

return (

)

}

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](https://phosphoricons.com) 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

| Weight | Description | Use Context |

|---|---|---|

| Thin | 0.75px stroke | Luxury, minimal |

| Light | 1px stroke | Modern general UI |

| Regular | 1.5px stroke | Default recommended |

| Bold | 2px stroke | Emphasis, small mobile sizes |

| Fill | Solid filled | Active state, toggle on |

| Duotone | Two-color filled | Illustrative emphasis |

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

4.2 In React

npm install @phosphor-icons/react

export default function Gallery() {

return (

)

}

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](https://iconoir.com) 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

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](https://tabler.io/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

export default function Nav() {

return (

)

}

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](https://www.radix-ui.com) 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**

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](https://fontawesome.com) 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

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

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

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](https://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](https://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](https://primer.style/octicons) — 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](https://carbondesignsystem.com/elements/icons/library/) — 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](https://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.**

11.2 Eva Icons

[Akveo](https://akveoeva.netlify.app) — 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](https://www.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](https://geticonjar.com) 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](https://iconify.design) 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.

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

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](https://toss.im) 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](https://www.kakaocorp.com/page/service/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

| Priority | Recommended |

|---|---|

| Minimal, orthodox | Lucide |

| Design-system tokenization | Phosphor |

| Tailwind consistency | Heroicons |

| Domain breadth | Tabler |

| Variable-font expressiveness | Material Symbols |

| Enterprise tone | Carbon Icons |

| Unified API | Iconify |

| Designer toolkit | Iconjar + Streamline |

| Commercial brands | FontAwesome Pro |

| Radix UI user | Radix Icons |

17. Licensing, Commercial Use, Wrap-Up

17.1 License Cheat Sheet

|---|---|---|---|

| Lucide | MIT | OK | OK |

| Heroicons | MIT | OK | OK |

| Phosphor | MIT | OK | OK |

| Iconoir | MIT | OK | OK |

| Tabler | MIT | OK | OK |

| Radix Icons | MIT | OK | OK |

| Material Symbols | Apache 2.0 | OK | OK |

| BoxIcons | MIT | OK | OK |

| Bootstrap Icons | MIT | OK | OK |

| Octicons | MIT | OK | OK |

| Carbon Icons | Apache 2.0 | OK | OK |

| Remix Icon | Apache 2.0 | OK | OK |

| Eva Icons | MIT | OK | OK |

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](https://lucide.dev)

- Lucide GitHub: [https://github.com/lucide-icons/lucide](https://github.com/lucide-icons/lucide)

- Feather Icons: [https://feathericons.com](https://feathericons.com)

- Heroicons: [https://heroicons.com](https://heroicons.com)

- Heroicons GitHub: [https://github.com/tailwindlabs/heroicons](https://github.com/tailwindlabs/heroicons)

- Phosphor Icons: [https://phosphoricons.com](https://phosphoricons.com)

- Phosphor GitHub: [https://github.com/phosphor-icons](https://github.com/phosphor-icons)

- Iconoir: [https://iconoir.com](https://iconoir.com)

- Tabler Icons: [https://tabler.io/icons](https://tabler.io/icons)

- Tabler GitHub: [https://github.com/tabler/tabler-icons](https://github.com/tabler/tabler-icons)

- Radix Icons: [https://www.radix-ui.com/icons](https://www.radix-ui.com/icons)

- Radix UI: [https://www.radix-ui.com](https://www.radix-ui.com)

- FontAwesome: [https://fontawesome.com](https://fontawesome.com)

- Material Symbols: [https://fonts.google.com/icons](https://fonts.google.com/icons)

- BoxIcons: [https://boxicons.com](https://boxicons.com)

- Bootstrap Icons: [https://icons.getbootstrap.com](https://icons.getbootstrap.com)

- Octicons (Primer): [https://primer.style/octicons](https://primer.style/octicons)

- Carbon Design System Icons: [https://carbondesignsystem.com/elements/icons/library/](https://carbondesignsystem.com/elements/icons/library/)

- Remix Icon: [https://remixicon.com](https://remixicon.com)

- Eva Icons: [https://akveoeva.netlify.app](https://akveoeva.netlify.app)

- Streamline: [https://www.streamlinehq.com](https://www.streamlinehq.com)

- Iconjar: [https://geticonjar.com](https://geticonjar.com)

- Iconify: [https://iconify.design](https://iconify.design)

- Iconify React: [https://iconify.design/docs/icon-components/react/](https://iconify.design/docs/icon-components/react/)

- Iconify Tailwind plugin: [https://iconify.design/docs/usage/css/tailwind/](https://iconify.design/docs/usage/css/tailwind/)

- Toss Design: [https://toss.im](https://toss.im)

- Kakao Design: [https://www.kakaocorp.com/page/service/design](https://www.kakaocorp.com/page/service/design)

- LINE Design System: [https://designsystem.line.me](https://designsystem.line.me)

- JIS Z 8210 (Japanese pictogram standard): [https://www.jisc.go.jp](https://www.jisc.go.jp)

- Nerd Fonts: [https://www.nerdfonts.com](https://www.nerdfonts.com)