@croquiscom/pds 16.56.0 → 16.56.2

package/pds-skills/resources/guides/guide-icon-mapping.md

@@ -0,0 +1,610 @@
+# 아이콘 매핑 및 사용 가이드
+
+## 개요
+
+AI와 개발자가 아이콘을 안정적으로 선택할 수 있도록 디자인 기준의 매핑과 사용 가이드를 정리합니다.
+
+---
+
+## Figma ↔ 코드 이름 규칙
+
+Figma 컴포넌트 이름 앞에 `Icon`을 붙이면 코드 컴포넌트 이름이 됩니다.
+
+| Figma 이름 | 코드 컴포넌트 | 사용 예시 |
+| --- | --- | --- |
+| `ArrowChevronRight` | `IconArrowChevronRight` | `<IconArrowChevronRight size={24} />` |
+| `CircleCheckFill` | `IconCircleCheckFill` | `<IconCircleCheckFill color={colors.green600} />` |
+| `BoxUSA` | `IconBoxUsa` | 자동 변환 시 대소문자 조정 |
+| `BoxFBK` | `IconBoxFbk` | 약어도 PascalCase로 변환 |
+
+> **주의** 일부 약어 아이콘(USA, FBK, ZDS 등)은 SVGR 자동 변환 시 PascalCase로 바뀝니다. Figma 이름을 그대로 쓰면 import 오류가 납니다.
+
+---
+
+## 의미 기준 분류 체계
+
+### 1. 방향 / 탐색
+
+| 카테고리 | Unicode | 코드명 | 사용 맥락 |
+| --- | --- | --- | --- |
+| 방향 | ∧ 🔼 | `IconArrowChevronUp` | 아코디언 닫기, 스크롤 위 |
+| 방향 | ∨ 🔽 | `IconArrowChevronDown` | 아코디언 열기, 드롭다운 |
+| 방향 | ‹ | `IconArrowChevronLeft` | 뒤로가기 |
+| 방향 | › | `IconArrowChevronRight` | 앞으로, 다음 |
+| 방향 | « ⏪ | `IconArrowChevronDoubleLeft` | 첫 페이지 |
+| 방향 | » ⏩ | `IconArrowChevronDoubleRight` | 마지막 페이지 |
+| 방향 | ◀ ⬅ | `IconArrowChevronLeftBold` | 강조 뒤로가기 |
+| 방향 | ▶ ➡ | `IconArrowChevronRightBold` | 강조 앞으로 |
+| 방향 | ⏮ | `IconArrowChevronDoubleLeftBold` | 강조 첫 페이지 |
+| 방향 | ⏭ | `IconArrowChevronDoubleRightBold` | 강조 마지막 페이지 |
+| 방향 | ↑ ⬆️ | `IconArrowDirectionUp` | 실제 위 방향 지시 |
+| 방향 | ↓ ⬇️ | `IconArrowDirectionDown` | 실제 아래 방향 지시 |
+| 방향 | ← ⬅️ | `IconArrowDirectionLeft` | 실제 왼쪽 방향 지시 |
+| 방향 | → ➡️ | `IconArrowDirectionRight` | 실제 오른쪽 방향 지시 |
+| 방향 | ▾ 🔻 | `IconArrowTriangleDown` | 드롭다운 인디케이터 |
+| 방향 | ▸ | `IconArrowTriangleRight` | 서브메뉴 인디케이터 |
+| 방향 | ▴ 🔺 | `IconArrowTriangleUp` | 드롭업 인디케이터 |
+| 방향 | ⤒ ⏫ | `IconArrowTop` | 맨 위로 스크롤 |
+| 방향 | ⤓ ⏬ | `IconArrowBottom` | 맨 아래로 스크롤 |
+| 방향 | ↗ 📈 | `IconArrowIncrease` | 상승 추이 |
+| 방향 | ↘ 📉 | `IconArrowDecrease` | 하락 추이 |
+| 방향 | ⇥ | `IconArrowIndent` | 들여쓰기, 하위 항목 |
+| 방향 | ↑ | `IconArrowStick` | 고정 방향 지시 |
+| 방향 | ↳ | `IconBelow` | 하위 항목 표시 |
+| 방향 | ⊟ | `IconFold` | 콘텐츠 접기 |
+| 방향 | ⊞ ↕ | `IconUnfold` | 콘텐츠 펼치기 |
+| 방향 | ⇅ ↕ | `IconSort` | 정렬 기준 선택 |
+
+### 2. 액션
+
+| 카테고리 | Unicode | 코드명 | 사용 맥락 |
+| --- | --- | --- | --- |
+| 액션 | • ➕ | `IconPlus` | 추가 |
+| 액션 | − ➖ | `IconMinus` | 삭제, 수량 감소 |
+| 액션 | ➖ | `IconMinusBold` | 강조 삭제 |
+| 액션 | ✓ ✔ | `IconCheck` | 선택, 완료 |
+| 액션 | ✔ ✅ | `IconCheckBold` | 강조 확인 |
+| 액션 | ✓✓ | `IconCheckDouble` | 읽음 확인 (2중 체크) |
+| 액션 | ✕ ✖ × | `IconX` | 모달·다이얼로그 닫기 |
+| 액션 | ✕ | `IconCancel` | 태그·칩 내부 삭제 |
+| 액션 | ✏ 📝 | `IconEdit` | 편집 진입 |
+| 액션 | 🗑 | `IconTrash` | 삭제 |
+| 액션 | 📋 | `IconCopy` | 클립보드 복사 |
+| 액션 | ↩ ↺ | `IconUndo` | 마지막 작업 취소 |
+| 액션 | ⬆ 📤 | `IconUpload` | 파일 업로드 |
+| 액션 | ⬇ 📥 | `IconDownload` | 파일 다운로드 |
+| 액션 | ↻ 🔄 | `IconRefresh` | 페이지·데이터 새로고침 |
+| 액션 | ↺ | `IconReset` | 설정·필터 초기화 |
+| 액션 | ⟳ 🔄 | `IconSync` | 양방향 데이터 동기화 |
+| 액션 | ⇄ | `IconChange` | 항목 변경 |
+| 액션 | ⇄ | `IconChangeBold` | 강조 변경 |
+| 액션 | ⇌ 🔁 | `IconSwap` | 두 항목 교체 |
+| 액션 | ✥ | `IconMove` | 드래그 이동 |
+| 액션 | ⠿ | `IconGrabber` | 드래그 핸들 |
+| 액션 | ↔↕ | `IconCursorResize` | 크기 조절 |
+
+### 3. 상태 / 피드백
+
+| 카테고리 | Unicode | 코드명 | 사용 맥락 |
+| --- | --- | --- | --- |
+| 상태 | ⚠️ | `IconWarning` | 인라인 경고 (텍스트 옆) |
+| 상태 | ⚠️ | `IconWarningBold` | 강조 인라인 경고 |
+| 상태 | ⚠ 🚨 | `IconTriangleWarning` | 강한 위험·주의 |
+| 상태 | ⚠ | `IconCircleWarning` | 원형 경고 배지 |
+| 상태 | ⚠️ | `IconCircleWarningFill` | 채워진 원형 경고 배지 |
+| 상태 | ⚠️ | `IconCircleWarningFillBold` | 강조 경고 배지 |
+| 상태 | ℹ️ | `IconInfo` | 인라인 정보 |
+| 상태 | ℹ️ | `IconInfoBold` | 강조 인라인 정보 |
+| 상태 | ℹ | `IconCircleInfo` | 정보 버튼 (라인) |
+| 상태 | ℹ️ | `IconCircleInfoFill` | 툴팁 트리거 버튼 |
+| 상태 | ℹ️ | `IconCircleInfoFillBold` | 강조 정보 버튼 |
+| 상태 | ? ❓ | `IconQuestionMark` | 도움말·FAQ 링크 |
+| 상태 | ❓ | `IconQuestionMarkBold` | 강조 도움말 |
+| 상태 | ❓ | `IconCircleQuestion` | 확인 필요 상태 |
+| 상태 | ❓ | `IconCircleQuestionFill` | 채워진 확인 필요 |
+| 상태 | ✓ ✅ | `IconCircleCheck` | 완료 배지 (라인) |
+| 상태 | ✅ | `IconCircleCheckFill` | 완료 배지 (채움) |
+| 상태 | ✅ | `IconCircleCheckFillBold` | 강조 완료 배지 |
+| 상태 | ❌ | `IconCircleXFill` | 에러 상태, 입력 초기화 |
+| 상태 | 🔔 | `IconBell` | 알림 활성 |
+| 상태 | 🔕 | `IconBellOff` | 알림 비활성 |
+| 상태 | ⭐ ★ | `IconStar` | 즐겨찾기·평점 |
+
+### 4. UI 레이아웃 / 뷰 전환
+
+| 카테고리 | Unicode | 코드명 | 사용 맥락 |
+| --- | --- | --- | --- |
+| UI | ⋮ | `IconDotsVertical` | 세로형 더보기 메뉴 |
+| UI | ⋯ | `IconDotsHorizontal` | 가로형 더보기 메뉴 |
+| UI | ··· | `IconDetailThreeDots` | 특정 컨텍스트 더보기 |
+| UI | ☰ | `IconThreeBars` | 햄버거 메뉴 |
+| UI | ⊞ ⣿ | `IconGridView` | 격자형 보기 |
+| UI | ≡ | `IconList` | 목록형 보기 |
+| UI | ▣ | `IconLayout` | 레이아웃 설정 |
+| UI | ⊞ | `IconTableGeneral` | 일반 테이블 뷰 |
+| UI | ⊡ | `IconTablePivot` | 피벗 테이블 뷰 |
+| UI | ☰ | `IconDetailContents` | 상세 콘텐츠 뷰 |
+| UI | 📊 | `IconDetailChart` | 상세 차트 뷰 |
+| UI | ⛶ | `IconScreenNormal` | 일반 화면 |
+| UI | ⛶ | `IconScreenFull` | 전체 화면 |
+| UI | ⊕ | `IconScreenZoomIn` | 화면 확대 |
+| UI | ⊖ | `IconScreenZoomOut` | 화면 축소 |
+| UI | 🔍 ⊕ | `IconZoomIn` | 콘텐츠 확대 |
+
+### 5. 검색 / 데이터
+
+| 카테고리 | Unicode | 코드명 | 사용 맥락 |
+| --- | --- | --- | --- |
+| 검색 | 🔍 ⌕ | `IconSearch` | 일반 검색 |
+| 검색 | 🔍 | `IconSearchBold` | 활성 탭·강조 검색 |
+| 검색 | 🔍✨ | `IconSearchAi` | AI 기반 검색 |
+| 검색 | ↑ 🔼 | `IconSortAsc` | 오름차순 정렬 |
+| 검색 | ↓ 🔽 | `IconSortDesc` | 내림차순 정렬 |
+| 검색 | ⊽ | `IconFilter` | 필터 미적용 |
+| 검색 | ⊽ | `IconFilterFill` | 필터 적용 중 |
+| 검색 | 📊 | `IconBarChart` | 막대 차트 |
+| 검색 | 🥧 📊 | `IconPieChart` | 원형 차트 |
+| 검색 | 📊📄 | `IconDocumentCharts` | 차트 포함 문서 |
+| 검색 | 📊 | `IconDocumentData` | 데이터 문서 |
+| 검색 | 📄 | `IconDocumentDetails` | 상세 문서 |
+| 검색 | 📅 | `IconTimeline` | 타임라인 뷰 |
+| 검색 | 🏷 | `IconClassification` | 분류 관리 |
+
+### 6. 문서 / 파일
+
+| 카테고리 | Unicode | 코드명 | 사용 맥락 |
+| --- | --- | --- | --- |
+| 문서 | 📄 | `IconDocument` | 일반 문서 |
+| 문서 | ✅📄 | `IconDocumentCheck` | 확인 완료 문서 |
+| 문서 | 📁 | `IconFolder` | 폴더 |
+| 문서 | ✅📁 | `IconFolderCheck` | 확인 완료 폴더 |
+| 문서 | ✅✅📁 | `IconFolderCheckDouble` | 이중 확인 폴더 |
+| 문서 | ☑ 📋 | `IconChecklist` | 체크리스트 |
+| 문서 | 📖 | `IconBookOpenEmpty` | 가이드·매뉴얼 |
+| 문서 | 📗 📊 | `IconExcel` | 엑셀 파일 |
+| 문서 | 🔄📋 | `IconSubscription` | 구독·정기 문서 |
+
+### 7. 커머스 / 배송
+
+| 카테고리 | Unicode | 코드명 | 사용 맥락 |
+| --- | --- | --- | --- |
+| 커머스 | 🛒 | `IconCart` | 장바구니 |
+| 커머스 | 🛒✕ | `IconCartRemove` | 장바구니 삭제 |
+| 커머스 | 🛒↗ | `IconCartMove` | 장바구니 이동 |
+| 커머스 | 🛒✓ | `IconCartCheck` | 장바구니 확인 |
+| 커머스 | 🛒⏰ | `IconCartClock` | 배송 예정 |
+| 커머스 | 🛒📦 | `IconCartArrivals` | 도착 예정 |
+| 커머스 | 📦 | `IconBox` | 일반 박스 |
+| 커머스 | 📦↩ | `IconBoxReturn` | 반품 박스 |
+| 커머스 | 📦✕ | `IconBoxX` | 폐기 박스 |
+| 커머스 | 📦→ | `IconBoxMove` | 박스 이동 |
+| 커머스 | 📦🗃 | `IconBoxStock` | 재고 박스 |
+| 커머스 | 📦 | `IconBoxTaped` | 포장 완료 |
+| 커머스 | 📦↓ | `IconBoxUnload` | 하역 |
+| 커머스 | 📦🔍 | `IconBoxSearch` | 박스 조회 |
+| 커머스 | 📦📦 | `IconBoxes` | 복수 박스 |
+| 커머스 | 🏭 | `IconWarehouse` | 창고 |
+| 커머스 | 🏭↩ | `IconWarehouseReturn` | 창고 반품 |
+| 커머스 | ⚡🚚 | `IconZDelivery` | 지그재그 직배송 |
+| 커머스 | 🚚↩ | `IconTruckReturn` | 반품 트럭 |
+| 커머스 | 🚚⚙ | `IconTruckSetting` | 배송 설정 |
+| 커머스 | 🎫 | `IconCoupon` | 보유 쿠폰 |
+| 커머스 | 🏷 | `IconDiscountTag` | 할인율 태그 |
+| 커머스 | 🏷 | `IconDiscountTagFill` | 강조 할인 태그 |
+| 커머스 | 🪝 | `IconHanger` | 의류·패션 |
+| 커머스 | 📝🤝 | `IconContract` | 계약 문서 |
+
+### 8. 장소 / 홈
+
+| 카테고리 | Unicode | 코드명 | 사용 맥락 |
+| --- | --- | --- | --- |
+| 장소 | 🏠 | `IconHome` | 홈 탭 |
+| 장소 | 🏠📊 | `IconHomeDashboard` | 대시보드 홈 |
+| 장소 | 🏠→ | `IconHomeIn` | 입장 |
+| 장소 | 🏠← | `IconHomeOut` | 퇴장 |
+| 장소 | 🏠⚙ | `IconHomeSetting` | 홈 설정 |
+| 장소 | 📌 | `IconPin` | 고정 (라인) |
+| 장소 | 📍 | `IconPinFill` | 고정 (채움) |
+| 장소 | 📍 | `IconPinColor` | 지도 핀 (컬러) |
+| 장소 | 🏪 | `IconStore` | 판매 매장 |
+
+### 9. 커뮤니케이션
+
+| 카테고리 | Unicode | 코드명 | 사용 맥락 |
+| --- | --- | --- | --- |
+| 통신 | 💬 | `IconMessage` | 메시지 |
+| 통신 | 💬 | `IconComment` | 댓글 |
+| 통신 | 💬⚠ | `IconCommentAlert` | 댓글 알림 |
+| 통신 | 📧 ✉ | `IconEmail` | 이메일 |
+| 통신 | 📣 | `IconMegaphone` | 공지·마케팅 |
+| 통신 | 🧑‍💼 | `IconCounselor` | 고객 상담원 |
+
+### 10. 사람 / 감정
+
+| 카테고리 | Unicode | 코드명 | 사용 맥락 |
+| --- | --- | --- | --- |
+| 사람 | 👤 | `IconPerson` | 사용자·계정 |
+| 사람 | 🤝 | `IconHandshake` | 계약·파트너십 |
+| 사람 | ☝ 👆 | `IconHandPicking` | 선택하기 |
+| 사람 | 👈 | `IconHandPickingOut` | 꺼내기 |
+| 사람 | 👍 | `IconThumbsUp` | 긍정 피드백 |
+| 사람 | 👎 | `IconThumbsDown` | 부정 피드백 |
+| 사람 | 😊 | `IconFaceSmileFill` | 만족 |
+| 사람 | 😐 | `IconFaceNeutralFill` | 보통 |
+| 사람 | 😞 | `IconFaceBadFill` | 불만족 |
+| 사람 | 😁 | `IconFaceVeryGoodFill` | 매우 만족 |
+
+### 11. 시간
+
+| 카테고리 | Unicode | 코드명 | 사용 맥락 |
+| --- | --- | --- | --- |
+| 시간 | 🕐 ⏰ | `IconClock` | 시간 표시 |
+| 시간 | 📅 | `IconCalendar` | 날짜·일정 |
+| 시간 | 🛒⏰ | `IconCartClock` | 장바구니 배송 예정 시간 |
+| 시간 | 📅→ | `IconTimeline` | 시계열 뷰 |
+
+### 12. 설정 / 관리
+
+| 카테고리 | Unicode | 코드명 | 사용 맥락 |
+| --- | --- | --- | --- |
+| 설정 | ⚙️ | `IconSetting` | 일반 설정 |
+| 설정 | 🎛 | `IconTune` | 세부 옵션 조정 |
+| 설정 | 🔒 | `IconLock` | 잠김 상태 |
+| 설정 | 🔓 | `IconUnlock` | 잠금 해제 |
+| 설정 | 👁 | `IconEyeOn` | 비밀번호 보기, 요소 표시 |
+| 설정 | 🙈 | `IconEyeOff` | 비밀번호 숨기기, 요소 숨김 |
+| 설정 | 🔍📋 | `IconInspection` | 검수·점검 |
+| 설정 | 📋 | `IconManagementFill` | 관리 기능 |
+| 설정 | 🖨 | `IconPrinter` | 인쇄 |
+| 설정 | 🗑 | `IconTrash` | 삭제 |
+
+### 13. 미디어
+
+| 카테고리 | Unicode | 코드명 | 사용 맥락 |
+| --- | --- | --- | --- |
+| 미디어 | ▶️ | `IconPlayFill` | 재생 |
+| 미디어 | ⏸ | `IconPauseFill` | 일시정지 |
+| 미디어 | ▶ | `IconCirclePlayFill` | 원형 재생 버튼 |
+| 미디어 | 🔇 | `IconMute` | 음소거 |
+| 미디어 | 🔊 | `IconUnmute` | 음소거 해제 |
+| 미디어 | 📷 | `IconCamera` | 사진 촬영·업로드 |
+| 미디어 | 🖼 | `IconPicture` | 이미지 |
+| 미디어 | 🖼✕ | `IconPictureX` | 이미지 없음 |
+| 미디어 | 🎬 📹 | `IconVideo` | 동영상 |
+
+### 14. 기타 오브젝트
+
+| 카테고리 | Unicode | 코드명 | 사용 맥락 |
+| --- | --- | --- | --- |
+| 기타 | 💡 | `IconBulb` | 아이디어·팁 (꺼짐) |
+| 기타 | 💡 | `IconBulbFill` | 아이디어·팁 강조 |
+| 기타 | 💡 | `IconBulbOn` | 켜진 상태 |
+| 기타 | 🚀 | `IconRocket` | 런칭·성장 |
+| 기타 | 📱 | `IconCellphone` | 모바일 기기 |
+| 기타 | 🖥 | `IconMonitor` | 모니터 |
+| 기타 | 💳 | `IconCircleCreditCard` | 결제 수단 |
+| 기타 | 💳 | `IconCreditCardFill` | 결제 수단 (채움) |
+| 기타 | ₩ 💰 | `IconCircleWon` | 금액·원화 |
+| 기타 | 👑 | `IconVvip` | VIP 등급 |
+| 기타 | % ％ | `IconPercent` | 할인율 숫자 |
+| 기타 | 🏷% | `IconPercentBadge` | 할인율 배지 |
+| 기타 | 🆕 | `IconNew` | 신규 기능 배지 |
+| 기타 | 🔬 | `IconBeta` | 베타 배지 |
+| 기타 | 📝 | `IconMemoRoundFill` | 메모·노트 |
+| 기타 | 🏅 | `IconMedalCheckFill` | 인증·수상 |
+| 기타 | 🎨 | `IconSpoid` | 색상 추출 |
+| 기타 | ✂ | `IconCrop` | 이미지 자르기 |
+| 기타 | 🔗 | `IconLink` | 내부 링크 |
+| 기타 | 🔗↗ | `IconLinkExternal` | 새 탭 외부 링크 |
+| 기타 | 🔗 | `IconCircleLinkFill` | 원형 링크 버튼 |
+| 기타 | ♻💳 | `IconCircleAutoCharge` | 자동 결제 |
+
+### 15. 숫자 배지
+
+| 카테고리 | Unicode | 코드명 | 사용 맥락 |
+| --- | --- | --- | --- |
+| 숫자 | 1️⃣ ① | `IconNumOneFill` | 1순위 배지 |
+| 숫자 | 2️⃣ ② | `IconNumTwoFill` | 2순위 배지 |
+| 숫자 | 3️⃣ ③ | `IconNumThreeFill` | 3순위 배지 |
+| 숫자 | 4️⃣ ④ | `IconNumFourFill` | 4순위 배지 |
+| 숫자 | 5️⃣ ⑤ | `IconNumFiveFill` | 5순위 배지 |
+| 숫자 | 6️⃣ ⑥ | `IconNumSixFill` | 6순위 배지 |
+| 숫자 | 7️⃣ ⑦ | `IconNumSevenFill` | 7순위 배지 |
+| 숫자 | 8️⃣ ⑧ | `IconNumEightFill` | 8순위 배지 |
+| 숫자 | 9️⃣ ⑨ | `IconNumNineFill` | 9순위 배지 |
+| 숫자 | 🔟 ⑩ | `IconNumTenFill` | 10순위 배지 |
+
+---
+
+## 특수 그룹
+
+### 브랜드 / 서비스 / 국가
+
+> **주의** 브랜드 아이콘은 브랜드 가이드라인을 따릅니다. 임의 색상 변경 금지.
+
+| 카테고리 | Unicode | 코드명 | 설명 |
+| --- | --- | --- | --- |
+| 브랜드 | 📸 | `IconCircleInstagram` | 인스타그램 |
+| 브랜드 | 📺 | `IconCircleYouTube` | 유튜브 |
+| 브랜드 | 🎵 | `IconCircleTikTok` | 틱톡 |
+| 브랜드 | 📝 | `IconCircleBlog` | 블로그 |
+| 브랜드 | — | `IconBoxZigzag` | 지그재그 앱 |
+| 브랜드 | — | `IconBoxFbk` | FBK |
+| 브랜드 | — | `IconBoxPosty` | 포스티 |
+| 브랜드 | — | `IconBoxMystore` | 마이스토어 |
+| 브랜드 | — | `IconBoxKitto` | 키토 |
+| 브랜드 | — | `IconBoxZigzagMate` | 지그재그 메이트 |
+| 브랜드 | — | `IconBoxKakaotalkShopping` | 카카오톡 쇼핑 |
+| 브랜드 | 🇰🇷 | `IconBoxKorea` | 한국 |
+| 브랜드 | 🇯🇵 | `IconBoxJapan` | 일본 |
+| 브랜드 | 🇺🇸 | `IconBoxUsa` | 미국 |
+| 브랜드 | 🇨🇦 | `IconBoxCanada` | 캐나다 |
+| 브랜드 | 🌐 | `IconBoxGlobal` | 글로벌 |
+| 브랜드 | 🌐 | `IconZigzagWeb` | 지그재그 웹 |
+
+### 서비스 카테고리
+
+| 카테고리 | Unicode | 코드명 |
+| --- | --- | --- |
+| 카테고리 | 👗 | `IconCategoryFashion` |
+| 카테고리 | 💄 | `IconCategoryBeauty` |
+| 카테고리 | 🏡 | `IconCategoryLife` |
+| 카테고리 | 👶 | `IconCategoryKids` |
+| 카테고리 | 🍽 | `IconCategoryFood` |
+| 카테고리 | 🛍 | `IconCategoryShop` |
+| 카테고리 | 🏷 | `IconCategoryBrand` |
+| 카테고리 | ⚡🚚 | `IconCategoryZDelivery` |
+| 카테고리 | 🌐🚚 | `IconCategoryDeliveryGlobal` |
+
+### Colored 일러스트
+
+60개의 컬러 일러스트 아이콘입니다. 빈 상태(empty state), 온보딩, 특별 강조 영역에 사용합니다. `color` prop으로 색상을 변경할 수 없습니다.
+
+| 카테고리 | Unicode | 코드명 |
+| --- | --- | --- |
+| Colored | ❤️ | `IconColoredHeart` |
+| Colored | ⭐ | `IconColoredStar` |
+| Colored | 🎫 | `IconColoredCoupon` |
+| Colored | 💰 | `IconColoredMoneyBag` |
+| Colored | 💸 | `IconColoredMoneyFly` |
+| Colored | 🚀 | `IconColoredRocket` |
+| Colored | 🎁 | `IconColoredGift` |
+| Colored | 🏅 | `IconColoredMedal` |
+| Colored | 🏆 | `IconColoredRanking` |
+| Colored | 📈 | `IconColoredGraphUp` |
+| Colored | 📉 | `IconColoredGraphDown` |
+| Colored | 📅 | `IconColoredCalendar` |
+| Colored | 📣 | `IconColoredMegaphone` |
+| Colored | 🔥 | `IconColoredFire` |
+| Colored | ⚠️ | `IconColoredWarning` |
+| Colored | 🚨 | `IconColoredWarningRed` |
+| Colored | ✅ | `IconColoredCheck` |
+| Colored | ↩ | `IconColoredReturn` |
+| Colored | 👍 | `IconColoredThumbsUp` |
+| Colored | 👎 | `IconColoredThumbsDown` |
+| Colored | 😡 | `IconColoredFaceVeryBad` |
+| Colored | 😞 | `IconColoredFaceBad` |
+| Colored | 😐 | `IconColoredFaceNeutral` |
+| Colored | 😊 | `IconColoredFaceGood` |
+| Colored | 😁 | `IconColoredFaceVeryGood` |
+| Colored | 🤖 | `IconColoredRobot` |
+| Colored | ⚡🚚 | `IconColoredZDelivery` |
+
+### ZDS 전용
+
+| 카테고리 | Unicode | 코드명 | 설명 |
+| --- | --- | --- | --- |
+| ZDS | 📢 | `IconZdsNotice` | ZDS 공지 |
+| ZDS | 🚚 | `IconZdsDelivery` | ZDS 배송 |
+| ZDS | 👙 | `IconZdsBeachwear` | ZDS 비치웨어 |
+
+### 로딩
+
+| 카테고리 | Unicode | 코드명 | 사용 맥락 |
+| --- | --- | --- | --- |
+| 로딩 | ⏳ | `IconLoadingDonuts` | 도넛 형태 로딩 |
+| 로딩 | ··· | `IconLoadingDots` | 점 형태 로딩 |
+
+---
+
+## 혼동하기 쉬운 아이콘 사용 구분
+
+### 1. ArrowChevron vs ArrowDirection vs ArrowTriangle
+
+> **[혼동] Arrow 3종**: `ArrowChevron`(‹›∧∨, UI 탐색·아코디언) / `ArrowDirection`(←→↑↓, 실제 방향 지시·지도) / `ArrowTriangle`(▾▸▴, 드롭다운·소형 인디케이터)
+
+| 아이콘 | Unicode | 사용 | 금지 |
+| --- | --- | --- | --- |
+| **ArrowChevron** | ‹ › ∧ ∨ | UI 탐색 (아코디언, 뒤로가기) | 실제 방향 지시 |
+| **ArrowDirection** | ← → ↑ ↓ | 실제 방향 지시 (지도, 이동 경로) | UI 탐색 버튼 |
+| **ArrowTriangle** | ▾ ▸ ▴ | 드롭다운·소형 인디케이터 | 독립 탐색 버튼 |
+
+### 2. Warning 3종
+
+> **[혼동] Warning 3종**: `Warning`/`WarningBold`(⚠️, 인라인 경고 텍스트 옆) / `CircleWarning`/`CircleWarningFill`(⚠️, 경고 배지·상태) / `TriangleWarning`(⚠🚨, 강한 위험·결제 오류)
+
+| 아이콘 | Unicode | 사용 맥락 |
+| --- | --- | --- |
+| **Warning / WarningBold** | ⚠️ | 인라인 경고 텍스트 옆, 소형 경고 |
+| **CircleWarning / CircleWarningFill** | ⚠️ | 경고 배지, 상태 표시 |
+| **TriangleWarning** | ⚠ 🚨 | 강한 위험·주의 (결제 오류, 데이터 손실) |
+
+### 3. 정보 / 도움말 4종
+
+> **[혼동] 정보·도움말 4종**: `Info`/`InfoBold`(ℹ️, 인라인 정보) / `CircleInfo`/`CircleInfoFill`(ℹ️, 툴팁 트리거 버튼) / `QuestionMark`/`QuestionMarkBold`(?❓, 도움말 페이지·FAQ 링크) / `CircleQuestion`/`CircleQuestionFill`(❓, 미확정 상태)
+
+| 아이콘 | Unicode | 사용 맥락 |
+| --- | --- | --- |
+| **Info / InfoBold** | ℹ️ | 인라인 정보, 텍스트 옆 보조 정보 |
+| **CircleInfo / CircleInfoFill** | ℹ️ | 툴팁 트리거, 클릭 가능한 정보 버튼 |
+| **QuestionMark / QuestionMarkBold** | ? ❓ | 도움말 페이지 링크, FAQ 진입 |
+| **CircleQuestion / CircleQuestionFill** | ❓ | 확인되지 않은 상태, 미정 항목 |
+
+### 4. Check 4종
+
+> **[혼동] Check 4종**: `Check`(✓, 체크박스·단순 선택) / `CheckBold`(✔, 강조 확인) / `CheckDouble`(✓✓, 메시지 읽음 2중 체크) / `CircleCheck`/`CircleCheckFill`(✅, 완료 배지·주문 완료·인증)
+
+| 아이콘 | Unicode | 사용 맥락 |
+| --- | --- | --- |
+| **Check** | ✓ | 체크박스 내부, 단순 선택 |
+| **CheckBold** | ✔ | 강조된 확인 |
+| **CheckDouble** | ✓✓ | 메시지 읽음 확인 (2중 체크) |
+| **CircleCheck / CircleCheckFill** | ✅ | 완료 상태 배지 (주문 완료, 인증 완료) |
+
+### 5. X / Cancel / CircleXFill
+
+> **[혼동] X·Cancel·CircleXFill**: `X`(✕✖, 대형 닫기·모달·다이얼로그·바텀시트 헤더) / `Cancel`(✕, 소형 삭제·태그·칩·입력 필드) / `CircleXFill`(❌, 원형 에러·입력값 전체 초기화)
+
+| 아이콘 | Unicode | 크기·맥락 | 사용 위치 |
+| --- | --- | --- | --- |
+| **X** | ✕ ✖ | 대형 닫기 | 모달, 다이얼로그, 바텀시트 헤더 |
+| **Cancel** | ✕ | 소형 삭제 | 태그, 칩, 입력 필드 내 삭제 |
+| **CircleXFill** | ❌ | 원형 에러/삭제 | 에러 배지, 입력값 전체 초기화 |
+
+### 6. Refresh / Reset / Sync / Undo
+
+> **[혼동] Refresh·Reset·Sync·Undo**: `Refresh`(↻🔄, 단방향 순환·페이지 새로고침) / `Reset`(↺, 되돌리기·필터·폼 초기화) / `Sync`(⟳🔄, 양방향 순환·시스템 간 동기화) / `Undo`(↩, 마지막 작업 1단계 취소)
+
+| 아이콘 | Unicode | 방향 | 사용 맥락 |
+| --- | --- | --- | --- |
+| **Refresh** | ↻ 🔄 | 단방향 순환 | 페이지·목록 새로고침 |
+| **Reset** | ↺ | 되돌리기 | 필터·설정·폼 초기화 |
+| **Sync** | ⟳ 🔄 | 양방향 순환 | 시스템 간 동기화 |
+| **Undo** | ↩ | 뒤로 단방향 | 마지막 작업 1단계 취소 |
+
+### 7. Search / SearchBold / SearchAi
+
+> **[혼동] Search 3종**: `Search`(🔍⌕, 일반 검색·입력·버튼) / `SearchBold`(🔍, 검색 탭 활성화 상태) / `SearchAi`(🔍✨, AI 기반 검색)
+
+| 아이콘 | Unicode | 사용 맥락 |
+| --- | --- | --- |
+| **Search** | 🔍 ⌕ | 일반 검색 입력, 검색 버튼 |
+| **SearchBold** | 🔍 | 검색 탭 활성화 상태 |
+| **SearchAi** | 🔍✨ | AI 기반 검색 |
+
+### 8. DotsVertical / DotsHorizontal / DetailThreeDots / ThreeBars
+
+> **[혼동] 더보기·메뉴 4종**: `DotsVertical`(⋮, 세로형 더보기·모바일 표준) / `DotsHorizontal`(⋯, 가로형 더보기) / `DetailThreeDots`(···, 특정 상세 컨텍스트 더보기) / `ThreeBars`(☰, 햄버거 메뉴·내비게이션 드로어 전용)
+
+| 아이콘 | Unicode | 사용 맥락 |
+| --- | --- | --- |
+| **DotsVertical** | ⋮ | 세로형 더보기 메뉴 (모바일 표준) |
+| **DotsHorizontal** | ⋯ | 가로형 더보기 메뉴 |
+| **DetailThreeDots** | ··· | 특정 상세 컨텍스트 더보기 |
+| **ThreeBars** | ☰ | 햄버거 메뉴 — 내비게이션 드로어 전용 |
+
+### 9. Sort / SortAsc / SortDesc
+
+> **[혼동] Sort 3종**: `Sort`(⇅↕, 정렬 기준 선택 버튼·미확정) / `SortAsc`(↑🔼, 오름차순 적용 상태) / `SortDesc`(↓🔽, 내림차순 적용 상태)
+
+| 아이콘 | Unicode | 사용 맥락 |
+| --- | --- | --- |
+| **Sort** | ⇅ ↕ | 정렬 기준 선택 버튼 (미확정) |
+| **SortAsc** | ↑ 🔼 | 오름차순 정렬 적용 상태 |
+| **SortDesc** | ↓ 🔽 | 내림차순 정렬 적용 상태 |
+
+### 10. DiscountTag / DiscountTagFill / Coupon
+
+> **[혼동] DiscountTag·Coupon**: `DiscountTag`(🏷, 상품 할인율 태그·라인) / `DiscountTagFill`(🏷, 강조 할인 태그·채움) / `Coupon`(🎫, 사용자 보유 쿠폰). DiscountTag=상품 가격 정보, Coupon=사용자 혜택.
+
+| 아이콘 | Unicode | 사용 맥락 |
+| --- | --- | --- |
+| **DiscountTag** | 🏷 | 상품 할인율 태그 (라인) |
+| **DiscountTagFill** | 🏷 | 강조 할인 태그 (채움) |
+| **Coupon** | 🎫 | 사용자가 보유한 쿠폰 |
+
+> DiscountTag는 상품 가격 정보, Coupon은 사용자가 보유한 혜택입니다.
+
+### 11. Filter / FilterFill / Tune / Classification
+
+> **[혼동] Filter·Tune·Classification**: `Filter`(⊽, 필터 미적용) / `FilterFill`(⊽, 필터 적용 중·상태 표시) / `Tune`(🎛, 세부 파라미터 조정) / `Classification`(🏷, 항목 분류·카테고리 관리)
+
+| 아이콘 | Unicode | 사용 맥락 |
+| --- | --- | --- |
+| **Filter** | ⊽ | 필터 미적용 상태 |
+| **FilterFill** | ⊽ | 필터 적용 중 (상태 표시) |
+| **Tune** | 🎛 | 세부 파라미터 조정 |
+| **Classification** | 🏷 | 항목 분류·카테고리 관리 |
+
+### 12. Pin / PinFill / PinColor
+
+> **[혼동] Pin 3종**: `Pin`(📌, 고정 기능·라인·미고정) / `PinFill`(📍, 고정된 상태·채움) / `PinColor`(📍, 지도 핀·위치 강조·컬러)
+
+| 아이콘 | Unicode | 사용 맥락 |
+| --- | --- | --- |
+| **Pin** | 📌 | 고정 기능 (라인, 미고정) |
+| **PinFill** | 📍 | 고정된 상태 (채움) |
+| **PinColor** | 📍 | 지도 핀, 위치 강조 (컬러) |
+
+### 13. Bulb / BulbFill / BulbOn
+
+> **[혼동] Bulb 3종**: `Bulb`(💡, 아이디어·팁·라인) / `BulbFill`(💡, 아이디어·팁 강조·채움) / `BulbOn`(💡, 켜진·활성화 상태)
+
+| 아이콘 | Unicode | 사용 맥락 |
+| --- | --- | --- |
+| **Bulb** | 💡 | 아이디어·팁 (라인) |
+| **BulbFill** | 💡 | 아이디어·팁 강조 (채움) |
+| **BulbOn** | 💡 | 켜진·활성화 상태 |
+
+### 14. Link / LinkExternal / CircleLinkFill
+
+> **[혼동] Link 3종**: `Link`(🔗, 내부 링크·URL 복사) / `LinkExternal`(🔗↗, 새 탭 외부 링크) / `CircleLinkFill`(🔗, 원형 링크 배지)
+
+| 아이콘 | Unicode | 사용 맥락 |
+| --- | --- | --- |
+| **Link** | 🔗 | 내부 링크, URL 복사 |
+| **LinkExternal** | 🔗↗ | 새 탭으로 외부 링크 |
+| **CircleLinkFill** | 🔗 | 원형 링크 배지 |
+
+---
+
+## 명명 규칙 및 검색 가이드
+
+### 접두사 패턴
+
+| 접두사 | Unicode 힌트 | 의미 | 예시 |
+| --- | --- | --- | --- |
+| `Arrow*` | ← → ↑ ↓ | 방향·이동 | ArrowChevronRight, ArrowDirectionUp |
+| `Circle*` | ○ | 원형 컨테이너 + 내부 의미 | CircleCheck, CircleWarningFill |
+| `Box*` | ☐ 📦 | 박스형 배지 or 서비스·국가 | BoxZigzag, BoxKorea |
+| `Cart*` | 🛒 | 장바구니 관련 | CartCheck, CartClock |
+| `Document*` | 📄 | 문서 관련 | DocumentCheck, DocumentCharts |
+| `Folder*` | 📁 | 폴더 관련 | FolderCheck, FolderCheckDouble |
+| `Home*` | 🏠 | 홈 화면 관련 | HomeDashboard, HomeIn |
+| `Num*Fill` | 1️⃣ | 숫자 배지 | NumOneFill ~ NumTenFill |
+| `Face*Fill` | 😊 | 감정 표현 | FaceSmileFill, FaceBadFill |
+| `Colored*` | 🎨 | 컬러 일러스트 | ColoredHeart, ColoredRocket |
+| `Category*` | 🏷 | 서비스 카테고리 | CategoryFashion, CategoryBeauty |
+| `ZDS*` | — | ZDS 전용 | ZDSDelivery, ZDSNotice |
+
+### 접미사 패턴
+
+| 접미사 | 의미 |
+| --- | --- |
+| `*Bold` | 선이 더 두꺼운 강조 버전 |
+| `*Fill` | 라인 대신 채워진(filled) 버전 |
+| `*Off` | 비활성·끔 상태 (BellOff, EyeOff) |
+| `*On` | 활성·켜진 상태 (BulbOn) |
+
+### 자주 틀리는 이름
+
+| ❌ 잘못된 이름 | ✅ 올바른 이름 |
+| --- | --- |
+| `IconCheckmark` | `IconCheck` |
+| `IconClose` | `IconX` |
+| `IconDelete` | `IconTrash` |
+| `IconAlert` | `IconWarning` 또는 `IconCircleWarning` |
+| `IconArrow` | `IconArrowChevronRight` 등 방향 명시 |
+| `IconLoading` | `IconLoadingDonuts` 또는 `IconLoadingDots` |
+| `IconHamburger` | `IconThreeBars` |
+| `IconMore` | `IconDotsVertical` 또는 `IconDotsHorizontal` |
+| `IconNotification` | `IconBell` |
+| `IconUser` | `IconPerson` |
+| `IconHeart` | `IconColoredHeart` (컬러) |
+| `IconTag` | `IconDiscountTag` 또는 `IconPercentBadge` |
+
+---
+
+## Unicode 역방향 인덱스
+
+Unicode 문자나 이모지로부터 아이콘을 역방향 검색하려면 별도 가이드를 참조하세요: [아이콘 Unicode Lookup](?path=/docs/guide-icon-unicode-lookup--docs)