Icon
CSS mask + currentColor 방식 —
<i class="ico ico-name">. 색은 부모 글자색을 따라가고, 크기는
.ico-20 / .ico-24 로 조절. 분류: line·fill(단색,
mask) / other(멀티컬러, <img>)
사용법
.ico + .ico-{name} · 색=currentColor
<!-- 기본(16) · 색은 글자색을 따름 -->
<i class="ico ico-search"></i>
<!-- 크기 -->
<i class="ico ico-search ico-20"></i>
<i class="ico ico-search ico-24"></i>
<!-- 색은 부모 color 로 (버튼/텍스트와 자동 일치) -->
<button class="btn btn-primary"><i class="ico ico-user"></i> 회원</button>
색 (currentColor)
크기 (16 / 20 / 24)
Line 세트 (43)
/img/icons/line/*.svg · 단색
ico-user
ico-login
ico-logout
ico-search
ico-guide-info
ico-time
ico-calendar
ico-email
ico-file
ico-contents-show
ico-contents-hide
ico-arrow-up
ico-arrow-down
ico-arrow-left
ico-arrow-right
ico-arrow-up-bold
ico-arrow-down-bold
ico-arrow-left-double
ico-arrow-right-double
ico-arrow-o-right
ico-close
ico-close-bold
ico-plus
ico-minus
ico-company
ico-megaphone
ico-resize-handle
ico-guide-book
ico-delete
ico-deleted-items
ico-success
ico-noti
ico-tree-plus
ico-tree-minus
ico-home
ico-card
ico-key
ico-statistics
ico-certificationinfo
ico-setting
ico-kms
ico-contents
ico-operation
Fill 세트 (2)
/img/icons/fill/*.svg · 단색 · line 과 동일 사용법
ico-certified
ico-guide-info-fill
Other 세트 (멀티컬러)
색 보존 필요 → mask 불가, <img> 로 사용
<!-- 멀티컬러는 색을 살려야 해서 mask 대신 img -->
<img class="ico-img" src="/img/icons/other/excel.svg" alt="Excel">
<!-- 크기는 .ico-20 / .ico-24 또는 인라인 -->
excel (24)
remove (16)
state_application (48)
state_register (48)
state_approval (48)
state_return (48)
state_nohistory (48)
photo (48)
