# Heroicons

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

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

## 정의

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

## 주요 특징

- 292개의 손으로 제작된 아이콘
- Outline과 Solid 두 스타일
- Tailwind CSS와 완벽한 호환
- 24x24 그리드 시스템
- MIT 라이선스

## 핵심 원칙

- npm install @heroicons/react
- 번들 사이즈: 작고 최적화됨
- 292개 아이콘 (2가지 스타일)

## 컬러 시스템

outline(선)과 solid(채움) 두 변형. 용도에 따라 구분 사용

### 색상 역할

- outline: 인터페이스 아이콘 — currentColor stroke
- solid: 강조·active 상태 — currentColor fill

### 색상 제약

- outline/solid 혼용 시 일관성 기준 필요 (e.g. active=solid, default=outline)
- Tailwind 색상 클래스로 색 지정 — 직접 HEX 금지

### 다크모드 전략

Tailwind dark: prefix로 처리

### 대비 요구사항

solid는 배경 위 채워진 형태 — 작은 크기에서 더 선명

## 타이포그래피

- 폰트 성격: 아이콘 패키지 — 타이포그래피 해당 없음. Heroicons는 outline/solid 두 변형 제공 스타일
- 권장 폰트 수: 최대 0개
- 타입 스케일: 아이콘은 4px 배수 크기 권장 (16/20/24/32/40px)

### 타이포그래피 제약

- 아이콘 크기는 인접 텍스트 font-size의 1~1.5배 권장
- outline: 1.5, solid: 없음 stroke-width — 텍스트 굵기와 시각적 균형 맞추기

## 설계 제약

### 하면 안 되는 것

- 아이콘 스타일 혼용 금지 — 한 프로젝트에서 패키지 1~2개만
- 아이콘 단독 사용 금지 (레이블 없을 때) — aria-label 필수
- Heroicons 아이콘을 지나치게 크게 사용 금지 — Tailwind CSS 기반 프로젝트 최적화

### 반드시 포함할 것

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

### 모션 가이드

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

## 사용 사례

- Tailwind CSS 프로젝트
- Next.js 앱
- 미니멀 디자인 시스템

## 추천 프로젝트 유형

- Tailwind CSS 프로젝트
- Next.js·React 앱
- 미니멀 디자인 시스템

## 장단점

### 장점

- Tailwind CSS와 완벽 통합
- 아이콘 수는 적지만 품질 매우 높음
- Outline/Solid 두 스타일로 상황별 사용

### 단점·한계

- 아이콘 수(292개)가 다른 패키지보다 적음
- Tailwind 외 환경에서는 이점 감소

## 자주 묻는 질문

### Q1. Heroicons이란 무엇인가요?

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

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

Heroicons의 핵심 원칙은 npm install @heroicons/react, 번들 사이즈: 작고 최적화됨, 292개 아이콘 (2가지 스타일)입니다.

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

Heroicons은 Tailwind CSS 프로젝트, Next.js 앱, 미니멀 디자인 시스템, Tailwind CSS 프로젝트, Next.js·React 앱, 미니멀 디자인 시스템 등의 프로젝트에 적합합니다.

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

장점으로는 Tailwind CSS와 완벽 통합, 아이콘 수는 적지만 품질 매우 높음, Outline/Solid 두 스타일로 상황별 사용이 있습니다. 단점으로는 아이콘 수(292개)가 다른 패키지보다 적음, Tailwind 외 환경에서는 이점 감소이 있습니다.

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

outline(선)과 solid(채움) 두 변형. 용도에 따라 구분 사용 색상 역할은 outline: 인터페이스 아이콘 — currentColor stroke, solid: 강조·active 상태 — currentColor fill입니다. 주의사항: outline/solid 혼용 시 일관성 기준 필요 (e.g. active=solid, default=outline), Tailwind 색상 클래스로 색 지정 — 직접 HEX 금지.

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

Heroicons에는 아이콘 패키지 — 타이포그래피 해당 없음. Heroicons는 outline/solid 두 변형 제공 스타일 폰트가 적합합니다. 최대 0개 폰트 패밀리 사용을 권장합니다. 제약 사항: 아이콘 크기는 인접 텍스트 font-size의 1~1.5배 권장, outline: 1.5, solid: 없음 stroke-width — 텍스트 굵기와 시각적 균형 맞추기.

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

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

## 참고 디자인 토큰

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

### 색상

- primary: #06B6D4
- secondary: #0891B2
- accent: #22D3EE
- background: #FFFFFF
- surface: #F0FDFA
- text: #134E4A
- textSecondary: #5EEAD4
- border: #99F6E4

### 타이포그래피

- 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 6px / lg 8px / full 9999px
- shadow sm: 0 1px 3px rgba(0,0,0,0.1)
- shadow md: 0 4px 6px rgba(0,0,0,0.1)
- shadow lg: 0 10px 15px rgba(0,0,0,0.15)
- border: 1.5px solid #99F6E4

### 컴포넌트 형태

- button: rounded / hover lift / text none
- card: flat / hover lift
- input: outlined / focus ring
- badge: rounded / solid
- icon: heroicons / stroke 1.5 / size 22px
- layout: boxed / section normal
- animation: 150ms ease

## 관련 링크

### 관련 스타일

- [Lucide React](https://ui.buildersgate.com/styles/lucide-react)
- [Feather Icons](https://ui.buildersgate.com/styles/feather-icons)
- [Tabler Icons](https://ui.buildersgate.com/styles/tabler-icons)

---

HTML 버전: https://ui.buildersgate.com/styles/heroicons

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