제안 시스템

디자인킷 · 아이콘

콘텐츠 픽토그램 40종

D-아이콘-콘텐츠

콘텐츠 픽토그램 40종

언제 쓰는가

콘텐츠 유형, 제작 계획, 소재 구성에서 항목을 구분하거나 내용을 대신할 때 사용. 장표에서 <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-ic5">
  <svg class="sp" width="0" height="0" aria-hidden="true"><symbol id="ic-file-text" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></g></symbol><symbol id="ic-pen-line" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M13 21h8"/><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/></g></symbol><symbol id="ic-type" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4v16"/><path d="M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2"/><path d="M9 20h6"/></g></symbol><symbol id="ic-quote" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"/><path d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"/></g></symbol><symbol id="ic-newspaper" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18h-5"/><path d="M18 14h-8"/><path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/><rect width="8" height="4" x="10" y="6" rx="1"/></g></symbol><symbol id="ic-book-open" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v16"/><path d="M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z"/></g></symbol><symbol id="ic-image" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></g></symbol><symbol id="ic-images" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m22 11-1.296-1.296a2.4 2.4 0 0 0-3.408 0L11 16"/><path d="M4 8a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2"/><circle cx="13" cy="7" r="1" fill="currentColor"/><rect x="8" y="2" width="14" height="14" rx="2"/></g></symbol><symbol id="ic-camera" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z"/><circle cx="12" cy="13" r="3"/></g></symbol><symbol id="ic-gallery-horizontal" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3v18"/><rect width="12" height="18" x="6" y="3" rx="2"/><path d="M22 3v18"/></g></symbol><symbol id="ic-video" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"/><rect x="2" y="6" width="14" height="12" rx="2"/></g></symbol><symbol id="ic-film" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M7 3v18"/><path d="M3 7.5h4"/><path d="M3 12h18"/><path d="M3 16.5h4"/><path d="M17 3v18"/><path d="M17 7.5h4"/><path d="M17 16.5h4"/></g></symbol><symbol id="ic-clapperboard" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m12.296 3.464 3.02 3.956"/><path d="M20.2 6 3 11l-.9-2.4c-.3-1.1.3-2.2 1.3-2.5l13.5-4c1.1-.3 2.2.3 2.5 1.3z"/><path d="M3 11h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="m6.18 5.276 3.1 3.899"/></g></symbol><symbol id="ic-circle-play" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M9 9.003a1 1 0 0 1 1.517-.859l4.997 2.997a1 1 0 0 1 0 1.718l-4.997 2.997A1 1 0 0 1 9 14.996z"/><circle cx="12" cy="12" r="10"/></g></symbol><symbol id="ic-captions" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="14" x="3" y="5" rx="2" ry="2"/><path d="M7 15h4M15 15h2M7 11h2M13 11h4"/></g></symbol><symbol id="ic-mic" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19v3"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><rect x="9" y="2" width="6" height="13" rx="3"/></g></symbol><symbol id="ic-podcast" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 17v4"/><path d="M18 11a6 6 0 00-3-5.197"/><path d="M2 11a10 10 0 015-8.662"/><path d="M22 11a10 10 0 00-5-8.662"/><path d="M6 11a6 6 0 013-5.197"/><path d="M9 21h6"/><rect x="10" y="9" width="4" height="8" rx="2"/></g></symbol><symbol id="ic-music" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></g></symbol><symbol id="ic-message-circle" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"/></g></symbol><symbol id="ic-messages-square" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M16 10a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 14.286V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/><path d="M20 9a2 2 0 0 1 2 2v10.286a.71.71 0 0 1-1.212.502l-2.202-2.202A2 2 0 0 0 17.172 19H10a2 2 0 0 1-2-2v-1"/></g></symbol><symbol id="ic-share-2" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></g></symbol><symbol id="ic-send" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/></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-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-bookmark" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z"/></g></symbol><symbol id="ic-hash" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="20" y1="9" y2="9"/><line x1="4" x2="20" y1="15" y2="15"/><line x1="10" x2="8" y1="3" y2="21"/><line x1="16" x2="14" y1="3" y2="21"/></g></symbol><symbol id="ic-at-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="4"/><path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8"/></g></symbol><symbol id="ic-link" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></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-rss" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 0 1 9 9"/><path d="M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1"/></g></symbol><symbol id="ic-megaphone" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M11 6a13 13 0 0 0 8.4-2.8A1 1 0 0 1 21 4v12a1 1 0 0 1-1.6.8A13 13 0 0 0 11 14H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z"/><path d="M6 14a12 12 0 0 0 2.4 7.2 2 2 0 0 0 3.2-2.4A8 8 0 0 1 10 14"/><path d="M8 6v8"/></g></symbol><symbol id="ic-palette" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"/><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/></g></symbol><symbol id="ic-layout-template" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="7" x="3" y="3" rx="1"/><rect width="9" height="7" x="3" y="14" rx="1"/><rect width="5" height="7" x="16" y="14" rx="1"/></g></symbol><symbol id="ic-layout-grid" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/></g></symbol><symbol id="ic-scissors" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="3"/><path d="M8.12 8.12 12 12"/><path d="M20 4 8.12 15.88"/><circle cx="6" cy="18" r="3"/><path d="M14.8 14.8 20 20"/></g></symbol><symbol id="ic-wand-sparkles" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72"/><path d="m14 7 3 3"/><path d="M5 6v4"/><path d="M19 14v4"/><path d="M10 2v2"/><path d="M7 8H3"/><path d="M21 16h-4"/><path d="M11 3H9"/></g></symbol><symbol id="ic-sparkles" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"/><path d="M20 2v4"/><path d="M22 4h-4"/><circle cx="4" 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-upload" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12"/><path d="m17 8-5-5-5 5"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/></g></symbol><symbol id="ic-calendar-days" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v3"/><path d="M16 2v3"/><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M8 13h.01"/><path d="M12 13h.01"/><path d="M16 13h.01"/><path d="M8 17h.01"/><path d="M12 17h.01"/><path d="M16 17h.01"/></g></symbol></svg>
  <div class="g">
    <div class="c"><svg class="ic"><use href="#ic-file-text"/></svg><b>글</b><span>ic-file-text</span></div>
    <div class="c"><svg class="ic"><use href="#ic-pen-line"/></svg><b>작성</b><span>ic-pen-line</span></div>
    <div class="c"><svg class="ic"><use href="#ic-type"/></svg><b>타이포</b><span>ic-type</span></div>
    <div class="c"><svg class="ic"><use href="#ic-quote"/></svg><b>인용</b><span>ic-quote</span></div>
    <div class="c"><svg class="ic"><use href="#ic-newspaper"/></svg><b>기사</b><span>ic-newspaper</span></div>
    <div class="c"><svg class="ic"><use href="#ic-book-open"/></svg><b>가이드</b><span>ic-book-open</span></div>
    <div class="c"><svg class="ic"><use href="#ic-image"/></svg><b>사진</b><span>ic-image</span></div>
    <div class="c"><svg class="ic"><use href="#ic-images"/></svg><b>사진묶음</b><span>ic-images</span></div>
    <div class="c"><svg class="ic"><use href="#ic-camera"/></svg><b>촬영</b><span>ic-camera</span></div>
    <div class="c"><svg class="ic"><use href="#ic-gallery-horizontal"/></svg><b>캐러셀</b><span>ic-gallery-horizontal</span></div>
    <div class="c"><svg class="ic"><use href="#ic-video"/></svg><b>영상</b><span>ic-video</span></div>
    <div class="c"><svg class="ic"><use href="#ic-film"/></svg><b>필름</b><span>ic-film</span></div>
    <div class="c"><svg class="ic"><use href="#ic-clapperboard"/></svg><b>숏폼</b><span>ic-clapperboard</span></div>
    <div class="c"><svg class="ic"><use href="#ic-circle-play"/></svg><b>재생</b><span>ic-circle-play</span></div>
    <div class="c"><svg class="ic"><use href="#ic-captions"/></svg><b>자막</b><span>ic-captions</span></div>
    <div class="c"><svg class="ic"><use href="#ic-mic"/></svg><b>녹음</b><span>ic-mic</span></div>
    <div class="c"><svg class="ic"><use href="#ic-podcast"/></svg><b>팟캐스트</b><span>ic-podcast</span></div>
    <div class="c"><svg class="ic"><use href="#ic-music"/></svg><b>음원</b><span>ic-music</span></div>
    <div class="c"><svg class="ic"><use href="#ic-message-circle"/></svg><b>댓글</b><span>ic-message-circle</span></div>
    <div class="c"><svg class="ic"><use href="#ic-messages-square"/></svg><b>대화</b><span>ic-messages-square</span></div>
    <div class="c"><svg class="ic"><use href="#ic-share-2"/></svg><b>공유</b><span>ic-share-2</span></div>
    <div class="c"><svg class="ic"><use href="#ic-send"/></svg><b>전송</b><span>ic-send</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-thumbs-up"/></svg><b>추천</b><span>ic-thumbs-up</span></div>
    <div class="c"><svg class="ic"><use href="#ic-bookmark"/></svg><b>저장</b><span>ic-bookmark</span></div>
    <div class="c"><svg class="ic"><use href="#ic-hash"/></svg><b>해시태그</b><span>ic-hash</span></div>
    <div class="c"><svg class="ic"><use href="#ic-at-sign"/></svg><b>멘션</b><span>ic-at-sign</span></div>
    <div class="c"><svg class="ic"><use href="#ic-link"/></svg><b>링크</b><span>ic-link</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-rss"/></svg><b>피드</b><span>ic-rss</span></div>
    <div class="c"><svg class="ic"><use href="#ic-megaphone"/></svg><b>공지</b><span>ic-megaphone</span></div>
    <div class="c"><svg class="ic"><use href="#ic-palette"/></svg><b>디자인</b><span>ic-palette</span></div>
    <div class="c"><svg class="ic"><use href="#ic-layout-template"/></svg><b>템플릿</b><span>ic-layout-template</span></div>
    <div class="c"><svg class="ic"><use href="#ic-layout-grid"/></svg><b>그리드</b><span>ic-layout-grid</span></div>
    <div class="c"><svg class="ic"><use href="#ic-scissors"/></svg><b>편집</b><span>ic-scissors</span></div>
    <div class="c"><svg class="ic"><use href="#ic-wand-sparkles"/></svg><b>보정</b><span>ic-wand-sparkles</span></div>
    <div class="c"><svg class="ic"><use href="#ic-sparkles"/></svg><b>신규</b><span>ic-sparkles</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-upload"/></svg><b>업로드</b><span>ic-upload</span></div>
    <div class="c"><svg class="ic"><use href="#ic-calendar-days"/></svg><b>발행일정</b><span>ic-calendar-days</span></div>
  </div>
</div>

스타일

.dk-ic5 .sp{position:absolute}
.dk-ic5 .g{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px 4px}
.dk-ic5 .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-ic5 .ic{width:26px;height:26px;color:var(--ink);margin-bottom:6px}
.dk-ic5 .c b{font-size:var(--f-cap);font-weight:600;color:var(--ink2);line-height:1.35}
.dk-ic5 .c span{font-size:var(--f-cap);color:var(--mu);line-height:1.3;overflow-wrap:anywhere}