세 가지 오픈소스 아이콘 라이브러리 비교: Lucide, Tabler, Phosphor
프론트엔드 개발에서 아이콘 선택은 단순한 미적 결정이 아니다. 유지보수 가능성, 라이선스 리스크, 번들 사이즈, 일관된 디자인 언어 — 모두 아이콘 라이브러리 하나에 달려 있다. Java 백엔드 개발자라도 팀 내 UI 컴포넌트 라이브러리를 선정하거나 프론트엔드 팀과 협업할 때 이 판단에 개입하는 경우가 많다. Lucide, Tabler Icons, Phosphor는 오픈소스 아이콘 세트 추천 스레드에서 항상 함께 거론되는 3대 라이브러리다. 세 라이브러리 모두 허용적 라이선스(permissive license)를 채택하고 있고, 활발히 유지보수되고 있으며, SVG 벡터를 나란히 비교해볼 수 있다.
라이브러리별 핵심 스펙 비교
세 라이브러리의 주요 수치와 특성을 정리하면 다음과 같다.
| 라이브러리 | 아이콘 수 | 라이선스 | 그리드 | 드로잉 방식 | 스타일 변형 |
|---|---|---|---|---|---|
| Lucide | 1,778 | ISC | 24×24 | 2px stroke, currentColor | 단일 스타일 (실험적: Lucide Lab 373개) |
| Tabler Icons | 6,143 | MIT | 24×24 | 2px stroke, currentColor | Outline + 1,087개 filled 변형 |
| Phosphor | 9,161 | MIT | 256×256 | Filled paths, currentColor | 6종 (Regular, Thin, Light, Bold, Fill, Duotone) |
라이선스 측면에서는 세 라이브러리 모두 상업 프로젝트에 자유롭게 사용할 수 있다. ISC는 MIT와 사실상 동등한 수준의 허용적 라이선스로, 저작권 고지만 유지하면 된다. 법무 검토가 까다로운 엔터프라이즈 환경에서도 세 라이브러리 모두 무리 없이 채택 가능하다.
드로잉 철학의 차이와 실무 선택 기준
Lucide와 Tabler는 동일한 철학을 공유한다. 24×24 그리드에 획(stroke) 기반으로 형태를 그리며, 기본 stroke width는 2px다. currentColor를 활용하기 때문에 CSS 한 줄로 색상을 제어할 수 있고, 다크 모드 전환이나 테마 적용이 매우 간단하다.
/* currentColor 덕분에 부모 color만 바꾸면 아이콘 색상이 따라온다 */
.icon-wrapper {
color: var(--primary-color);
}
Lucide는 Feather 아이콘 커뮤니티에서 파생되어 단순하고 일관된 단일 스타일만 제공한다. 실험적이거나 아직 검증되지 않은 아이콘은 Lucide Lab(373개)에 별도로 관리하여 메인 세트의 품질을 엄격하게 유지한다. 작은 규모의 프로젝트나 디자인 일관성이 최우선인 경우에 적합하다.
Tabler는 6,000개가 넘는 방대한 아이콘 수와 함께 outline/filled 두 가지 변형을 제공하면서도, Lucide와 동일한 24×24 stroke 기반 접근을 유지한다. 대형 어드민 대시보드처럼 다양한 아이콘이 필요한 B2B 제품에 특히 강점이 있다.
Phosphor는 256×256 그리드와 filled path 방식을 사용하며, 6종의 두께(weight) 변형을 제공한다는 점에서 근본적으로 다른 접근을 취한다. 브랜드 아이덴티티가 강한 소비자향(B2C) 제품이나 디자인 시스템에 다양한 표현 옵션이 필요할 때 유리하다.
<!-- Phosphor: Duotone 스타일로 시각적 깊이 표현 가능 -->
<ph-icon name="database" weight="duotone" size="32" />
정리
- Lucide: 단일 스타일, 엄격한 품질 관리, ISC 라이선스 — 소규모 프로젝트나 디자인 일관성이 최우선인 팀에 적합
- Tabler: 6,000개 이상의 풍부한 아이콘과 outline/filled 변형 — 대형 어드민·B2B 대시보드에 강점
- Phosphor: 256×256 그리드, 6종 두께 변형 — 표현의 다양성이 필요한 브랜드 중심 제품에 유리