디자인 아틀라스
EN
⬡ 아이콘·일러스트

듀오톤 아이콘

Duotone Icon

한 아이콘을 두 개의 평면 레이어로 나눠, 옅은 톤은 배경을 진한 톤은 강조를 맡기는 방식 — 그림자 없이 색 두 개로 위계를 만든다.

다른 이름: Two-tone icon
···
html
<div class="stage">
  <svg viewBox="0 0 24 24" class="ic">
    <path id="back" d="M3 6a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z" fill="var(--accent)" opacity=".3"/>
    <path id="front" d="M6 10h12v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1Z" fill="var(--accent)"/>
  </svg>
</div>
css
.stage{width:clamp(64px,26vmin,110px);aspect-ratio:1;overflow:visible}
.ic{width:100%;height:100%;display:block;overflow:visible}
#front{transform-box:fill-box;transform-origin:center;animation:lift 2.6s ease-in-out infinite}
@keyframes lift{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

듀오톤 아이콘은 한 아이콘을 두 개의 평면 레이어로 나눠, 하나는 옅은 톤(보통 같은 색의 20~35% 불투명도)으로 배경 역할을, 다른 하나는 진한 톤으로 강조 역할을 맡긴다. 그레이디언트나 그림자 없이 순수하게 색 두 개만으로 입체감과 위계를 만든다는 게 핵심이다.

보통 같은 색상의 두 가지 명도(옅음/진함)를 쓰거나, 서로 다른 두 액센트 색을 쓴다. 어느 쪽이든 진한 레이어가 아이콘의 "의미를 결정하는 부분"(체크마크, 화살표, 숫자)을 맡고, 옅은 레이어는 그 배경이 되는 형태(폴더, 말풍선, 카드)를 맡는 역할 분담이 일관되게 유지돼야 세트 전체가 정돈돼 보인다.

라인·솔리드 아이콘보다 화려해서 마케팅 페이지나 온보딩 화면처럼 시선을 끌어야 하는 자리에 잘 맞는다. 다만 색이 늘어난 만큼 시스템 전체에 적용하면 무거워 보일 수 있어서, 앱의 핵심 UI(툴바, 탭바)보다는 강조가 필요한 소수의 지점에만 제한적으로 쓰는 편이 낫다.

언제 쓰나

마케팅 페이지, 온보딩, 기능 소개 카드처럼 시선을 끌어야 하는 소수의 지점에 제한적으로 쓰세요. 툴바·탭바 같은 핵심 UI 전체에 적용하면 무거워 보입니다.