UI Icon Library
아이콘을 누르면 붙여넣을 코드가 복사됩니다. 아래 페이지에는 망 차단 자가진단도 함께 있습니다.
두 가지 방식 — 무엇을 언제
① SVG (.jt-ico-mask) | ② 폰트 (.jt-ico) | |
|---|---|---|
| 개수 | 29종 (/brand/icons/) | 7,798종 |
| CDN | 필요 없음 | 필요 |
| 언제 | 하단 탭바 · 주요 내비 · 오프라인 · 인쇄 | 일반 UI |
| 색 | currentColor — 다크 자동 대응 | 〃 |
<!-- ① SVG — 이 방식이 기본입니다 -->
<span class="jt-ico-mask"
style="--jt-ico-url:url(/brand/icons/science.svg)" aria-hidden="true"></span>
<!-- ② 폰트 — 아래 "폰트를 쓰려면" 절차를 먼저 -->
<span class="jt-ico" aria-hidden="true">settings</span>⚠️ 폰트를 쓰려면 한 줄을 켜야 합니다
🚫
아이콘 폰트는 기본으로 로드되지 않습니다. jt-tokens.css 안에 주석 처리돼 있습니다.
그냥 .jt-ico를 쓰면 아무것도 안 나오고, 에러도 없이 조용히 빈칸이 됩니다.
폰트 방식이 필요하면 앱의 <head>에 아래 한 줄을 직접 넣으세요.
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block">display=block입니다. swap을 쓰지 마세요.
swap이면 폰트가 뜨기 전에 settings, inventory_2 같은 리가처 원문이 그대로 화면에 노출되고 레이아웃이 무너집니다. 검증 중 실제로 재현된 사고입니다.
왜 기본으로 안 싣나요
| 사내망 차단 | CDN이 막히면 아이콘이 사라집니다. 주요 내비가 안 보이면 앱을 못 씁니다 |
| 불필요한 무게 | 아이콘 폰트가 필요 없는 앱에 강제로 얹지 않습니다 |
| 사고 위험 | 위의 리가처 노출 |
개발자센터 자체도 이 원칙을 지킵니다 — 사이트 전체에는 안 싣고, 이 페이지에서만 시연·자가진단용으로 불러옵니다.
자체 제작 아이콘
Material Symbols에 없을 때만 만듭니다. 있으면 무조건 Material 우선 — 임의 증식은 시스템을 망칩니다.
- 24×24 그리드,
viewBox="0 0 24 24" - 단색,
fill="currentColor"— 하드코딩 색 금지 - stroke-width 2, 둥근 캡·조인
- 형상은 20~22px 안에 (가장자리 여백 확보)
- 파일명 접두사
jt-(예:jt-ampoule.svg)
제안(메타포 + 왜 Material에 없는지 + 초안 SVG) → 디렉터 승인 → brand/icons-custom/ 등록.
접근성
| 케이스 | 처리 |
|---|---|
| 옆에 글자가 있는 장식 아이콘 | aria-hidden="true" — 읽으면 중복입니다 |
| 아이콘만 있는 버튼 | 버튼에 aria-label="설정 열기" |
| 아이콘이 정보를 전달할 때 | 글자를 함께 넣으세요 |
선정 근거(KRDS 제외 사유 포함)는 아이콘 & 일러스트.