# Lucide React — 디자인 스타일 가이드
## 기본 정보
- **ID**: lucide-react
- **카테고리**: icon-package
## 설명
Feather Icons의 커뮤니티 포크로, 깔끔하고 일관성 있는 디자인의 모던한 아이콘 세트입니다. 심플하고 미니멀한 스타일이 특징입니다.
## 핵심 원칙
- npm install lucide-react
- 번들 사이즈: 매우 가벼움
- 1,500+ 아이콘
## 주요 특징
- 1,500개 이상의 일관된 아이콘
- 매우 가볍고 최적화된 SVG
- 활발한 커뮤니티 업데이트
- 완벽한 TypeScript 지원
- 접근성을 고려한 디자인
## 컬러 시스템 가이드
Lucide 아이콘은 stroke 기반 — currentColor로 주변 텍스트 색 자동 상속
### 색상 역할
- stroke-color: currentColor 기본 — 별도 색 지정 없음
- interactive: primary color로 변경
### 색상 제약 조건
- fill 속성 사용 금지 (Lucide는 stroke only)
- stroke-width 1.5~2.5 범위 유지 — 이탈 시 시각적 불일치
### 다크모드 전략
currentColor로 자동 처리
### 대비 요구사항
배경 대비 stroke 두께가 가시성에 영향 — 작은 크기에서 stroke-width 높이기
## 타이포그래피 가이드
- **폰트 성격**: 아이콘 패키지 — 타이포그래피 해당 없음. Lucide는 정밀한 선 기반 (outlined) 스타일
- **권장 폰트 수**: 최대 0개
- **타입 스케일**: 아이콘은 4px 배수 크기 권장 (16/20/24/32/40px)
### 타이포그래피 제약
- 아이콘 크기는 인접 텍스트 font-size의 1~1.5배 권장
- stroke-width 2 stroke-width — 텍스트 굵기와 시각적 균형 맞추기
## 하면 안 되는 것 (안티패턴)
- 아이콘 스타일 혼용 금지 — 한 프로젝트에서 패키지 1~2개만
- 아이콘 단독 사용 금지 (레이블 없을 때) — aria-label 필수
- Lucide 아이콘을 지나치게 크게 사용 금지 — UI 인터페이스 범용 최적화
## 반드시 포함해야 하는 것
- 일관된 크기 사용 (24px 기본 권장)
- 인터랙티브 아이콘에 tooltip 또는 레이블
- hover/active 상태 색상 피드백
## 모션 가이드
아이콘 자체 애니메이션 최소화. hover 시 opacity 변화 또는 scale 1.1 정도만.
## 사용 사례
- 미니멀·모던 UI
- Tailwind 기반 프로젝트
- 다크모드 지원 앱
## 추천 프로젝트 유형
- 미니멀 UI
- Tailwind CSS 프로젝트
- Next.js·React 앱
## 장점
- 일관된 디자인 시스템
- 매우 가볍고 트리 쉐이킹 완벽 지원
- 활발한 커뮤니티
## 단점·한계
- Feather 대비 아이콘 수 더 많지만 여전히 제한적
- 매우 유사한 아이콘 간 구별 어려울 수 있음
## 관련 스타일
- [feather-icons](https://ui.buildersgate.com/styles/feather-icons)
- [heroicons](https://ui.buildersgate.com/styles/heroicons)
- [react-icons](https://ui.buildersgate.com/styles/react-icons)
## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.
### 색상
- primary: #F56565
- secondary: #FC8181
- accent: #FEB2B2
- background: #FFFFFF
- surface: #F7FAFC
- text: #1A202C
- textSecondary: #718096
- border: #E2E8F0
### 헤더
- background: linear-gradient(135deg, #F56565 0%, #FC8181 100%)
- textColor: #FFFFFF
- accentColor: #FEB2B2
### 타이포그래피
- fontFamily: Inter, 'Noto Sans KR', sans-serif
- headingWeight: 600
- bodyWeight: 400
- letterSpacing: 0
### 스페이싱
- unit: 8px
- scale: 1
### 그림자 (Shadows)
- sm: 0 1px 2px rgba(0,0,0,0.05)
- md: 0 4px 6px rgba(0,0,0,0.07)
- lg: 0 10px 15px rgba(0,0,0,0.1)
- xl: 0 20px 25px rgba(0,0,0,0.15)
### Border Radius
- none: 0
- sm: 4px
- md: 6px
- lg: 8px
- full: 9999px
### 테두리 (Borders)
- width: 1px
- style: solid
- color: #E2E8F0
### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.2s ease
### 애니메이션
- duration: 200ms
- easing: ease
### 컴포넌트 토큰
- 버튼: shape=rounded / hoverEffect=lift / textTransform=none
- 카드: style=flat / hoverEffect=lift
- 인풋: style=outlined / focusEffect=ring
- 배지: shape=rounded / style=subtle
- 아이콘: package=lucide / strokeWidth=1.5 / defaultSize=22
### 레이아웃
- containerStyle: boxed
- sectionSpacing: normal
### 특수 효과
- glassmorphism: false
- gradientText: false
- animatedBackground: false
- scanlines: false
- noise: false
## 자주 묻는 질문 (FAQ)
### Q: Lucide React이란 무엇인가요?
A: Feather Icons의 커뮤니티 포크로, 깔끔하고 일관성 있는 디자인의 모던한 아이콘 세트입니다. 심플하고 미니멀한 스타일이 특징입니다.
### Q: Lucide React의 핵심 디자인 원칙은 무엇인가요?
A: Lucide React의 핵심 원칙은 npm install lucide-react, 번들 사이즈: 매우 가벼움, 1,500+ 아이콘입니다.
### Q: Lucide React은 어떤 프로젝트에 적합한가요?
A: Lucide React은 미니멀·모던 UI, Tailwind 기반 프로젝트, 다크모드 지원 앱, 미니멀 UI, Tailwind CSS 프로젝트, Next.js·React 앱 등의 프로젝트에 적합합니다.
### Q: Lucide React의 장단점은 무엇인가요?
A: 장점으로는 일관된 디자인 시스템, 매우 가볍고 트리 쉐이킹 완벽 지원, 활발한 커뮤니티이 있습니다. 단점으로는 Feather 대비 아이콘 수 더 많지만 여전히 제한적, 매우 유사한 아이콘 간 구별 어려울 수 있음이 있습니다.
### Q: Lucide React에서 색상은 어떻게 사용하나요?
A: Lucide 아이콘은 stroke 기반 — currentColor로 주변 텍스트 색 자동 상속 색상 역할은 stroke-color: currentColor 기본 — 별도 색 지정 없음, interactive: primary color로 변경입니다. 주의사항: fill 속성 사용 금지 (Lucide는 stroke only), stroke-width 1.5~2.5 범위 유지 — 이탈 시 시각적 불일치.
### Q: Lucide React에 어울리는 폰트 스타일은 무엇인가요?
A: Lucide React에는 아이콘 패키지 — 타이포그래피 해당 없음. Lucide는 정밀한 선 기반 (outlined) 스타일 폰트가 적합합니다. 최대 0개 폰트 패밀리 사용을 권장합니다. 제약 사항: 아이콘 크기는 인접 텍스트 font-size의 1~1.5배 권장, stroke-width 2 stroke-width — 텍스트 굵기와 시각적 균형 맞추기.
### Q: Lucide React 디자인에서 하면 안 되는 것은 무엇인가요?
A: Lucide React에서 피해야 할 것: 아이콘 스타일 혼용 금지 — 한 프로젝트에서 패키지 1~2개만, 아이콘 단독 사용 금지 (레이블 없을 때) — aria-label 필수, Lucide 아이콘을 지나치게 크게 사용 금지 — UI 인터페이스 범용 최적화.
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=lucide-react
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=lucide-react&merged=true
Feather Icons의 커뮤니티 포크로, 깔끔하고 일관성 있는 디자인의 모던한 아이콘 세트입니다. 심플하고 미니멀한 스타일이 특징입니다.
#F56565
핵심 원칙
1
npm install lucide-react
2
번들 사이즈: 매우 가벼움
3
1,500+ 아이콘
주요 특징
1,500개 이상의 일관된 아이콘
매우 가볍고 최적화된 SVG
활발한 커뮤니티 업데이트
완벽한 TypeScript 지원
접근성을 고려한 디자인
장단점
장점
+일관된 디자인 시스템
+매우 가볍고 트리 쉐이킹 완벽 지원
+활발한 커뮤니티
단점 / 한계
−Feather 대비 아이콘 수 더 많지만 여전히 제한적
−매우 유사한 아이콘 간 구별 어려울 수 있음
적합한 사용처
사용 사례
미니멀·모던 UI
Tailwind 기반 프로젝트
다크모드 지원 앱
이런 프로젝트에 추천
미니멀 UITailwind CSS 프로젝트Next.js·React 앱
UI 컴포넌트 예제
이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.
UI 기본 아이콘
홈, 사용자, 검색 등 기본 UI 아이콘 - 20개
Home
User
Heart
Star
Search
Bell
Mail
Settings
Cart
Camera
File
Folder
Download
Upload
Trash
Edit
Save
Print
Share
Link
편집 & 액션
복사, 붙여넣기, 실행 취소 등 - 16개
Copy
Clipboard
Undo
Redo
Check
Close
Plus
Minus
Up
Down
Left
Right
ChevUp
ChevDown
ChevLeft
ChevRight
도형 & 날씨
다양한 도형과 날씨 아이콘 - 12개
Circle
Square
Triangle
Hexagon
Star
Moon
Sun
Cloud
Rain
Zap
WiFi
Bluetooth
미디어 & 재생
미디어 컨트롤 아이콘 - 8개
Battery
Volume
Play
Pause
Next
Previous
Music
Video
소셜 미디어 & 브랜드
인기 플랫폼 아이콘 - 8개
Facebook
Twitter
Instagram
YouTube
LinkedIn
GitHub
Chrome
Figma
커뮤니케이션
연락 및 일정 관련 아이콘 - 8개
Calendar
Clock
Location
Phone
Message
Email
Image
Camera
Lucide React 특징
✓1,500개 이상의 일관된 디자인 아이콘
✓Feather Icons의 커뮤니티 포크로 활발하게 업데이트
✓매우 가볍고 최적화된 SVG, 완벽한 TypeScript 지원
✓strokeWidth, size 등 커스터마이징 가능
자주 묻는 질문
Lucide React이란 무엇인가요?
Feather Icons의 커뮤니티 포크로, 깔끔하고 일관성 있는 디자인의 모던한 아이콘 세트입니다. 심플하고 미니멀한 스타일이 특징입니다.
Lucide React의 핵심 디자인 원칙은 무엇인가요?
Lucide React의 핵심 원칙은 npm install lucide-react, 번들 사이즈: 매우 가벼움, 1,500+ 아이콘입니다.
Lucide React은 어떤 프로젝트에 적합한가요?
Lucide React은 미니멀·모던 UI, Tailwind 기반 프로젝트, 다크모드 지원 앱, 미니멀 UI, Tailwind CSS 프로젝트, Next.js·React 앱 등의 프로젝트에 적합합니다.
Lucide React의 장단점은 무엇인가요?
장점으로는 일관된 디자인 시스템, 매우 가볍고 트리 쉐이킹 완벽 지원, 활발한 커뮤니티이 있습니다. 단점으로는 Feather 대비 아이콘 수 더 많지만 여전히 제한적, 매우 유사한 아이콘 간 구별 어려울 수 있음이 있습니다.
Lucide React에서 색상은 어떻게 사용하나요?
Lucide 아이콘은 stroke 기반 — currentColor로 주변 텍스트 색 자동 상속 색상 역할은 stroke-color: currentColor 기본 — 별도 색 지정 없음, interactive: primary color로 변경입니다. 주의사항: fill 속성 사용 금지 (Lucide는 stroke only), stroke-width 1.5~2.5 범위 유지 — 이탈 시 시각적 불일치.
Lucide React에 어울리는 폰트 스타일은 무엇인가요?
Lucide React에는 아이콘 패키지 — 타이포그래피 해당 없음. Lucide는 정밀한 선 기반 (outlined) 스타일 폰트가 적합합니다. 최대 0개 폰트 패밀리 사용을 권장합니다. 제약 사항: 아이콘 크기는 인접 텍스트 font-size의 1~1.5배 권장, stroke-width 2 stroke-width — 텍스트 굵기와 시각적 균형 맞추기.
Lucide React 디자인에서 하면 안 되는 것은 무엇인가요?
Lucide React에서 피해야 할 것: 아이콘 스타일 혼용 금지 — 한 프로젝트에서 패키지 1~2개만, 아이콘 단독 사용 금지 (레이블 없을 때) — aria-label 필수, Lucide 아이콘을 지나치게 크게 사용 금지 — UI 인터페이스 범용 최적화.