파운데이션
아이콘
Lucide 아이콘 세트를 기본으로 사용합니다. 선 굵기와 크기를 통일해 텍스트와 같은 무게로 읽히게 하고, 아이콘만으로 의미를 전달하지 않습니다.
- 라이브러리
- lucide-react
- 기본 크기
- 16 · 20 · 24px
- 선 굵기
- 2px (기본) · 1.75px (24px 이상)
자주 쓰는 아이콘
결제 · 금융
credit-card
wallet
banknote
receipt
qr-code
arrow-left-right
refresh-ccw
gift
매장 · 주문
store
shopping-bag
printer
clock
calendar-days
chart-column
user
home
액션
search
filter
plus
minus
download
copy
trash-2
settings
상태 · 내비게이션
circle-check
circle-alert
triangle-alert
info
bell
chevron-right
x
log-out
크기
14 · 뱃지 · 캡션
16 · 버튼(sm·md) · 테이블
20 · 버튼(lg) · 리스트
24 · 내비게이션 · 앱
32 · POS 카테고리
48 · 키오스크 · 빈 상태
색과 상태
선택됨 결제 완료 정산 보류 승인 거절 안내
아이콘 색은 옆 텍스트와 같은 토큰을 사용합니다. 기본 상태 아이콘은
--fg-muted, 비활성은 --fg-disabled입니다.사용 규칙
이렇게 하세요
- 아이콘 단독 버튼에는 aria-label 필수
- 같은 의미에는 모든 플랫폼에서 같은 아이콘
- 카드사 · 간편결제 로고는 공식 에셋만 사용
이렇게 하지 마세요
- 이모지를 상태 아이콘 대신 사용
- 선 굵기가 다른 아이콘 세트 혼용
- 아이콘에 그라데이션 · 두 가지 이상 색