# React Icons

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

- 층: 아카이브 (아이콘 패키지)
- ID: react-icons
- 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/react-icons

## 정의

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

## 주요 특징

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

## 핵심 원칙

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

## 컬러 시스템

다양한 원본 아이콘 패키지를 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개 이상의 방대한 아이콘 통합
- 하나의 패키지로 여러 스타일 사용 가능

### 단점·한계

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

## 자주 묻는 질문

### Q1. React Icons이란 무엇인가요?

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

### Q2. React Icons의 핵심 디자인 원칙은 무엇인가요?

React Icons의 핵심 원칙은 npm install react-icons, 번들 사이즈: 필요한 아이콘만 import, 50,000+ 아이콘입니다.

### Q3. React Icons은 어떤 프로젝트에 적합한가요?

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

### Q4. React Icons의 장단점은 무엇인가요?

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

### Q5. React Icons에서 색상은 어떻게 사용하나요?

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

### Q6. React Icons에 어울리는 폰트 스타일은 무엇인가요?

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

### Q7. React Icons 디자인에서 하면 안 되는 것은 무엇인가요?

React Icons에서 피해야 할 것: 아이콘 스타일 혼용 금지 — 한 프로젝트에서 패키지 1~2개만, 아이콘 단독 사용 금지 (레이블 없을 때) — aria-label 필수, react-icons 아이콘을 지나치게 크게 사용 금지 — React 프로젝트 범용 최적화.

## 참고 디자인 토큰

> 아래 토큰은 이 스타일의 참고 구현 예시다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템·타이포그래피·설계 제약은 지킨다.

### 색상

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

### 타이포그래피

- fontFamily: Inter, 'Noto Sans KR', system-ui, sans-serif
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: 0.01em

### 간격·반경·그림자·테두리

- spacing: unit 8px × scale 1
- borderRadius: sm 4px / md 8px / lg 12px / full 9999px
- shadow sm: 0 2px 4px rgba(0,0,0,0.1)
- shadow md: 0 4px 8px rgba(0,0,0,0.15)
- shadow lg: 0 8px 16px rgba(0,0,0,0.2)
- border: 1px solid #E0E0E0

### 컴포넌트 형태

- button: rounded / hover lift / text none
- card: elevated / hover lift
- input: outlined / focus ring
- badge: rounded / solid
- icon: lucide / stroke 2 / size 24px
- layout: boxed / section normal
- animation: 200ms ease
- specialEffects: gradientText

## 관련 링크

### 관련 스타일

- [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)

---

HTML 버전: https://ui.buildersgate.com/styles/react-icons

이 문서는 https://ui.buildersgate.com/styles/react-icons.md 로 제공됩니다. 전체 목록은 https://ui.buildersgate.com/llms.txt 를 참고하세요.