아이콘

준비 중

아이콘 토큰·사이즈 스케일·전체 사용 규칙 정리는 예정. 아래는 레지스트리 현황(2026-06)과 기본 규칙.

단일 출처

packages/components/src/icons.ts — getIcon(name) / hasIcon(name)으로 조회. LNB·PageHeader 등 공유 컴포넌트와 앱 메뉴 설정(lnbConfig, embed 레지스트리)이 이 레지스트리 이름을 사용한다.

스타일 규칙

• 24px viewBox · 아웃라인 · stroke="currentColor" · stroke-width 2 · round cap/join — 신규 아이콘은 이 스타일을 따른다 (일부 레거시 16px fill 아이콘 존재: ic-workspace, ic-money, ic-user)
• 굵기 기준은 "16px 표시에서 1.33px"이다 (2026-08-25 개정). 아이콘은 대부분 w-4(16px)로 쓰는데 굵기는 viewBox 좌표계로 적는 값이라, 적은 숫자와 보이는 굵기가 다르다 — 실제 굵기는 stroke-width ÷ viewBox 비율이 정한다. 그래서 24 좌표계의 2가 16px 화면에서 1.33px로 보인다. Heroicons·Lucide도 같은 값이다
• viewBox가 24가 아니면 비례로 환산한다 — stroke-width = viewBox ÷ 12. 16 → 1.3333, 32 → 2.6667. 숫자만 맞추면 굵기가 어긋나므로 반드시 나눠서 적을 것
• 예외는 ic-spinner 하나뿐이다(굵은 링이 목적이라 굵기 축 밖)
• 색은 항상 currentColor — 컨텍스트 텍스트 색을 따르므로 아이콘 자체에 색을 넣지 않는다

이름 규칙

ic-{의미}-{형태}-{채움} 순서로 적고, 채움 자리는 fill일 때만 쓴다 — line 은 접미사가 없다.

	line	fill
형태가 있는 것	ic-info-circle	ic-info-circle-fill
형태가 없는 것	ic-money	ic-money-fill

• 한 의미에 한 쌍만 둔다. 같은 뜻을 두 이름으로 나눠 두면 화면마다 다른 그림이 뜬다 — 2026-08-25 에 중복이던 ic-info 를 ic-info-circle 로 합쳤다

알림 아이콘은 세 가지다

형태가 심각도를 나눈다. 색(.ds-notice 변형)만으로 구분하지 말 것 — 빨간 상자 안에 안내 기호가 들어가면 톤이 어긋난다.

뜻	아이콘	모양	쓰는 자리
오류	ic-exclamation-circle	원 + !	.ds-notice--danger · 로그인/저장 실패 · 처리 못 한 건수
경고	ic-warning	삼각형 + !	.ds-notice--warning · 조건 미충족 · 데이터 없음 경고
안내	ic-info-circle	원 + i	.ds-notice--info · 툴팁 도움말 · 부가 설명

• 두 원(ic-exclamation-circle · ic-info-circle)은 같은 원(r=9)에 막대와 점만 상하 반전 한 형제다. 한쪽을 고치면 다른 쪽도 같이 본다
• 2026-08-26 에 실제로 어긋나 있었다 — 오류 공지 29곳이 안내 기호(ⓘ)를 쓰고 있었다
• 쌍은 같은 글자로 그린다. ic-info-circle-fill 의 i 가 line 쪽과 다른 모양(눌린 글자 + 이상한 발)이었다. 새 fill 은 line 과 같은 좌표에서 같은 위치·굵기로 그린 뒤 fill-rule="evenodd" 로 안쪽을 파낸다

크기를 맞출 때 보는 값

viewBox 숫자가 아니라 "글리프가 박스를 채우는 비율"을 맞춘다. 둘은 별개다 — 실측(2026-08-26)에서 ic-menu(24↔16)와 ic-refresh(24↔20)는 viewBox 가 달라도 채움 비율이 같아 멀쩡했고, 반대로 viewBox 가 같은 ic-lock(24↔24)이 17% 어긋나 있었다. viewBox 만 보고 판단하면 멀쩡한 쌍을 건드리고 어긋난 쌍은 놓친다.

채움 비율 = (글리프 bbox 최대변 + stroke-width) ÷ viewBox 크기

• 고치는 방법은 viewBox 조정이다 — d 좌표는 건드리지 않는다. 글리프를 그대로 두고 박스만 넓히거나 좁히면 비율이 바뀌고, path 를 다시 쓰지 않으니 도형이 깨질 위험이 없다. 예: ic-check-circle-fill 은 "0 0 16 16" → "-1.5 -1.5 18 18" 로 박스만 넓혔다
• 오차 8% 이내는 손대지 않는다. solid 는 같은 크기여도 무겁게 읽혀 원래 조금 작게 그린다 — ic-message(0.91x) · ic-user(0.92x) 는 정상 범위다
• fill 안쪽의 파낸 마크는 line 의 획보다 얇아도 된다. 검은 바탕 위 흰 영역은 같은 폭이어도 더 두껍게 보이므로(irradiation), 얇게 그린 것이 오히려 맞다. 굵기를 line 에 맞춰 키우지 말 것

레지스트리 (2026-06 기준 31종)

그룹	아이콘
조직/사람	ic-organization ic-employee ic-user ic-id-badge(역할/명찰) ic-hospital
문서/업무	ic-clipboard ic-clipboard-check ic-approval(결재) ic-file-text(서식) ic-list-check(업무 목록) ic-table(시트/표)
시간/일정	ic-calendar ic-calendar-clock(스케줄러) ic-calendar-check(연차) ic-clock(근태) ic-clock-plus(연장근무)
현황/분석	ic-chart-up ic-chart-bar ic-gauge(대시보드)
분류/위치	ic-tag(유형) ic-map-pin(외근) ic-cube
시스템	ic-setting ic-sliders(세부 설정) ic-bell ic-refresh ic-signature ic-cap(교육) ic-money ic-workspace ic-logout
액션	ic-plus ic-edit ic-trash ic-close ic-check ic-copy ic-search ic-eye(보기·미리보기) ic-import ic-export ic-print ic-save

이 표는 2026-06 스냅샷이에요 — 정본은 icons.ts

레지스트리는 계속 늘어나서(2026-07 기준 80종+) 이 표가 전부가 아니에요. 있는지 없는지는 packages/components/src/icons.ts에서 확인하세요(hasIcon(name)). 표에 없다고 없는 게 아니고, 반대로 표에 있으면 반드시 있어요.

사용 규칙

• 같은 내비게이션(LNB) 안에서 중복 금지 — 메뉴 식별이 목적. 의미가 동일한 메뉴(예: 섹션이 다른 두 "설정")만 같은 아이콘 허용
• LNB ↔ 페이지 헤더 ↔ embed 레지스트리 아이콘 일치 — 같은 화면은 어디서든 같은 아이콘
• 새 아이콘이 필요하면 통상적(관례적) 의미의 형태로 위 스타일 규칙에 맞춰 레지스트리에 추가

변경 이력

날짜	내용
2026-06-12	LNB 중복 제거용 13종 추가: ic-id-badge ic-file-text ic-table ic-clock ic-sliders ic-calendar-clock ic-calendar-check ic-clock-plus ic-chart-bar ic-tag ic-map-pin ic-gauge ic-list-check