LabHub

블로그

아이콘 라이브러리 2026 — Lucide / Heroicons / Phosphor / Tabler / Radix / FontAwesome 7 / Material Symbols / Iconify 심층 비교

2026-05-16 · 32 분 읽기 · #icons#icon-library#lucide#heroicons#iconoir#phosphor-icons#tabler-icons#radix-icons#fontawesome#material-symbols#boxicons#bootstrap-icons#octicons#carbon-icons#remix-icon#eva-icons#streamline#iconjar#iconify#deep-dive

한국어English日本語

프롤로그 — 아이콘 폰트 시대의 종언, SVG · 변수 폰트의 도래

2014년의 풍경을 떠올려 보자. 부트스트랩 3 시대의 glyphicon은 폰트 파일이었고, FontAwesome 4는 CSS의 ::before 의사 요소로 그려졌다. 우리는 아이콘 하나를 위해 woff2 한 묶음을 다운로드했고, 색을 바꾸려고 color: #fff를 외쳤다.

2026년의 풍경은 달라졌다.

이 글은 2026년의 아이콘 라이브러리 풍경을 처음부터 끝까지 비교한다. 코드 한 줄을 쓰는 개발자, Figma에 모듈 시스템을 구축하는 디자이너, 그리고 그 사이에 끼어 "도대체 어디서 무엇을 골라야 하는가"를 묻는 모든 사람을 위해.

1장 · 2026년의 아이콘 지도 — 네 가지 분류

세상에 아이콘 라이브러리는 많다. 너무 많다. 그래서 먼저 분류부터 한다.

1.1 무료 OSS 라이브러리 (MIT/ISC/Apache)

가장 일반적인 선택. 작은 사이드 프로젝트부터 상용 SaaS까지 부담 없이 쓴다.

1.2 Pro · 상업 라이선스

디자이너 손에 들리는 도구. 라이선스를 산다는 건 정해진 일정에 맞춰 새 아이콘이 추가되고, 지원이 보장된다는 뜻.

1.3 디자인 시스템 부속 아이콘

기업 디자인 시스템이 자체 아이콘 셋을 같이 배포한다. 시스템 컬러 · 그리드 · 두께 규칙이 일관되도록 만들어졌다.

1.4 변수 폰트 · 동적 가변

CSS 한 줄로 두께 · 광학 사이즈 · 그레이드를 조정한다. 2026년의 새 패러다임.

2장 · Lucide — Feather 후속, 1500+ MIT

Feather Icons는 2017년 Cole Bemis가 만든 24×24 stroke 아이콘 셋이다. 2배 두께 stroke의 미니멀한 라인 스타일이 한 시대를 지배했지만, 2020년경부터 사실상 정체된다. 마지막 메이저 업데이트가 2018년이다.

Lucide는 그 정체에 대한 대답이었다. 2021년 ariperkkio · Eric Fennis 등이 Feather에서 포크해서 시작했고, 2026년 현재 1500개 이상의 아이콘과 30개 이상의 공식 패키지를 갖춘 가장 활발한 OSS 아이콘 라이브러리가 됐다.

2.1 왜 Lucide인가

2.2 React에서 쓰기

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 Lucide의 핵심 매력 — currentColor + stroke

모든 아이콘이 stroke="currentColor" 속성을 갖는다. 부모 요소의 color를 따라가므로 다크모드 한 줄.

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

2.4 Lucide Lab — 실험적 셋

lucide-lab 패키지는 본 라이브러리에 들어가기 전 단계의 아이콘들을 모아둔다. 정식 머지 후보들이 여기 있다.

2.5 한계

3장 · Heroicons — Tailwind 팀의 296개 정선 셋

Heroicons는 Tailwind CSS · Tailwind UI를 만든 Steve Schoger · Adam Wathan 팀의 작품이다. 2020년 v1 발표, 2026년 현재 v2.x.

3.1 Heroicons의 철학

3.2 사용 예

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>저장되었습니다</span>
      <button>
        <XMarkIcon className="h-4 w-4 text-gray-400" />
      </button>
    </div>
  )
}

3.3 왜 Heroicons인가

3.4 한계

4장 · Phosphor Icons — 5400+ × 6 weights

Phosphor Icons는 Rafael Conde · Helena Zhang의 작품. 2021년 v1 출시 후 2026년 현재 v2.1, 5400개 이상의 아이콘을 6가지 두께 변형으로 제공한다.

4.1 6 가지 weight

Weight설명사용 맥락
Thin0.75px stroke럭셔리 · 미니멀
Light1px stroke모던 일반 UI
Regular1.5px stroke기본 권장
Bold2px stroke강조 · 모바일 작은 사이즈
Fill단색 채움활성 상태 · 토글
Duotone두 색 채움일러스트성 강조

같은 아이콘이 6가지 모습으로 존재한다 — 일관성이 보장된 채로.

4.2 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의 강점

4.4 한계

5장 · Iconoir — Roman Cabrol의 아름다움

Iconoir는 Luca Burgio · Sam Pollman · 그리고 디자이너 Roman Cabrol의 작품. 2021년 시작, 2026년 현재 약 1600개의 24×24 stroke 아이콘.

5.1 왜 Iconoir인가

5.2 사용 예

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

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

5.3 Iconoir vs Lucide

둘 다 24×24 stroke 라이브러리지만 미감이 다르다.

A/B 테스트하기 좋다. 디자이너 취향에 따라 갈린다.

5.4 한계

6장 · Tabler Icons — 4000+ 빠른 성장

Tabler Icons는 폴란드의 codecalm 팀이 만든 24×24 stroke 셋. 2020년 시작, 2026년 현재 4900개 이상으로 성장 중.

6.1 왜 Tabler인가

6.2 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 Tabler의 진짜 가치 — 도메인 다양성

Lucide · Iconoir에 없는 아이콘이 Tabler에는 있다.

스타트업 SaaS에서 "거의 다 Tabler 하나로 끝나는 경험"이 흔하다.

6.4 한계

7장 · Radix Icons / Radix UI Themes Icons

Radix는 WorkOS 산하의 디자인 시스템 · 컴포넌트 라이브러리다. 두 갈래의 아이콘 라이브러리가 있다.

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

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

<GitHubLogoIcon />
<MoonIcon />

7.2 Radix UI Themes Icons

Radix UI v3와 같이 쓰는 동반 아이콘 셋. Themes의 시각 토큰(scale, accent, gray)에 잘 어울린다.

7.3 왜 Radix를 골라야 하나

7.4 한계

8장 · FontAwesome 7 — 클래식 + Free + Pro

FontAwesome은 2012년 시작된 가장 오래된 아이콘 라이브러리. 2026년 현재 v7.

8.1 FontAwesome 7의 구성

8.2 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 왜 여전히 FontAwesome인가

8.4 한계

9장 · Material Symbols — Google variable font, Material Icons 대체

2022년 Google이 Material Icons를 Material Symbols로 리브랜딩하며 4축 variable font로 재출시했다.

9.1 4축 variable font

한 폰트 파일로 수만 가지 모양이 가능하다.

9.2 두 가지 스타일

9.3 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 React에서

react-material-symbols 패키지 또는 Iconify(@iconify-icons/material-symbols)를 통해 SVG로 부른다.

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

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

9.5 왜 Material Symbols인가

9.6 한계

10장 · BoxIcons / Bootstrap Icons / Octicons / Carbon Icons

10.1 BoxIcons

boxicons.com — Atisa의 작품. 약 1600개, MIT.

세 가지 변형: Regular(outline) · Solid · Logos. 브랜드 로고가 강점이지만, 2024년 이후 업데이트가 느리다.

10.2 Bootstrap Icons

icons.getbootstrap.com — Bootstrap 팀 공식. 약 2000개, MIT.

Bootstrap CSS와 한 쌍. 부트스트랩 사용자라면 자연스러운 선택. 두께가 1.5px의 단단한 stroke 스타일.

10.3 Octicons

GitHub — GitHub의 Primer Design System 부속. 약 250개.

GitHub.com 사이트와 같은 시각. PR · Issue · Branch 같은 GitHub 도메인 아이콘이 강점. GitHub clone 사이트를 만든다면 거의 필수.

10.4 Carbon Icons

Carbon Design System — IBM 공식. 약 2200개.

엔터프라이즈 SaaS 시각 언어. IBM Cloud · Watson 같은 도메인 아이콘이 강점. 시각이 무겁고 진중해서 B2B SaaS에 잘 어울린다.

10.5 비교 요약

라이브러리개수강점약점
BoxIcons1600브랜드 로고업데이트 느림
Bootstrap2000BS 일관성폐쇄적 미감
Octicons250GitHub 도메인너무 좁음
Carbon2200엔터프라이즈무거운 미감

11장 · Remix Icon / Eva Icons / Streamline — 무료 + paid

11.1 Remix Icon

remixicon.com — 중국 디자이너 Jimmy Cheung. 약 3000개, Apache 2.0.

Outline + Fill 두 변형. 비교적 굵은 stroke 스타일. 중국어권에서 가장 인기 있는 OSS 아이콘.

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

<RiHomeLine size={20} />

11.2 Eva Icons

Akveo — Akveo 팀. 약 480개, MIT.

Nebular 디자인 시스템과 한 쌍. Outline + Fill 두 변형. 2020년 이후 업데이트가 거의 멈췄지만, 셋 자체는 여전히 완성도가 높다.

11.3 Streamline

streamlinehq.com — 유료 100,000개 이상.

디자이너의 시간을 산다. 일러스트레이션이 필요한 마케팅 페이지 · 빈 상태 · 온보딩에 매우 강하다.

12장 · Iconjar — Mac 아이콘 매니저

Iconjar는 Mac 전용 데스크탑 앱. 아이콘 라이브러리를 OS 레벨에서 관리한다.

12.1 무엇을 하는가

12.2 가격

$39.99 한 번 결제 (영구 라이선스). 추가 라이브러리는 별도 결제.

12.3 누구에게 좋은가

13장 · Iconify — 200K+ 아이콘 통합 API

Iconify는 모든 아이콘 라이브러리를 단일 API로 묶는 메타 도구. 2026년 현재 200개 이상의 아이콘 셋과 250,000개 이상의 아이콘이 등록되어 있다.

13.1 핵심 아이디어

아이콘 라이브러리를 매번 npm install 하지 말고, 하나의 컴포넌트로 모두 부르자.

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 동작 방식

13.3 React + 자체 호스팅

// 빌드 시 번들에 포함
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의 강점

13.5 한계

14장 · 한국 — 토스 디자인 시스템, 카카오 디자인

14.1 토스 디자인 시스템 아이콘

토스는 한국 핀테크의 디자인 시스템 표준이다. 토스의 아이콘 셋은 공개 패키지로 배포되지 않지만, TDS(Toss Design System) 내부 시스템에서 일관된 두께 · 모서리 · 그리드를 유지한다.

특징:

토스의 디자인은 공개되어 있지 않지만, 토스의 미감을 따라 만든 한국 핀테크 사이트가 매우 많다. 라이센스 없이 따라 그릴 일은 없어야 하지만, 영향력은 압도적이다.

14.2 카카오 디자인 시스템

카카오 디자인 시스템도 자체 아이콘 셋을 운영한다. 비공개. 카카오톡 · 카카오맵 · 카카오페이가 모두 같은 시각 언어를 공유한다.

14.3 NAVER 디자인

NAVER도 자체 디자인 시스템(Nuxt Design System 등)을 운영하지만 외부 공개는 제한적. LINE 디자인 시스템(LINE Design System)은 일부 공개되어 있다.

14.4 한국 개발자가 실무에서 쓸 때

15장 · 일본 — NAVITIME pictograms, JR · 공공 아이콘 표준

15.1 JIS Z 8210 — 일본 공공 픽토그램 표준

JIS Z 8210은 일본 산업 표준이 정한 공공 픽토그램이다. 화장실 · 출구 · 엘리베이터 · 응급 처치 같은 공공 사인이 이 표준을 따른다. 2017년 도쿄 올림픽을 앞두고 국제 표준(ISO 7001)에 가깝게 업데이트됐다.

15.2 NAVITIME pictograms

NAVITIME은 일본의 대표 지도 · 환승 앱이다. 자체 픽토그램 셋을 운영하며, 일부는 공개되어 있다. 일본 대중교통(JR · 메트로 · 버스)의 라인 컬러 + 픽토그램이 통합되어 있다.

15.3 JR 사이니지

JR(Japan Railway)의 역 사이니지는 일본 그래픽 디자인의 정통이다. 시계 · 환승 · 출구 안내가 모두 한 시각 언어로 묶여 있다. 외부 라이브러리로 제공되지 않지만, 일본 사이트를 만든다면 영향을 의식해야 한다.

15.4 일본 개발자가 실무에서 쓸 때

16장 · 누가 무엇을 골라야 하나 — 시나리오별 권장

16.1 사이드 프로젝트 · 빠른 프로토타입

선택: Lucide

16.2 디자인 시스템을 구축하는 스타트업

선택: Phosphor

16.3 Tailwind UI · Tailwind 풀스택 환경

선택: Heroicons + Lucide 보조

16.4 대용량 SaaS · 도메인 다양성 요구

선택: Tabler + Iconify로 보조

16.5 엔터프라이즈 B2B SaaS

선택: Carbon Icons + FontAwesome Pro

16.6 Google · Android 일관성

선택: Material Symbols

16.7 GitHub · 개발자 도구 클론

선택: Octicons + Lucide

16.8 디자이너 풀타임 — Mac 사용

선택: Iconjar + Streamline

16.9 의사결정 매트릭스

우선순위권장 라이브러리
미니멀 · 정통Lucide
디자인 시스템 토큰화Phosphor
Tailwind 일관성Heroicons
도메인 다양성Tabler
변수 폰트 표현력Material Symbols
엔터프라이즈 톤Carbon Icons
통합 APIIconify
디자이너 도구Iconjar + Streamline
상업 라이선스 + 브랜드FontAwesome Pro
Radix UI 사용자Radix Icons

17장 · 라이선스 · 상업 사용 · 정리

17.1 라이선스 빠른 참조

라이브러리라이선스상업 사용재배포
LucideMITOKOK
HeroiconsMITOKOK
PhosphorMITOKOK
IconoirMITOKOK
TablerMITOKOK
Radix IconsMITOKOK
FontAwesome FreeCC BY 4.0OK출처 명시
FontAwesome ProCommercial라이선스 구매제한적
Material SymbolsApache 2.0OKOK
BoxIconsMITOKOK
Bootstrap IconsMITOKOK
OcticonsMITOKOK
Carbon IconsApache 2.0OKOK
Remix IconApache 2.0OKOK
Eva IconsMITOKOK
StreamlineCommercial라이선스 구매제한적
Iconjar 자체 라이브러리Commercial라이선스 구매제한적

17.2 출처 명시 의무

17.3 한국 · 일본의 출처 표기 관행

에필로그 — 아이콘은 디자인 토큰이다

2026년의 좋은 아이콘 라이브러리는 더 이상 "예쁜 그림 모음"이 아니다.

Lucide의 미니멀, Phosphor의 표현력, Tabler의 다양성, Material Symbols의 변수 폰트 4축, Iconify의 통합 — 각자 다른 답을 준다.

내가 만드는 제품의 정체성이 무엇이고, 그 정체성을 가장 잘 받쳐 줄 아이콘이 무엇인지. 이 글이 그 결정의 지도가 되었기를.

좋은 아이콘은 사용자에게 "이게 무엇이다"를 0.1초에 전달한다. 그 0.1초를 가볍게 보지 말자.

참고 / References

원문 보기: https://www.youngju.dev/blog/culture/2026-05-16-icon-libraries-designers-developers-2026-lucide-heroicons-phosphor-tabler-radix-material-symbols-iconify-deep-dive

댓글

아직 댓글이 없습니다.

로그인하면 댓글을 쓸 수 있습니다