디자인킷 · 아이콘
성과·지표 픽토그램 40종
D-아이콘-성과지표
언제 쓰는가
KPI, 성과 요약, 목표 대비 실적에서 항목을 구분하거나 내용을 대신할 때 사용. 장표에서 <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-ic2">
<svg class="sp" width="0" height="0" aria-hidden="true"><symbol id="ic-trending-up" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M16 7h6v6"/><path d="m22 7-8.5 8.5-5-5L2 17"/></g></symbol><symbol id="ic-trending-down" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M16 17h6v-6"/><path d="m22 17-8.5-8.5-5 5L2 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-target" 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"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></g></symbol><symbol id="ic-goal" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 13V2l8 4-8 4"/><path d="M20.561 10.222a9 9 0 1 1-12.55-5.29"/><path d="M8.002 9.997a5 5 0 1 0 8.9 2.02"/></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-mouse-pointer-click" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14 4.1 12 6"/><path d="m5.1 8-2.9-.8"/><path d="m6 12-1.9 2"/><path d="M7.2 2.2 8 5.1"/><path d="M9.037 9.69a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074z"/></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-funnel" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"/></g></symbol><symbol id="ic-shopping-cart" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m2.05 2.05 1.099-.028a1 1 0 0 1 1.008.815l2.69 14.347A1 1 0 0 0 7.83 18H18"/><path d="M4.563 5h16.435a1 1 0 0 1 .981 1.204l-1.026 6.226A2 2 0 0 1 18.962 14H6.25"/><circle cx="18" cy="20" r="2"/><circle cx="8" cy="20" r="2"/></g></symbol><symbol id="ic-download" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></g></symbol><symbol id="ic-phone-call" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2a9 9 0 0 1 9 9"/><path d="M13 6a5 5 0 0 1 5 5"/><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"/></g></symbol><symbol id="ic-user-plus" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" x2="19" y1="8" y2="14"/><line x1="22" x2="16" y1="11" y2="11"/></g></symbol><symbol id="ic-repeat" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m17 2 4 4-4 4"/><path d="M3 11v-1a4 4 0 0 1 4-4h14"/><path d="m7 22-4-4 4-4"/><path d="M21 13v1a4 4 0 0 1-4 4H3"/></g></symbol><symbol id="ic-timer" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><line x1="10" x2="14" y1="2" y2="2"/><line x1="12" x2="15" y1="14" y2="11"/><circle cx="12" cy="14" r="8"/></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-gauge" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m12 14 4-4"/><path d="M3.34 19a10 10 0 1 1 17.32 0"/></g></symbol><symbol id="ic-activity" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"/></g></symbol><symbol id="ic-chart-column" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="M18 17V9"/><path d="M13 17V5"/><path d="M8 17v-3"/></g></symbol><symbol id="ic-chart-line" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="m19 9-5 5-4-4-3 3"/></g></symbol><symbol id="ic-chart-pie" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z"/><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/></g></symbol><symbol id="ic-chart-bar" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="M7 16h8"/><path d="M7 11h12"/><path d="M7 6h3"/></g></symbol><symbol id="ic-chart-area" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="M7 11.207a.5.5 0 0 1 .146-.353l2-2a.5.5 0 0 1 .708 0l3.292 3.292a.5.5 0 0 0 .708 0l4.292-4.292a.5.5 0 0 1 .854.353V16a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1z"/></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-coins" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M13.744 17.736a6 6 0 1 1-7.48-7.48"/><path d="M15 6h1v4"/><path d="m6.134 14.768.866-.5 2 3.464"/><circle cx="16" cy="8" r="6"/></g></symbol><symbol id="ic-circle-dollar-sign" 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 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"/><path d="M12 18V6"/></g></symbol><symbol id="ic-banknote" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="12" x="2" y="6" rx="2"/><circle cx="12" cy="12" r="2"/><path d="M6 12h.01M18 12h.01"/></g></symbol><symbol id="ic-calculator" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect width="16" height="20" x="4" y="2" rx="2"/><line x1="8" x2="16" y1="6" y2="6"/><line x1="16" x2="16" y1="14" y2="18"/><path d="M16 10h.01"/><path d="M12 10h.01"/><path d="M8 10h.01"/><path d="M12 14h.01"/><path d="M8 14h.01"/><path d="M12 18h.01"/><path d="M8 18h.01"/></g></symbol><symbol id="ic-scale" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v18"/><path d="m19 8 3 8a5 5 0 0 1-6 0zV7"/><path d="M3 7h1a17 17 0 0 0 8-2 17 17 0 0 0 8 2h1"/><path d="m5 8 3 8a5 5 0 0 1-6 0zV7"/><path d="M7 21h10"/></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><symbol id="ic-rocket" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09"/><path d="M9 12a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.4 22.4 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 .05 5 .05"/></g></symbol><symbol id="ic-award" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526"/><circle cx="12" cy="8" r="6"/></g></symbol><symbol id="ic-trophy" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M10 14.66V17a1 1 0 0 1-1 1 2 2 0 0 0-2 2v2"/><path d="M14 14.66V17a1 1 0 0 0 1 1 2 2 0 0 1 2 2v2"/><path d="M17.916 10H19.5A2.5 2.5 0 0 0 22 7.5V5a1 1 0 0 0-1-1h-3"/><path d="M4 22h16"/><path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z"/><path d="M6.084 10H4.5A2.5 2.5 0 0 1 2 7.5V5a1 1 0 0 1 1-1h3"/></g></symbol><symbol id="ic-medal" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M7.21 15 2.66 7.14a2 2 0 0 1 .13-2.2L4.4 2.8A2 2 0 0 1 6 2h12a2 2 0 0 1 1.6.8l1.6 2.14a2 2 0 0 1 .14 2.2L16.79 15"/><path d="M11 12 5.12 2.2"/><path d="m13 12 5.88-9.8"/><path d="M8 7h8"/><circle cx="12" cy="17" r="5"/><path d="M12 18v-2h-.5"/></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-thumbs-up" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"/><path d="M7 10v12"/></g></symbol><symbol id="ic-heart" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"/></g></symbol><symbol id="ic-database" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5V19A9 3 0 0 0 21 19V5"/><path d="M3 12A9 3 0 0 0 21 12"/></g></symbol><symbol id="ic-layers" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"/><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"/><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"/></g></symbol></svg>
<div class="g">
<div class="c"><svg class="ic"><use href="#ic-trending-up"/></svg><b>상승</b><span>ic-trending-up</span></div>
<div class="c"><svg class="ic"><use href="#ic-trending-down"/></svg><b>하락</b><span>ic-trending-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-target"/></svg><b>목표</b><span>ic-target</span></div>
<div class="c"><svg class="ic"><use href="#ic-goal"/></svg><b>달성</b><span>ic-goal</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-mouse-pointer-click"/></svg><b>클릭</b><span>ic-mouse-pointer-click</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-funnel"/></svg><b>전환</b><span>ic-funnel</span></div>
<div class="c"><svg class="ic"><use href="#ic-shopping-cart"/></svg><b>구매</b><span>ic-shopping-cart</span></div>
<div class="c"><svg class="ic"><use href="#ic-download"/></svg><b>설치</b><span>ic-download</span></div>
<div class="c"><svg class="ic"><use href="#ic-phone-call"/></svg><b>전화문의</b><span>ic-phone-call</span></div>
<div class="c"><svg class="ic"><use href="#ic-user-plus"/></svg><b>가입</b><span>ic-user-plus</span></div>
<div class="c"><svg class="ic"><use href="#ic-repeat"/></svg><b>재구매</b><span>ic-repeat</span></div>
<div class="c"><svg class="ic"><use href="#ic-timer"/></svg><b>체류시간</b><span>ic-timer</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-gauge"/></svg><b>속도</b><span>ic-gauge</span></div>
<div class="c"><svg class="ic"><use href="#ic-activity"/></svg><b>추이</b><span>ic-activity</span></div>
<div class="c"><svg class="ic"><use href="#ic-chart-column"/></svg><b>막대</b><span>ic-chart-column</span></div>
<div class="c"><svg class="ic"><use href="#ic-chart-line"/></svg><b>선</b><span>ic-chart-line</span></div>
<div class="c"><svg class="ic"><use href="#ic-chart-pie"/></svg><b>비중</b><span>ic-chart-pie</span></div>
<div class="c"><svg class="ic"><use href="#ic-chart-bar"/></svg><b>가로막대</b><span>ic-chart-bar</span></div>
<div class="c"><svg class="ic"><use href="#ic-chart-area"/></svg><b>누적</b><span>ic-chart-area</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-coins"/></svg><b>비용</b><span>ic-coins</span></div>
<div class="c"><svg class="ic"><use href="#ic-circle-dollar-sign"/></svg><b>매출</b><span>ic-circle-dollar-sign</span></div>
<div class="c"><svg class="ic"><use href="#ic-banknote"/></svg><b>예산</b><span>ic-banknote</span></div>
<div class="c"><svg class="ic"><use href="#ic-calculator"/></svg><b>산출</b><span>ic-calculator</span></div>
<div class="c"><svg class="ic"><use href="#ic-scale"/></svg><b>비교</b><span>ic-scale</span></div>
<div class="c"><svg class="ic"><use href="#ic-zap"/></svg><b>효율</b><span>ic-zap</span></div>
<div class="c"><svg class="ic"><use href="#ic-rocket"/></svg><b>성장</b><span>ic-rocket</span></div>
<div class="c"><svg class="ic"><use href="#ic-award"/></svg><b>수상</b><span>ic-award</span></div>
<div class="c"><svg class="ic"><use href="#ic-trophy"/></svg><b>1위</b><span>ic-trophy</span></div>
<div class="c"><svg class="ic"><use href="#ic-medal"/></svg><b>순위</b><span>ic-medal</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-thumbs-up"/></svg><b>호응</b><span>ic-thumbs-up</span></div>
<div class="c"><svg class="ic"><use href="#ic-heart"/></svg><b>좋아요</b><span>ic-heart</span></div>
<div class="c"><svg class="ic"><use href="#ic-database"/></svg><b>데이터</b><span>ic-database</span></div>
<div class="c"><svg class="ic"><use href="#ic-layers"/></svg><b>누적층</b><span>ic-layers</span></div>
</div>
</div>스타일
.dk-ic2 .sp{position:absolute}
.dk-ic2 .g{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px 4px}
.dk-ic2 .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-ic2 .ic{width:26px;height:26px;color:var(--ink);margin-bottom:6px}
.dk-ic2 .c b{font-size:var(--f-cap);font-weight:600;color:var(--ink2);line-height:1.35}
.dk-ic2 .c span{font-size:var(--f-cap);color:var(--mu);line-height:1.3;overflow-wrap:anywhere}