# React Icons — 디자인 스타일 가이드

## 기본 정보
- **ID**: react-icons
- **카테고리**: icon-package

## 설명
ES6 imports를 통해 Font Awesome, Material Design, Feather 등 다양한 아이콘 라이브러리를 하나의 패키지로 사용할 수 있는 가장 인기있는 React 아이콘 라이브러리입니다.

## 핵심 원칙
- npm install react-icons
- 번들 사이즈: 필요한 아이콘만 import
- 50,000+ 아이콘

## 주요 특징
- 50,000개 이상의 아이콘 제공
- 20개 이상의 아이콘 세트 통합
- 트리 쉐이킹으로 번들 사이즈 최적화
- SVG 기반으로 무한 확장 가능
- TypeScript 지원

## 컬러 시스템 가이드
다양한 원본 아이콘 패키지를 React로 통합. 색상 시스템은 각 원본 패키지 규칙 따름

### 색상 역할
- icon-default: currentColor 사용 — 텍스트 색 자동 상속
- icon-colored: 브랜드 아이콘(로고 등)만 원본 색 유지

### 색상 제약 조건
- currentColor 사용 권장 — fill/stroke 직접 지정 최소화
- 여러 패키지 동시 사용 시 시각적 일관성 저하 주의

### 다크모드 전략
currentColor 사용 시 자동 다크모드 대응

### 대비 요구사항
텍스트와 동일 대비 기준 적용

## 타이포그래피 가이드
- **폰트 성격**: 아이콘 패키지 — 타이포그래피 해당 없음. react-icons는 멀티 라이브러리 통합 스타일
- **권장 폰트 수**: 최대 0개
- **타입 스케일**: 아이콘은 4px 배수 크기 권장 (16/20/24/32/40px)

### 타이포그래피 제약
- 아이콘 크기는 인접 텍스트 font-size의 1~1.5배 권장
- 라이브러리별 상이 stroke-width — 텍스트 굵기와 시각적 균형 맞추기

## 하면 안 되는 것 (안티패턴)
- 아이콘 스타일 혼용 금지 — 한 프로젝트에서 패키지 1~2개만
- 아이콘 단독 사용 금지 (레이블 없을 때) — aria-label 필수
- react-icons 아이콘을 지나치게 크게 사용 금지 — React 프로젝트 범용 최적화

## 반드시 포함해야 하는 것
- 일관된 크기 사용 (24px 기본 권장)
- 인터랙티브 아이콘에 tooltip 또는 레이블
- hover/active 상태 색상 피드백

## 모션 가이드
아이콘 자체 애니메이션 최소화. hover 시 opacity 변화 또는 scale 1.1 정도만.

## 사용 사례
- 아이콘 세트를 아직 결정하지 못한 프로젝트
- 여러 아이콘 세트를 혼용하는 프로젝트

## 추천 프로젝트 유형
- 다양한 아이콘 세트 혼용
- 빠른 프로토타입
- 아이콘 세트 미결정 프로젝트

## 장점
- 50,000개 이상의 방대한 아이콘 통합
- 하나의 패키지로 여러 스타일 사용 가능

## 단점·한계
- 아이콘 세트 간 스타일 불일치 가능
- 번들 사이즈 관리 필요

## 관련 스타일
- [lucide-react](https://ui.buildersgate.com/styles/lucide-react)
- [heroicons](https://ui.buildersgate.com/styles/heroicons)
- [phosphor-icons](https://ui.buildersgate.com/styles/phosphor-icons)
- [feather-icons](https://ui.buildersgate.com/styles/feather-icons)

## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.

### 색상
- primary: #E91E63
- secondary: #F50057
- accent: #FF4081
- background: #FAFAFA
- surface: #FFFFFF
- text: #212121
- textSecondary: #757575
- border: #E0E0E0

### 헤더
- background: linear-gradient(135deg, #E91E63 0%, #F50057 100%)
- textColor: #FFFFFF
- accentColor: #FF4081

### 타이포그래피
- fontFamily: Inter, 'Noto Sans KR', system-ui, sans-serif
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: 0.01em

### 스페이싱
- unit: 8px
- scale: 1

### 그림자 (Shadows)
- sm: 0 2px 4px rgba(0,0,0,0.1)
- md: 0 4px 8px rgba(0,0,0,0.15)
- lg: 0 8px 16px rgba(0,0,0,0.2)
- xl: 0 16px 32px rgba(0,0,0,0.25)

### Border Radius
- none: 0
- sm: 4px
- md: 8px
- lg: 12px
- full: 9999px

### 테두리 (Borders)
- width: 1px
- style: solid
- color: #E0E0E0

### 이펙트
- 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=lucide / strokeWidth=2 / defaultSize=24

### 레이아웃
- containerStyle: boxed
- sectionSpacing: normal

### 특수 효과
- glassmorphism: false
- gradientText: true
- animatedBackground: false
- scanlines: false
- noise: false

## 자주 묻는 질문 (FAQ)

### Q: React Icons이란 무엇인가요?
A: ES6 imports를 통해 Font Awesome, Material Design, Feather 등 다양한 아이콘 라이브러리를 하나의 패키지로 사용할 수 있는 가장 인기있는 React 아이콘 라이브러리입니다.

### Q: React Icons의 핵심 디자인 원칙은 무엇인가요?
A: React Icons의 핵심 원칙은 npm install react-icons, 번들 사이즈: 필요한 아이콘만 import, 50,000+ 아이콘입니다.

### Q: React Icons은 어떤 프로젝트에 적합한가요?
A: React Icons은 아이콘 세트를 아직 결정하지 못한 프로젝트, 여러 아이콘 세트를 혼용하는 프로젝트, 다양한 아이콘 세트 혼용, 빠른 프로토타입, 아이콘 세트 미결정 프로젝트 등의 프로젝트에 적합합니다.

### Q: React Icons의 장단점은 무엇인가요?
A: 장점으로는 50,000개 이상의 방대한 아이콘 통합, 하나의 패키지로 여러 스타일 사용 가능이 있습니다. 단점으로는 아이콘 세트 간 스타일 불일치 가능, 번들 사이즈 관리 필요이 있습니다.

### Q: React Icons에서 색상은 어떻게 사용하나요?
A: 다양한 원본 아이콘 패키지를 React로 통합. 색상 시스템은 각 원본 패키지 규칙 따름 색상 역할은 icon-default: currentColor 사용 — 텍스트 색 자동 상속, icon-colored: 브랜드 아이콘(로고 등)만 원본 색 유지입니다. 주의사항: currentColor 사용 권장 — fill/stroke 직접 지정 최소화, 여러 패키지 동시 사용 시 시각적 일관성 저하 주의.

### Q: React Icons에 어울리는 폰트 스타일은 무엇인가요?
A: React Icons에는 아이콘 패키지 — 타이포그래피 해당 없음. react-icons는 멀티 라이브러리 통합 스타일 폰트가 적합합니다. 최대 0개 폰트 패밀리 사용을 권장합니다. 제약 사항: 아이콘 크기는 인접 텍스트 font-size의 1~1.5배 권장, 라이브러리별 상이 stroke-width — 텍스트 굵기와 시각적 균형 맞추기.

### Q: React Icons 디자인에서 하면 안 되는 것은 무엇인가요?
A: React Icons에서 피해야 할 것: 아이콘 스타일 혼용 금지 — 한 프로젝트에서 패키지 1~2개만, 아이콘 단독 사용 금지 (레이블 없을 때) — aria-label 필수, react-icons 아이콘을 지나치게 크게 사용 금지 — React 프로젝트 범용 최적화.

## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=react-icons
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=react-icons&merged=true

이 페이지 주소를 AI에게 보여주고 "디자인 시스템 문서를 만들어줘"라고 해보세요.

← 홈으로 돌아가기

React Icons

ES6 imports를 통해 Font Awesome, Material Design, Feather 등 다양한 아이콘 라이브러리를 하나의 패키지로 사용할 수 있는 가장 인기있는 React 아이콘 라이브러리입니다.

#E91E63

핵심 원칙

1

npm install react-icons

2

번들 사이즈: 필요한 아이콘만 import

3

50,000+ 아이콘

주요 특징

  • 50,000개 이상의 아이콘 제공
  • 20개 이상의 아이콘 세트 통합
  • 트리 쉐이킹으로 번들 사이즈 최적화
  • SVG 기반으로 무한 확장 가능
  • TypeScript 지원

장단점

장점

  • +50,000개 이상의 방대한 아이콘 통합
  • +하나의 패키지로 여러 스타일 사용 가능

단점 / 한계

  • −아이콘 세트 간 스타일 불일치 가능
  • −번들 사이즈 관리 필요

적합한 사용처

사용 사례

  • 아이콘 세트를 아직 결정하지 못한 프로젝트
  • 여러 아이콘 세트를 혼용하는 프로젝트

이런 프로젝트에 추천

다양한 아이콘 세트 혼용빠른 프로토타입아이콘 세트 미결정 프로젝트

UI 컴포넌트 예제

이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.

Font Awesome Icons (FA)

가장 인기있는 Font Awesome 아이콘 세트 - 30개 샘플

Home
User
Heart
Star
Search
Bell
Envelope
Cog
Cart
Camera
Music
Video
Image
File
Folder
Download
Upload
Trash
Edit
Pencil
Save
Print
Share
Link
Copy
Cut
Paste
Undo
Redo
Check
Times
Plus
Minus
Up
Down
Left

Material Design Icons (MD)

Google Material Design 아이콘 - 30개 샘플

Dashboard
Analytics
Bar Chart
Pie Chart
Timeline
Trending
Chart
Insert
Settings
Notification
Message
Email
Phone
Location
Calendar
Schedule
Time
Alarm
Person
People
Group
Contacts
Account
Face
Verified
Security
Lock
Key

Ionicons (IO)

Ionic 프레임워크 아이콘 - 소셜 & 기타 18개 샘플

Facebook
Twitter
Instagram
YouTube
LinkedIn
GitHub
Google
Apple
Bitcoin
Cloud
Sunny
Moon
Rainy
Snow
Storm
Flash
WiFi
Bluetooth

BoxIcons (BI)

심플하고 모던한 BoxIcons - 10개 샘플

Home
User
Heart
Star
Search
Bell
Mail
Settings
Cart
Camera

Ant Design Icons (AI)

Ant Design 아웃라인 아이콘 - 10개 샘플

Heart
Star
Home
User
Shopping
Camera
File
Folder
Cloud
Setting

Bootstrap Icons (BS)

Bootstrap 공식 아이콘 - 10개 샘플

House
Person
Heart
Star
Search
Bell
Mail
Gear
Cart
Camera

React Icons 특징

  • ✓50,000개 이상의 아이콘을 하나의 패키지로 제공
  • ✓Font Awesome, Material Design, Ionicons, BoxIcons 등 20개 이상의 라이브러리 통합
  • ✓트리 쉐이킹을 통한 최적화 - 사용하는 아이콘만 번들에 포함
  • ✓TypeScript 완벽 지원 및 SVG 기반으로 무한 확장 가능

자주 묻는 질문

React Icons이란 무엇인가요?
ES6 imports를 통해 Font Awesome, Material Design, Feather 등 다양한 아이콘 라이브러리를 하나의 패키지로 사용할 수 있는 가장 인기있는 React 아이콘 라이브러리입니다.
React Icons의 핵심 디자인 원칙은 무엇인가요?
React Icons의 핵심 원칙은 npm install react-icons, 번들 사이즈: 필요한 아이콘만 import, 50,000+ 아이콘입니다.
React Icons은 어떤 프로젝트에 적합한가요?
React Icons은 아이콘 세트를 아직 결정하지 못한 프로젝트, 여러 아이콘 세트를 혼용하는 프로젝트, 다양한 아이콘 세트 혼용, 빠른 프로토타입, 아이콘 세트 미결정 프로젝트 등의 프로젝트에 적합합니다.
React Icons의 장단점은 무엇인가요?
장점으로는 50,000개 이상의 방대한 아이콘 통합, 하나의 패키지로 여러 스타일 사용 가능이 있습니다. 단점으로는 아이콘 세트 간 스타일 불일치 가능, 번들 사이즈 관리 필요이 있습니다.
React Icons에서 색상은 어떻게 사용하나요?
다양한 원본 아이콘 패키지를 React로 통합. 색상 시스템은 각 원본 패키지 규칙 따름 색상 역할은 icon-default: currentColor 사용 — 텍스트 색 자동 상속, icon-colored: 브랜드 아이콘(로고 등)만 원본 색 유지입니다. 주의사항: currentColor 사용 권장 — fill/stroke 직접 지정 최소화, 여러 패키지 동시 사용 시 시각적 일관성 저하 주의.
React Icons에 어울리는 폰트 스타일은 무엇인가요?
React Icons에는 아이콘 패키지 — 타이포그래피 해당 없음. react-icons는 멀티 라이브러리 통합 스타일 폰트가 적합합니다. 최대 0개 폰트 패밀리 사용을 권장합니다. 제약 사항: 아이콘 크기는 인접 텍스트 font-size의 1~1.5배 권장, 라이브러리별 상이 stroke-width — 텍스트 굵기와 시각적 균형 맞추기.
React Icons 디자인에서 하면 안 되는 것은 무엇인가요?
React Icons에서 피해야 할 것: 아이콘 스타일 혼용 금지 — 한 프로젝트에서 패키지 1~2개만, 아이콘 단독 사용 금지 (레이블 없을 때) — aria-label 필수, react-icons 아이콘을 지나치게 크게 사용 금지 — React 프로젝트 범용 최적화.

관련 스타일 탐색

Lucide React

Feather Icons의 커뮤니티 포크로, 깔끔하고 일관성 있는 디자인의 모던한 아이콘 세트입니다. 심플하고 미니멀한 스타일이 특징입니다.

Heroicons

Tailwind CSS 제작팀이 만든 아름다운 손으로 제작된 SVG 아이콘입니다. Outline과 Solid 두 가지 스타일을 제공합니다.

Phosphor Icons

유연하고 다양한 스타일을 제공하는 아이콘 패밀리입니다. 6가지 다른 무게(weight)로 동일한 아이콘을 표현할 수 있습니다.

Feather Icons

심플하고 아름다운 오픈소스 아이콘입니다. 미니멀한 디자인과 일관성 있는 스타일로 유명합니다.