# Heroicons — 디자인 스타일 가이드 ## 기본 정보 - **ID**: heroicons - **카테고리**: icon-package ## 설명 Tailwind CSS 제작팀이 만든 아름다운 손으로 제작된 SVG 아이콘입니다. Outline과 Solid 두 가지 스타일을 제공합니다. ## 핵심 원칙 - npm install @heroicons/react - 번들 사이즈: 작고 최적화됨 - 292개 아이콘 (2가지 스타일) ## 주요 특징 - 292개의 손으로 제작된 아이콘 - Outline과 Solid 두 스타일 - Tailwind CSS와 완벽한 호환 - 24x24 그리드 시스템 - MIT 라이선스 ## 컬러 시스템 가이드 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 외 환경에서는 이점 감소 ## 관련 스타일 - [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) ## 참고 구현 예시 (디자인 토큰) > 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요. ### 색상 - primary: #06B6D4 - secondary: #0891B2 - accent: #22D3EE - background: #FFFFFF - surface: #F0FDFA - text: #134E4A - textSecondary: #5EEAD4 - border: #99F6E4 ### 헤더 - background: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%) - textColor: #FFFFFF - accentColor: #22D3EE ### 타이포그래피 - fontFamily: Inter, 'Noto Sans KR', system-ui, sans-serif - headingWeight: 700 - bodyWeight: 400 - letterSpacing: -0.01em ### 스페이싱 - unit: 8px - scale: 1 ### 그림자 (Shadows) - sm: 0 1px 3px rgba(0,0,0,0.1) - md: 0 4px 6px rgba(0,0,0,0.1) - lg: 0 10px 15px rgba(0,0,0,0.15) - xl: 0 20px 25px rgba(0,0,0,0.2) ### Border Radius - none: 0 - sm: 4px - md: 6px - lg: 8px - full: 9999px ### 테두리 (Borders) - width: 1.5px - style: solid - color: #99F6E4 ### 이펙트 - blur: 0px - opacity: 1 - transition: all 0.15s ease ### 애니메이션 - duration: 150ms - easing: ease ### 컴포넌트 토큰 - 버튼: shape=rounded / hoverEffect=lift / textTransform=none - 카드: style=flat / hoverEffect=lift - 인풋: style=outlined / focusEffect=ring - 배지: shape=rounded / style=solid - 아이콘: package=heroicons / strokeWidth=1.5 / defaultSize=22 ### 레이아웃 - containerStyle: boxed - sectionSpacing: normal ### 특수 효과 - glassmorphism: false - gradientText: false - animatedBackground: false - scanlines: false - noise: false ## 자주 묻는 질문 (FAQ) ### Q: Heroicons이란 무엇인가요? A: Tailwind CSS 제작팀이 만든 아름다운 손으로 제작된 SVG 아이콘입니다. Outline과 Solid 두 가지 스타일을 제공합니다. ### Q: Heroicons의 핵심 디자인 원칙은 무엇인가요? A: Heroicons의 핵심 원칙은 npm install @heroicons/react, 번들 사이즈: 작고 최적화됨, 292개 아이콘 (2가지 스타일)입니다. ### Q: Heroicons은 어떤 프로젝트에 적합한가요? A: Heroicons은 Tailwind CSS 프로젝트, Next.js 앱, 미니멀 디자인 시스템, Tailwind CSS 프로젝트, Next.js·React 앱, 미니멀 디자인 시스템 등의 프로젝트에 적합합니다. ### Q: Heroicons의 장단점은 무엇인가요? A: 장점으로는 Tailwind CSS와 완벽 통합, 아이콘 수는 적지만 품질 매우 높음, Outline/Solid 두 스타일로 상황별 사용이 있습니다. 단점으로는 아이콘 수(292개)가 다른 패키지보다 적음, Tailwind 외 환경에서는 이점 감소이 있습니다. ### Q: Heroicons에서 색상은 어떻게 사용하나요? A: outline(선)과 solid(채움) 두 변형. 용도에 따라 구분 사용 색상 역할은 outline: 인터페이스 아이콘 — currentColor stroke, solid: 강조·active 상태 — currentColor fill입니다. 주의사항: outline/solid 혼용 시 일관성 기준 필요 (e.g. active=solid, default=outline), Tailwind 색상 클래스로 색 지정 — 직접 HEX 금지. ### Q: Heroicons에 어울리는 폰트 스타일은 무엇인가요? A: Heroicons에는 아이콘 패키지 — 타이포그래피 해당 없음. Heroicons는 outline/solid 두 변형 제공 스타일 폰트가 적합합니다. 최대 0개 폰트 패밀리 사용을 권장합니다. 제약 사항: 아이콘 크기는 인접 텍스트 font-size의 1~1.5배 권장, outline: 1.5, solid: 없음 stroke-width — 텍스트 굵기와 시각적 균형 맞추기. ### Q: Heroicons 디자인에서 하면 안 되는 것은 무엇인가요? A: Heroicons에서 피해야 할 것: 아이콘 스타일 혼용 금지 — 한 프로젝트에서 패키지 1~2개만, 아이콘 단독 사용 금지 (레이블 없을 때) — aria-label 필수, Heroicons 아이콘을 지나치게 크게 사용 금지 — Tailwind CSS 기반 프로젝트 최적화. ## API 엔드포인트 - 스타일 상세: https://ui.buildersgate.com/api/styles?id=heroicons - 디자인 토큰: https://ui.buildersgate.com/api/themes?id=heroicons&merged=true

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

Heroicons

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

#06B6D4

핵심 원칙

npm install @heroicons/react

번들 사이즈: 작고 최적화됨

292개 아이콘 (2가지 스타일)

주요 특징

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

장단점

장점

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

단점 / 한계

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

적합한 사용처

사용 사례

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

이런 프로젝트에 추천

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

UI 컴포넌트 예제

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

Outline 스타일 - UI 기본

24x24 아웃라인 아이콘 - 20개

Home

User

Heart

Star

Bell

Mail

Settings

Cart

Camera

Document

Folder

Download

Upload

Trash

Edit

Check

Plus

Minus

Solid 스타일

24x24 솔리드 아이콘 - 9개

Home

Heart

Star

Bell

Cart

Check

Warning

Info

Error

화살표 & 방향

방향 관련 아이콘 - 4개

Down

Left

Right

커뮤니케이션

일정, 연락 관련 아이콘 - 5개

Calendar

Clock

Location

Phone

Chat

날씨 & 시스템

날씨, 네트워크 관련 - 6개

Sun

Moon

Cloud

Bolt

WiFi

Signal

미디어 재생

미디어 컨트롤 - 9개

Play

Pause

Forward

Backward

Volume

Photo

Video

Music

Film

사용자 & 보안

사용자 관리 및 보안 - 8개

Group

Profile

Users

Lock

Shield

Key

Fingerprint

Heroicons 특징

✓Tailwind CSS 팀이 손으로 직접 제작한 292개의 아이콘
✓24x24 Outline과 Solid 두 가지 스타일 제공
✓Tailwind CSS와 완벽하게 호환되는 디자인
✓MIT 라이선스로 무료 사용 가능

자주 묻는 질문

Heroicons이란 무엇인가요?

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

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

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

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

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

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

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

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

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

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

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

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

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