# Ionicons — 디자인 스타일 가이드
## 기본 정보
- **ID**: ionicons
- **카테고리**: icon-package
## 설명
Ionic 프레임워크를 위해 제작된 프리미엄 아이콘 세트입니다. 모바일 앱에 최적화되어 있으며 iOS와 Material Design 스타일을 모두 지원합니다.
## 핵심 원칙
- npm install ionicons
- 번들 사이즈: 선택적 로딩
- 1,300+ 아이콘
## 주요 특징
- 1,300개 이상의 아이콘
- iOS와 Material Design 스타일
- 모바일 앱 최적화
- 웹 컴포넌트 지원
- 완전 무료 오픈소스
## 컬러 시스템 가이드
iOS/Android 플랫폼별 스타일 제공. 플랫폼 맥락에 맞는 변형 선택
### 색상 역할
- ios variant: 얇은 선 — iOS 느낌
- md variant: 채워진 형태 — Android Material 느낌
- outline variant: 범용 선 스타일
### 색상 제약 조건
- ios/md 변형을 한 프로젝트에 혼용 금지 — 플랫폼 일관성 유지
- 웹 프로젝트에서는 outline variant 권장
### 다크모드 전략
currentColor 자동
### 대비 요구사항
모바일 소형 화면 가시성 검증 필수
## 타이포그래피 가이드
- **폰트 성격**: 아이콘 패키지 — 타이포그래피 해당 없음. Ionicons는 ios/md/outline 3종 변형 스타일
- **권장 폰트 수**: 최대 0개
- **타입 스케일**: 아이콘은 4px 배수 크기 권장 (16/20/24/32/40px)
### 타이포그래피 제약
- 아이콘 크기는 인접 텍스트 font-size의 1~1.5배 권장
- 변형별 상이 stroke-width — 텍스트 굵기와 시각적 균형 맞추기
## 하면 안 되는 것 (안티패턴)
- 아이콘 스타일 혼용 금지 — 한 프로젝트에서 패키지 1~2개만
- 아이콘 단독 사용 금지 (레이블 없을 때) — aria-label 필수
- Ionicons 아이콘을 지나치게 크게 사용 금지 — Ionic 프레임워크 모바일 앱 최적화
## 반드시 포함해야 하는 것
- 일관된 크기 사용 (24px 기본 권장)
- 인터랙티브 아이콘에 tooltip 또는 레이블
- hover/active 상태 색상 피드백
## 모션 가이드
아이콘 자체 애니메이션 최소화. hover 시 opacity 변화 또는 scale 1.1 정도만.
## 사용 사례
- Ionic 기반 하이브리드 앱
- iOS·Android 크로스 플랫폼
- 모바일 우선 웹앱
## 추천 프로젝트 유형
- Ionic 하이브리드 앱
- 크로스 플랫폼 모바일 앱
- 모바일 우선 웹앱
## 장점
- iOS·Android 두 스타일 동시 지원
- Ionic 완벽 통합
- 모바일 UX에 최적화
## 단점·한계
- Ionic 외 환경에서 이점 감소
- 아이콘 수 비교적 적음
- 업데이트 빈도 불규칙
## 관련 스타일
- [lucide-react](https://ui.buildersgate.com/styles/lucide-react)
- [react-icons](https://ui.buildersgate.com/styles/react-icons)
- [heroicons](https://ui.buildersgate.com/styles/heroicons)
## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.
### 색상
- primary: #3880FF
- secondary: #0054E9
- accent: #74C0FC
- background: #FFFFFF
- surface: #F4F5F8
- text: #000000
- textSecondary: #92949C
- border: #D7D8DA
### 헤더
- background: linear-gradient(135deg, #3880FF 0%, #0054E9 100%)
- textColor: #FFFFFF
- accentColor: #74C0FC
### 타이포그래피
- fontFamily: -apple-system, BlinkMacSystemFont, 'Noto Sans KR', sans-serif
- headingWeight: 600
- bodyWeight: 400
- letterSpacing: 0
### 스페이싱
- 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: 16px
- full: 9999px
### 테두리 (Borders)
- width: 1px
- style: solid
- color: #D7D8DA
### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.3s ease
### 애니메이션
- duration: 300ms
- 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: false
- animatedBackground: false
- scanlines: false
- noise: false
## 자주 묻는 질문 (FAQ)
### Q: Ionicons이란 무엇인가요?
A: Ionic 프레임워크를 위해 제작된 프리미엄 아이콘 세트입니다. 모바일 앱에 최적화되어 있으며 iOS와 Material Design 스타일을 모두 지원합니다.
### Q: Ionicons의 핵심 디자인 원칙은 무엇인가요?
A: Ionicons의 핵심 원칙은 npm install ionicons, 번들 사이즈: 선택적 로딩, 1,300+ 아이콘입니다.
### Q: Ionicons은 어떤 프로젝트에 적합한가요?
A: Ionicons은 Ionic 기반 하이브리드 앱, iOS·Android 크로스 플랫폼, 모바일 우선 웹앱, Ionic 하이브리드 앱, 크로스 플랫폼 모바일 앱, 모바일 우선 웹앱 등의 프로젝트에 적합합니다.
### Q: Ionicons의 장단점은 무엇인가요?
A: 장점으로는 iOS·Android 두 스타일 동시 지원, Ionic 완벽 통합, 모바일 UX에 최적화이 있습니다. 단점으로는 Ionic 외 환경에서 이점 감소, 아이콘 수 비교적 적음, 업데이트 빈도 불규칙이 있습니다.
### Q: Ionicons에서 색상은 어떻게 사용하나요?
A: iOS/Android 플랫폼별 스타일 제공. 플랫폼 맥락에 맞는 변형 선택 색상 역할은 ios variant: 얇은 선 — iOS 느낌, md variant: 채워진 형태 — Android Material 느낌, outline variant: 범용 선 스타일입니다. 주의사항: ios/md 변형을 한 프로젝트에 혼용 금지 — 플랫폼 일관성 유지, 웹 프로젝트에서는 outline variant 권장.
### Q: Ionicons에 어울리는 폰트 스타일은 무엇인가요?
A: Ionicons에는 아이콘 패키지 — 타이포그래피 해당 없음. Ionicons는 ios/md/outline 3종 변형 스타일 폰트가 적합합니다. 최대 0개 폰트 패밀리 사용을 권장합니다. 제약 사항: 아이콘 크기는 인접 텍스트 font-size의 1~1.5배 권장, 변형별 상이 stroke-width — 텍스트 굵기와 시각적 균형 맞추기.
### Q: Ionicons 디자인에서 하면 안 되는 것은 무엇인가요?
A: Ionicons에서 피해야 할 것: 아이콘 스타일 혼용 금지 — 한 프로젝트에서 패키지 1~2개만, 아이콘 단독 사용 금지 (레이블 없을 때) — aria-label 필수, Ionicons 아이콘을 지나치게 크게 사용 금지 — Ionic 프레임워크 모바일 앱 최적화.
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=ionicons
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=ionicons&merged=true
Ionicons은 Ionic 기반 하이브리드 앱, iOS·Android 크로스 플랫폼, 모바일 우선 웹앱, Ionic 하이브리드 앱, 크로스 플랫폼 모바일 앱, 모바일 우선 웹앱 등의 프로젝트에 적합합니다.
Ionicons의 장단점은 무엇인가요?
장점으로는 iOS·Android 두 스타일 동시 지원, Ionic 완벽 통합, 모바일 UX에 최적화이 있습니다. 단점으로는 Ionic 외 환경에서 이점 감소, 아이콘 수 비교적 적음, 업데이트 빈도 불규칙이 있습니다.
Ionicons에서 색상은 어떻게 사용하나요?
iOS/Android 플랫폼별 스타일 제공. 플랫폼 맥락에 맞는 변형 선택 색상 역할은 ios variant: 얇은 선 — iOS 느낌, md variant: 채워진 형태 — Android Material 느낌, outline variant: 범용 선 스타일입니다. 주의사항: ios/md 변형을 한 프로젝트에 혼용 금지 — 플랫폼 일관성 유지, 웹 프로젝트에서는 outline variant 권장.
Ionicons에 어울리는 폰트 스타일은 무엇인가요?
Ionicons에는 아이콘 패키지 — 타이포그래피 해당 없음. Ionicons는 ios/md/outline 3종 변형 스타일 폰트가 적합합니다. 최대 0개 폰트 패밀리 사용을 권장합니다. 제약 사항: 아이콘 크기는 인접 텍스트 font-size의 1~1.5배 권장, 변형별 상이 stroke-width — 텍스트 굵기와 시각적 균형 맞추기.
Ionicons 디자인에서 하면 안 되는 것은 무엇인가요?
Ionicons에서 피해야 할 것: 아이콘 스타일 혼용 금지 — 한 프로젝트에서 패키지 1~2개만, 아이콘 단독 사용 금지 (레이블 없을 때) — aria-label 필수, Ionicons 아이콘을 지나치게 크게 사용 금지 — Ionic 프레임워크 모바일 앱 최적화.