# Tabler Icons — 디자인 스타일 가이드
## 기본 정보
- **ID**: tabler-icons
- **카테고리**: icon-package
## 설명
5,200개 이상의 픽셀 완벽한 오픈소스 SVG 아이콘입니다. 일관된 스타일과 높은 품질로 인기를 얻고 있습니다.
## 핵심 원칙
- npm install @tabler/icons-react
- 번들 사이즈: 트리 쉐이킹 지원
- 5,200+ 아이콘
## 주요 특징
- 5,200개 이상의 아이콘
- 완전히 무료 오픈소스
- 일관된 2px stroke
- 24x24 그리드 시스템
- 정기적인 업데이트
## 컬러 시스템 가이드
stroke 기반 consistent 아이콘. 2px stroke-width 통일로 UI 일관성 최고
### 색상 역할
- stroke: currentColor — 주변 텍스트 색 자동 상속
### 색상 제약 조건
- stroke-width 1~2.5 범위 유지
- 비슷한 크기 아이콘 간 stroke 두께 통일
### 다크모드 전략
currentColor 자동
### 대비 요구사항
stroke 기반, 소형 크기 주의
## 타이포그래피 가이드
- **폰트 성격**: 아이콘 패키지 — 타이포그래피 해당 없음. Tabler는 선 기반 consistent stroke 스타일
- **권장 폰트 수**: 최대 0개
- **타입 스케일**: 아이콘은 4px 배수 크기 권장 (16/20/24/32/40px)
### 타이포그래피 제약
- 아이콘 크기는 인접 텍스트 font-size의 1~1.5배 권장
- stroke-width 2 (기본) stroke-width — 텍스트 굵기와 시각적 균형 맞추기
## 하면 안 되는 것 (안티패턴)
- 아이콘 스타일 혼용 금지 — 한 프로젝트에서 패키지 1~2개만
- 아이콘 단독 사용 금지 (레이블 없을 때) — aria-label 필수
- Tabler 아이콘을 지나치게 크게 사용 금지 — 대시보드·관리 UI 최적화
## 반드시 포함해야 하는 것
- 일관된 크기 사용 (24px 기본 권장)
- 인터랙티브 아이콘에 tooltip 또는 레이블
- hover/active 상태 색상 피드백
## 모션 가이드
아이콘 자체 애니메이션 최소화. hover 시 opacity 변화 또는 scale 1.1 정도만.
## 사용 사례
- 대시보드·어드민 UI
- 스트로크 스타일 디자인
- 풍부한 아이콘이 필요한 SaaS
## 추천 프로젝트 유형
- 대시보드·어드민 UI
- SaaS 제품
- 아이콘 수 많이 필요한 프로젝트
## 장점
- 5,200개로 매우 풍부한 아이콘
- 완전 무료 오픈소스
- 정기 업데이트 활발
## 단점·한계
- Feather·Lucide 대비 약간 두꺼운 느낌
- 인지도가 아직 낮은 편
## 관련 스타일
- [lucide-react](https://ui.buildersgate.com/styles/lucide-react)
- [feather-icons](https://ui.buildersgate.com/styles/feather-icons)
- [heroicons](https://ui.buildersgate.com/styles/heroicons)
## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.
### 색상
- primary: #206BC4
- secondary: #1A5FB4
- accent: #4299E1
- background: #FCFCFC
- surface: #FFFFFF
- text: #182433
- textSecondary: #667085
- border: #D0D7DE
### 헤더
- background: linear-gradient(135deg, #206BC4 0%, #1A5FB4 100%)
- textColor: #FFFFFF
- accentColor: #4299E1
### 타이포그래피
- fontFamily: Inter, 'Noto Sans KR', system-ui, sans-serif
- headingWeight: 600
- bodyWeight: 400
- letterSpacing: -0.01em
### 스페이싱
- unit: 8px
- scale: 1
### 그림자 (Shadows)
- sm: 0 1px 2px rgba(0,0,0,0.06)
- md: 0 2px 4px rgba(0,0,0,0.1)
- lg: 0 4px 8px rgba(0,0,0,0.14)
- xl: 0 8px 16px rgba(0,0,0,0.18)
### Border Radius
- none: 0
- sm: 4px
- md: 8px
- lg: 12px
- full: 9999px
### 테두리 (Borders)
- width: 1px
- style: solid
- color: #D0D7DE
### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.2s ease
### 애니메이션
- duration: 200ms
- easing: ease
### 컴포넌트 토큰
- 버튼: shape=rounded / hoverEffect=lift / textTransform=none
- 카드: style=elevated / hoverEffect=lift
- 인풋: style=outlined / focusEffect=ring
- 배지: shape=rounded / style=solid
- 아이콘: package=tabler / strokeWidth=2 / defaultSize=24
### 레이아웃
- containerStyle: boxed
- sectionSpacing: normal
### 특수 효과
- glassmorphism: false
- gradientText: false
- animatedBackground: false
- scanlines: false
- noise: false
## 자주 묻는 질문 (FAQ)
### Q: Tabler Icons이란 무엇인가요?
A: 5,200개 이상의 픽셀 완벽한 오픈소스 SVG 아이콘입니다. 일관된 스타일과 높은 품질로 인기를 얻고 있습니다.
### Q: Tabler Icons의 핵심 디자인 원칙은 무엇인가요?
A: Tabler Icons의 핵심 원칙은 npm install @tabler/icons-react, 번들 사이즈: 트리 쉐이킹 지원, 5,200+ 아이콘입니다.
### Q: Tabler Icons은 어떤 프로젝트에 적합한가요?
A: Tabler Icons은 대시보드·어드민 UI, 스트로크 스타일 디자인, 풍부한 아이콘이 필요한 SaaS, 대시보드·어드민 UI, SaaS 제품, 아이콘 수 많이 필요한 프로젝트 등의 프로젝트에 적합합니다.
### Q: Tabler Icons의 장단점은 무엇인가요?
A: 장점으로는 5,200개로 매우 풍부한 아이콘, 완전 무료 오픈소스, 정기 업데이트 활발이 있습니다. 단점으로는 Feather·Lucide 대비 약간 두꺼운 느낌, 인지도가 아직 낮은 편이 있습니다.
### Q: Tabler Icons에서 색상은 어떻게 사용하나요?
A: stroke 기반 consistent 아이콘. 2px stroke-width 통일로 UI 일관성 최고 색상 역할은 stroke: currentColor — 주변 텍스트 색 자동 상속입니다. 주의사항: stroke-width 1~2.5 범위 유지, 비슷한 크기 아이콘 간 stroke 두께 통일.
### Q: Tabler Icons에 어울리는 폰트 스타일은 무엇인가요?
A: Tabler Icons에는 아이콘 패키지 — 타이포그래피 해당 없음. Tabler는 선 기반 consistent stroke 스타일 폰트가 적합합니다. 최대 0개 폰트 패밀리 사용을 권장합니다. 제약 사항: 아이콘 크기는 인접 텍스트 font-size의 1~1.5배 권장, stroke-width 2 (기본) stroke-width — 텍스트 굵기와 시각적 균형 맞추기.
### Q: Tabler Icons 디자인에서 하면 안 되는 것은 무엇인가요?
A: Tabler Icons에서 피해야 할 것: 아이콘 스타일 혼용 금지 — 한 프로젝트에서 패키지 1~2개만, 아이콘 단독 사용 금지 (레이블 없을 때) — aria-label 필수, Tabler 아이콘을 지나치게 크게 사용 금지 — 대시보드·관리 UI 최적화.
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=tabler-icons
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=tabler-icons&merged=true
Tabler Icons은 대시보드·어드민 UI, 스트로크 스타일 디자인, 풍부한 아이콘이 필요한 SaaS, 대시보드·어드민 UI, SaaS 제품, 아이콘 수 많이 필요한 프로젝트 등의 프로젝트에 적합합니다.
Tabler Icons의 장단점은 무엇인가요?
장점으로는 5,200개로 매우 풍부한 아이콘, 완전 무료 오픈소스, 정기 업데이트 활발이 있습니다. 단점으로는 Feather·Lucide 대비 약간 두꺼운 느낌, 인지도가 아직 낮은 편이 있습니다.
Tabler Icons에서 색상은 어떻게 사용하나요?
stroke 기반 consistent 아이콘. 2px stroke-width 통일로 UI 일관성 최고 색상 역할은 stroke: currentColor — 주변 텍스트 색 자동 상속입니다. 주의사항: stroke-width 1~2.5 범위 유지, 비슷한 크기 아이콘 간 stroke 두께 통일.
Tabler Icons에 어울리는 폰트 스타일은 무엇인가요?
Tabler Icons에는 아이콘 패키지 — 타이포그래피 해당 없음. Tabler는 선 기반 consistent stroke 스타일 폰트가 적합합니다. 최대 0개 폰트 패밀리 사용을 권장합니다. 제약 사항: 아이콘 크기는 인접 텍스트 font-size의 1~1.5배 권장, stroke-width 2 (기본) stroke-width — 텍스트 굵기와 시각적 균형 맞추기.
Tabler Icons 디자인에서 하면 안 되는 것은 무엇인가요?
Tabler Icons에서 피해야 할 것: 아이콘 스타일 혼용 금지 — 한 프로젝트에서 패키지 1~2개만, 아이콘 단독 사용 금지 (레이블 없을 때) — aria-label 필수, Tabler 아이콘을 지나치게 크게 사용 금지 — 대시보드·관리 UI 최적화.