# 아이콘 매핑 및 사용 가이드

## 개요

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)