디자인킷 · 아이콘
상태·기호 픽토그램 40종
D-아이콘-상태기호
언제 쓰는가
상태 표시, 방향, 가부, 주의에서 항목을 구분하거나 내용을 대신할 때 사용. 장표에서 <svg class="ic"><use href="#ic-이름"/></svg> 로 사용. 장식용으로 쓰지 않고 항목을 구분하거나 내용을 대신할 때만. 한 장에 아이콘 3~8개, 크기는 한 장 안에서 한 가지로 통일. 값 바꾸는 법: 덱에 넣을 때는 맨 앞 <svg class="sp">…</svg> 스프라이트를 문서에 한 번만 넣고(견본 격자 .g 는 빼도 됨), 쓸 자리에 <svg class="ic"><use href="#ic-이름"/></svg>. 선 속성은 symbol 안에 들어 있어 .ic 에는 width·height(기본 24px)와 color 만 주면 됨. 색은 color 로 조절(무채색 기본, 강조 1개만 var(--ac)). id 는 Lucide 원래 이름 앞에 ic- 를 붙인 것.
참고
Lucide Icons v1.52.0 (npm lucide-static, ISC License, https://lucide.dev, https://github.com/lucide-icons/lucide/blob/main/LICENSE). 일부 아이콘은 Feather(MIT) 파생. 경로 데이터는 패키지 원문 그대로, 선 굵기만 2에서 1.75로 조정. 묶음 구성과 한글 이름, 견본 격자는 직접 제작.
조각
<div class="dk dk-ic7">
<svg class="sp" width="0" height="0" aria-hidden="true"><symbol id="ic-check" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></g></symbol><symbol id="ic-x" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></g></symbol><symbol id="ic-circle-check" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m16 9-5.5 5.5L8 12"/></g></symbol><symbol id="ic-circle-x" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></g></symbol><symbol id="ic-circle-dot" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="12" r="10"/></g></symbol><symbol id="ic-circle-dashed" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M10.1 2.182a10 10 0 0 1 3.8 0"/><path d="M13.9 21.818a10 10 0 0 1-3.8 0"/><path d="M17.609 3.721a10 10 0 0 1 2.69 2.7"/><path d="M2.182 13.9a10 10 0 0 1 0-3.8"/><path d="M20.279 17.609a10 10 0 0 1-2.7 2.69"/><path d="M21.818 10.1a10 10 0 0 1 0 3.8"/><path d="M3.721 6.391a10 10 0 0 1 2.7-2.69"/><path d="M6.391 20.279a10 10 0 0 1-2.69-2.7"/></g></symbol><symbol id="ic-circle" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/></g></symbol><symbol id="ic-triangle-alert" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></g></symbol><symbol id="ic-circle-alert" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></g></symbol><symbol id="ic-info" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></g></symbol><symbol id="ic-circle-question-mark" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></g></symbol><symbol id="ic-ban" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M4.929 4.929 19.07 19.071"/></g></symbol><symbol id="ic-plus" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></g></symbol><symbol id="ic-minus" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></g></symbol><symbol id="ic-equal" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><line x1="5" x2="19" y1="9" y2="9"/><line x1="5" x2="19" y1="15" y2="15"/></g></symbol><symbol id="ic-percent" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><line x1="19" x2="5" y1="5" y2="19"/><circle cx="6.5" cy="6.5" r="2.5"/><circle cx="17.5" cy="17.5" r="2.5"/></g></symbol><symbol id="ic-arrow-right" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></g></symbol><symbol id="ic-arrow-left" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></g></symbol><symbol id="ic-arrow-up" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></g></symbol><symbol id="ic-arrow-down" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></g></symbol><symbol id="ic-arrow-up-right" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></g></symbol><symbol id="ic-arrow-down-right" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m7 7 10 10"/><path d="M17 7v10H7"/></g></symbol><symbol id="ic-arrow-right-left" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m16 3 4 4-4 4"/><path d="M20 7H4"/><path d="m8 21-4-4 4-4"/><path d="M4 17h16"/></g></symbol><symbol id="ic-move-right" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8L22 12L18 16"/><path d="M2 12H22"/></g></symbol><symbol id="ic-chevron-right" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></g></symbol><symbol id="ic-chevrons-right" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></g></symbol><symbol id="ic-corner-down-right" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m15 10 5 5-5 5"/><path d="M4 4v7a4 4 0 0 0 4 4h12"/></g></symbol><symbol id="ic-refresh-cw" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></g></symbol><symbol id="ic-external-link" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></g></symbol><symbol id="ic-lock" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></g></symbol><symbol id="ic-lock-open" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 9.9-1"/></g></symbol><symbol id="ic-shield-check" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/></g></symbol><symbol id="ic-eye" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></g></symbol><symbol id="ic-eye-off" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/></g></symbol><symbol id="ic-star" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/></g></symbol><symbol id="ic-flag" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528"/></g></symbol><symbol id="ic-pin" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/></g></symbol><symbol id="ic-bell" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></g></symbol><symbol id="ic-clock" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></g></symbol><symbol id="ic-zap" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M15.914 4a1.5 1.5 0 00-2.474-1.561l-9 9A1.5 1.5 0 005.5 14h4.002a.5.5 0 01.471.666L8.086 20a1.5 1.5 0 002.475 1.56l9-9A1.5 1.5 0 0018.5 10h-3.997a.5.5 0 01-.472-.667z"/></g></symbol></svg>
<div class="g">
<div class="c"><svg class="ic"><use href="#ic-check"/></svg><b>체크</b><span>ic-check</span></div>
<div class="c"><svg class="ic"><use href="#ic-x"/></svg><b>엑스</b><span>ic-x</span></div>
<div class="c"><svg class="ic"><use href="#ic-circle-check"/></svg><b>완료</b><span>ic-circle-check</span></div>
<div class="c"><svg class="ic"><use href="#ic-circle-x"/></svg><b>불가</b><span>ic-circle-x</span></div>
<div class="c"><svg class="ic"><use href="#ic-circle-dot"/></svg><b>진행</b><span>ic-circle-dot</span></div>
<div class="c"><svg class="ic"><use href="#ic-circle-dashed"/></svg><b>대기</b><span>ic-circle-dashed</span></div>
<div class="c"><svg class="ic"><use href="#ic-circle"/></svg><b>미착수</b><span>ic-circle</span></div>
<div class="c"><svg class="ic"><use href="#ic-triangle-alert"/></svg><b>경고</b><span>ic-triangle-alert</span></div>
<div class="c"><svg class="ic"><use href="#ic-circle-alert"/></svg><b>주의</b><span>ic-circle-alert</span></div>
<div class="c"><svg class="ic"><use href="#ic-info"/></svg><b>안내</b><span>ic-info</span></div>
<div class="c"><svg class="ic"><use href="#ic-circle-question-mark"/></svg><b>물음</b><span>ic-circle-question-mark</span></div>
<div class="c"><svg class="ic"><use href="#ic-ban"/></svg><b>금지</b><span>ic-ban</span></div>
<div class="c"><svg class="ic"><use href="#ic-plus"/></svg><b>플러스</b><span>ic-plus</span></div>
<div class="c"><svg class="ic"><use href="#ic-minus"/></svg><b>마이너스</b><span>ic-minus</span></div>
<div class="c"><svg class="ic"><use href="#ic-equal"/></svg><b>같음</b><span>ic-equal</span></div>
<div class="c"><svg class="ic"><use href="#ic-percent"/></svg><b>퍼센트</b><span>ic-percent</span></div>
<div class="c"><svg class="ic"><use href="#ic-arrow-right"/></svg><b>오른쪽</b><span>ic-arrow-right</span></div>
<div class="c"><svg class="ic"><use href="#ic-arrow-left"/></svg><b>왼쪽</b><span>ic-arrow-left</span></div>
<div class="c"><svg class="ic"><use href="#ic-arrow-up"/></svg><b>위</b><span>ic-arrow-up</span></div>
<div class="c"><svg class="ic"><use href="#ic-arrow-down"/></svg><b>아래</b><span>ic-arrow-down</span></div>
<div class="c"><svg class="ic"><use href="#ic-arrow-up-right"/></svg><b>상승</b><span>ic-arrow-up-right</span></div>
<div class="c"><svg class="ic"><use href="#ic-arrow-down-right"/></svg><b>하강</b><span>ic-arrow-down-right</span></div>
<div class="c"><svg class="ic"><use href="#ic-arrow-right-left"/></svg><b>교환</b><span>ic-arrow-right-left</span></div>
<div class="c"><svg class="ic"><use href="#ic-move-right"/></svg><b>긴화살표</b><span>ic-move-right</span></div>
<div class="c"><svg class="ic"><use href="#ic-chevron-right"/></svg><b>꺾쇠</b><span>ic-chevron-right</span></div>
<div class="c"><svg class="ic"><use href="#ic-chevrons-right"/></svg><b>이중꺾쇠</b><span>ic-chevrons-right</span></div>
<div class="c"><svg class="ic"><use href="#ic-corner-down-right"/></svg><b>하위</b><span>ic-corner-down-right</span></div>
<div class="c"><svg class="ic"><use href="#ic-refresh-cw"/></svg><b>갱신</b><span>ic-refresh-cw</span></div>
<div class="c"><svg class="ic"><use href="#ic-external-link"/></svg><b>외부링크</b><span>ic-external-link</span></div>
<div class="c"><svg class="ic"><use href="#ic-lock"/></svg><b>잠금</b><span>ic-lock</span></div>
<div class="c"><svg class="ic"><use href="#ic-lock-open"/></svg><b>해제</b><span>ic-lock-open</span></div>
<div class="c"><svg class="ic"><use href="#ic-shield-check"/></svg><b>보호</b><span>ic-shield-check</span></div>
<div class="c"><svg class="ic"><use href="#ic-eye"/></svg><b>공개</b><span>ic-eye</span></div>
<div class="c"><svg class="ic"><use href="#ic-eye-off"/></svg><b>비공개</b><span>ic-eye-off</span></div>
<div class="c"><svg class="ic"><use href="#ic-star"/></svg><b>중요</b><span>ic-star</span></div>
<div class="c"><svg class="ic"><use href="#ic-flag"/></svg><b>표시</b><span>ic-flag</span></div>
<div class="c"><svg class="ic"><use href="#ic-pin"/></svg><b>고정</b><span>ic-pin</span></div>
<div class="c"><svg class="ic"><use href="#ic-bell"/></svg><b>알림</b><span>ic-bell</span></div>
<div class="c"><svg class="ic"><use href="#ic-clock"/></svg><b>예정</b><span>ic-clock</span></div>
<div class="c"><svg class="ic"><use href="#ic-zap"/></svg><b>즉시</b><span>ic-zap</span></div>
</div>
</div>스타일
.dk-ic7 .sp{position:absolute}
.dk-ic7 .g{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px 4px}
.dk-ic7 .c{display:flex;flex-direction:column;align-items:center;text-align:center;padding:8px 2px 6px;border-radius:var(--r-sm);background:var(--card)}
.dk-ic7 .ic{width:26px;height:26px;color:var(--ink);margin-bottom:6px}
.dk-ic7 .c b{font-size:var(--f-cap);font-weight:600;color:var(--ink2);line-height:1.35}
.dk-ic7 .c span{font-size:var(--f-cap);color:var(--mu);line-height:1.3;overflow-wrap:anywhere}