# Ionicons > Ionic 프레임워크를 위해 제작된 프리미엄 아이콘 세트입니다. 모바일 앱에 최적화되어 있으며 iOS와 Material Design 스타일을 모두 지원합니다. - 층: 아카이브 (아이콘 패키지) - ID: ionicons - 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/ionicons ## 정의 Ionic 프레임워크를 위해 제작된 프리미엄 아이콘 세트입니다. 모바일 앱에 최적화되어 있으며 iOS와 Material Design 스타일을 모두 지원합니다. ## 주요 특징 - 1,300개 이상의 아이콘 - iOS와 Material Design 스타일 - 모바일 앱 최적화 - 웹 컴포넌트 지원 - 완전 무료 오픈소스 ## 핵심 원칙 - npm install ionicons - 번들 사이즈: 선택적 로딩 - 1,300+ 아이콘 ## 컬러 시스템 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 외 환경에서 이점 감소 - 아이콘 수 비교적 적음 - 업데이트 빈도 불규칙 ## 자주 묻는 질문 ### Q1. Ionicons이란 무엇인가요? Ionic 프레임워크를 위해 제작된 프리미엄 아이콘 세트입니다. 모바일 앱에 최적화되어 있으며 iOS와 Material Design 스타일을 모두 지원합니다. ### Q2. Ionicons의 핵심 디자인 원칙은 무엇인가요? Ionicons의 핵심 원칙은 npm install ionicons, 번들 사이즈: 선택적 로딩, 1,300+ 아이콘입니다. ### Q3. Ionicons은 어떤 프로젝트에 적합한가요? Ionicons은 Ionic 기반 하이브리드 앱, iOS·Android 크로스 플랫폼, 모바일 우선 웹앱, Ionic 하이브리드 앱, 크로스 플랫폼 모바일 앱, 모바일 우선 웹앱 등의 프로젝트에 적합합니다. ### Q4. Ionicons의 장단점은 무엇인가요? 장점으로는 iOS·Android 두 스타일 동시 지원, Ionic 완벽 통합, 모바일 UX에 최적화이 있습니다. 단점으로는 Ionic 외 환경에서 이점 감소, 아이콘 수 비교적 적음, 업데이트 빈도 불규칙이 있습니다. ### Q5. Ionicons에서 색상은 어떻게 사용하나요? iOS/Android 플랫폼별 스타일 제공. 플랫폼 맥락에 맞는 변형 선택 색상 역할은 ios variant: 얇은 선 — iOS 느낌, md variant: 채워진 형태 — Android Material 느낌, outline variant: 범용 선 스타일입니다. 주의사항: ios/md 변형을 한 프로젝트에 혼용 금지 — 플랫폼 일관성 유지, 웹 프로젝트에서는 outline variant 권장. ### Q6. Ionicons에 어울리는 폰트 스타일은 무엇인가요? Ionicons에는 아이콘 패키지 — 타이포그래피 해당 없음. Ionicons는 ios/md/outline 3종 변형 스타일 폰트가 적합합니다. 최대 0개 폰트 패밀리 사용을 권장합니다. 제약 사항: 아이콘 크기는 인접 텍스트 font-size의 1~1.5배 권장, 변형별 상이 stroke-width — 텍스트 굵기와 시각적 균형 맞추기. ### Q7. Ionicons 디자인에서 하면 안 되는 것은 무엇인가요? Ionicons에서 피해야 할 것: 아이콘 스타일 혼용 금지 — 한 프로젝트에서 패키지 1~2개만, 아이콘 단독 사용 금지 (레이블 없을 때) — aria-label 필수, Ionicons 아이콘을 지나치게 크게 사용 금지 — Ionic 프레임워크 모바일 앱 최적화. ## 참고 디자인 토큰 > 아래 토큰은 이 스타일의 참고 구현 예시다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템·타이포그래피·설계 제약은 지킨다. ### 색상 - primary: #3880FF - secondary: #0054E9 - accent: #74C0FC - background: #FFFFFF - surface: #F4F5F8 - text: #000000 - textSecondary: #92949C - border: #D7D8DA ### 타이포그래피 - fontFamily: -apple-system, BlinkMacSystemFont, 'Noto Sans KR', sans-serif - headingWeight: 600 - bodyWeight: 400 - letterSpacing: 0 ### 간격·반경·그림자·테두리 - spacing: unit 8px × scale 1 - borderRadius: sm 4px / md 8px / lg 16px / 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 #D7D8DA ### 컴포넌트 형태 - 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: 300ms ease ## 관련 링크 ### 관련 스타일 - [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) --- HTML 버전: https://ui.buildersgate.com/styles/ionicons 이 문서는 https://ui.buildersgate.com/styles/ionicons.md 로 제공됩니다. 전체 목록은 https://ui.buildersgate.com/llms.txt 를 참고하세요.