매체·채널 픽토그램 36종

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-ic0">
  <svg class="sp" width="0" height="0" aria-hidden="true"><symbol id="ic-search" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></g></symbol><symbol id="ic-shopping-bag" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M16 10a4 4 0 0 1-8 0"/><path d="M3.103 6.034h17.794"/><path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"/></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-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-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-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-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-map-pin" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></g></symbol><symbol id="ic-map" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z"/><path d="M15 5.764v15"/><path d="M9 3.236v15"/></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-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-mail" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"/><rect x="2" y="4" width="20" height="16" rx="2"/></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-smartphone" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/></g></symbol><symbol id="ic-monitor" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="3" rx="2"/><line x1="8" x2="16" y1="21" y2="21"/><line x1="12" x2="12" y1="17" y2="21"/></g></symbol><symbol id="ic-tv" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m17 2-5 5-5-5"/><rect width="20" height="15" x="2" y="7" rx="2"/></g></symbol><symbol id="ic-radio" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M16.247 7.761a6 6 0 0 1 0 8.478"/><path d="M19.075 4.933a10 10 0 0 1 0 14.134"/><path d="M4.925 19.067a10 10 0 0 1 0-14.134"/><path d="M7.753 16.239a6 6 0 0 1 0-8.478"/><circle cx="12" cy="12" r="2"/></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-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-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-globe" 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 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></g></symbol><symbol id="ic-app-window" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M10 4v4"/><path d="M2 8h20"/><path d="M6 4v4"/></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-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-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-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-store" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M15 21v-5a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v5"/><path d="M17.774 10.31a1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.451 0 1.12 1.12 0 0 0-1.548 0 2.5 2.5 0 0 1-3.452 0 1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.77-3.248l2.889-4.184A2 2 0 0 1 7 2h10a2 2 0 0 1 1.653.873l2.895 4.192a2.5 2.5 0 0 1-3.774 3.244"/><path d="M4 10.95V19a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8.05"/></g></symbol><symbol id="ic-qr-code" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect width="5" height="5" x="3" y="3" rx="1"/><rect width="5" height="5" x="16" y="3" rx="1"/><rect width="5" height="5" x="3" y="16" rx="1"/><path d="M21 16h-3a2 2 0 0 0-2 2v3"/><path d="M21 21v.01"/><path d="M12 7v3a2 2 0 0 1-2 2H7"/><path d="M3 12h.01"/><path d="M12 3h.01"/><path d="M12 16v.01"/><path d="M16 12h1"/><path d="M21 12v.01"/><path d="M12 21v-1"/></g></symbol><symbol id="ic-phone" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><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-bus-front" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6 2 7"/><path d="M10 6h4"/><path d="m22 7-2-1"/><rect width="16" height="16" x="4" y="3" rx="2"/><path d="M4 11h16"/><path d="M8 15h.01"/><path d="M16 15h.01"/><path d="M6 19v2"/><path d="M18 21v-2"/></g></symbol><symbol id="ic-signpost" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 13v8"/><path d="M12 3v3"/><path d="M2.354 10.354a1.207 1.207 0 0 1 0-1.708l2.06-2.06A2 2 0 0 1 5.828 6h12.344a2 2 0 0 1 1.414.586l2.06 2.06a1.207 1.207 0 0 1 0 1.708l-2.06 2.06a2 2 0 0 1-1.414.586H5.828a2 2 0 0 1-1.414-.586z"/></g></symbol><symbol id="ic-radio-tower" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M4.9 16.1C1 12.2 1 5.8 4.9 1.9"/><path d="M7.8 4.7a6.14 6.14 0 0 0-.8 7.5"/><circle cx="12" cy="9" r="2"/><path d="M16.2 4.8c2 2 2.26 5.11.8 7.47"/><path d="M19.1 1.9a9.96 9.96 0 0 1 0 14.1"/><path d="M9.5 18h5"/><path d="m8 22 4-11 4 11"/></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-headphones" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3"/></g></symbol><symbol id="ic-users" 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"/><path d="M16 3.128a4 4 0 0 1 0 7.744"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><circle cx="9" cy="7" r="4"/></g></symbol></svg>
  <div class="g">
    <div class="c"><svg class="ic"><use href="#ic-search"/></svg><b>검색</b><span>ic-search</span></div>
    <div class="c"><svg class="ic"><use href="#ic-shopping-bag"/></svg><b>쇼핑</b><span>ic-shopping-bag</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-circle-play"/></svg><b>영상광고</b><span>ic-circle-play</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-message-circle"/></svg><b>메시지</b><span>ic-message-circle</span></div>
    <div class="c"><svg class="ic"><use href="#ic-send"/></svg><b>DM</b><span>ic-send</span></div>
    <div class="c"><svg class="ic"><use href="#ic-map-pin"/></svg><b>지도</b><span>ic-map-pin</span></div>
    <div class="c"><svg class="ic"><use href="#ic-map"/></svg><b>플레이스</b><span>ic-map</span></div>
    <div class="c"><svg class="ic"><use href="#ic-share-2"/></svg><b>SNS</b><span>ic-share-2</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-mail"/></svg><b>메일</b><span>ic-mail</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-smartphone"/></svg><b>모바일</b><span>ic-smartphone</span></div>
    <div class="c"><svg class="ic"><use href="#ic-monitor"/></svg><b>PC</b><span>ic-monitor</span></div>
    <div class="c"><svg class="ic"><use href="#ic-tv"/></svg><b>TV</b><span>ic-tv</span></div>
    <div class="c"><svg class="ic"><use href="#ic-radio"/></svg><b>라디오</b><span>ic-radio</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-newspaper"/></svg><b>뉴스</b><span>ic-newspaper</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-globe"/></svg><b>웹사이트</b><span>ic-globe</span></div>
    <div class="c"><svg class="ic"><use href="#ic-app-window"/></svg><b>랜딩</b><span>ic-app-window</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-image"/></svg><b>이미지</b><span>ic-image</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-messages-square"/></svg><b>커뮤니티</b><span>ic-messages-square</span></div>
    <div class="c"><svg class="ic"><use href="#ic-store"/></svg><b>매장</b><span>ic-store</span></div>
    <div class="c"><svg class="ic"><use href="#ic-qr-code"/></svg><b>QR</b><span>ic-qr-code</span></div>
    <div class="c"><svg class="ic"><use href="#ic-phone"/></svg><b>전화</b><span>ic-phone</span></div>
    <div class="c"><svg class="ic"><use href="#ic-bus-front"/></svg><b>교통광고</b><span>ic-bus-front</span></div>
    <div class="c"><svg class="ic"><use href="#ic-signpost"/></svg><b>옥외</b><span>ic-signpost</span></div>
    <div class="c"><svg class="ic"><use href="#ic-radio-tower"/></svg><b>방송</b><span>ic-radio-tower</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-headphones"/></svg><b>스트리밍</b><span>ic-headphones</span></div>
    <div class="c"><svg class="ic"><use href="#ic-users"/></svg><b>인플루언서</b><span>ic-users</span></div>
  </div>
</div>

스타일

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