Phosphor · Lucide · Tabler 3종 표준과 사용 규칙입니다. 이모지는 아이콘 대용으로 사용하지 않습니다.
| 라이브러리 | 역할 | 규칙 |
|---|---|---|
| Phosphor (@phosphor-icons/react) | 기본 | regular 기본, 강조/활성은 duotone·fill. 서버 컴포넌트는 /dist/ssr |
| Lucide (lucide-react) | shadcn 내장 공존 | 직접 쓸 땐 strokeWidth={1.5}로 Phosphor 굵기에 맞춤 |
| Tabler (@tabler/icons-react) | 백업 | Phosphor에 없는 특수 아이콘만 |
regular이 기본값, 강조·활성 상태에는 duotone 또는 fill을 사용합니다.
thinlightregularboldfillduotone같은 개념(별 아이콘)을 세 라이브러리로 그렸을 때의 굵기·형태 차이입니다.
Phosphor StarLucide StarTabler IconStar16 · 20 · 24px 세 단계를 기준으로 컨텍스트에 맞게 고릅니다.
16px20px24px클라이언트 컴포넌트와 서버 컴포넌트에서 import 경로가 다릅니다.
import { HeartIcon } from "@phosphor-icons/react";
export function LikeButton() {
return <HeartIcon weight="regular" />;
}import { HeartIcon } from "@phosphor-icons/react/dist/ssr";
export function LikeIcon() {
return <HeartIcon weight="regular" />;
}Phosphor · Lucide · Tabler 표준 3종에 Heroicons · Radix Icons · Akar Icons를 더해 같은 의미의 아이콘 8개(Home·Search·Bell·Settings·User·Star·Heart·Trash)로 나란히 비교합니다. 뒤 3종은 표준이 아니라 비교 참고용입니다.
@phosphor-icons/react기본 표준 — regular 기본, 강조/활성은 duotone·fill.
lucide-reactshadcn/ui 내장 의존성 — 원본 컴포넌트 유지 목적으로 표준 허용.
@tabler/icons-react4000+ 아이콘, IconX 네이밍 — Phosphor에 없는 아이콘의 백업 표준.
@heroicons/react표준 아님 — 비교 참고용Tailwind 팀 제작. outline/solid 두 세트.
@radix-ui/react-icons표준 아님 — 비교 참고용15px 고정 그리드 — 다른 라이브러리와 시각 크기가 어긋나 표준에서 제외됨.
akar-icons표준 아님 — 비교 참고용라운드·미니멀 스트로크 스타일.