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

솔리드 아이콘

Solid Icon

윤곽선 없이 면 전체를 색으로 채운 아이콘 — 작은 크기에서도 형태가 뭉개지지 않아 눈에 잘 띈다.

다른 이름: Filled iconGlyph icon
···
html
<div class="row">
  <svg viewBox="0 0 24 24" class="ic"><circle cx="10" cy="10" r="5.5" fill="none" stroke="var(--fg)" stroke-width="3.4"/><line x1="14.6" y1="14.6" x2="20" y2="20" stroke="var(--fg)" stroke-width="3.4" stroke-linecap="round"/></svg>
  <svg viewBox="0 0 24 24" class="ic"><path d="M12 19C6 14.5 3 11 3 7.8 3 5.1 5.1 3 7.7 3 9.4 3 10.9 3.9 12 5.3 13.1 3.9 14.6 3 16.3 3 18.9 3 21 5.1 21 7.8 21 11 18 14.5 12 19Z" fill="var(--fg)"/></svg>
  <svg viewBox="0 0 24 24" class="ic"><path d="M12 2a1 1 0 0 1 1 1v1.06A6.002 6.002 0 0 1 18 10v5.586l1.707 1.707A1 1 0 0 1 19 19H5a1 1 0 0 1-.707-1.707L6 15.586V10a6.002 6.002 0 0 1 5-5.94V3a1 1 0 0 1 1-1Z" fill="var(--fg)"/><path d="M9.5 21a2.5 2.5 0 0 0 5 0h-5Z" fill="var(--fg)"/></svg>
  <svg viewBox="0 0 24 24" class="ic"><path d="M12 3 2 12h3v8h6v-5h2v5h6v-8h3L12 3Z" fill="var(--fg)"/></svg>
</div>
css
.row{display:flex;gap:clamp(10px,4vmin,22px);align-items:center}
.ic{width:clamp(28px,9vmin,46px);height:clamp(28px,9vmin,46px);animation:tap 2.4s ease-in-out infinite}
.ic:nth-child(2){animation-delay:.3s}
.ic:nth-child(3){animation-delay:.6s}
.ic:nth-child(4){animation-delay:.9s}
@keyframes tap{0%,80%,100%{transform:scale(1)}88%{transform:scale(.82)}}

솔리드 아이콘은 윤곽선 없이 면 전체를 색으로 채운 아이콘이다. 멀리서도, 작은 크기에서도 형태가 뭉개지지 않고 뚜렷하게 보이기 때문에 탭바(하단 내비게이션)의 '선택된' 상태, 알림 배지, 버튼 안의 아이콘처럼 확실히 주목받아야 하는 자리에 쓴다.

라인 아이콘과 짝을 이뤄 자주 쓰인다 — 예를 들어 탭바에서 선택 안 된 탭은 라인, 선택된 탭은 솔리드로 바꾸면 별도 색상 변화 없이도 "지금 여기"라는 상태를 전달할 수 있다. 다만 같은 아이콘이라도 라인 버전과 솔리드 버전의 외곽 실루엣이 어긋나면 전환할 때 아이콘이 미묘하게 흔들려 보이므로, 두 버전을 같은 키라인 위에서 그려야 한다.

면이 넓다 보니 작은 디테일(구멍, 틈)이 뭉개지기 쉽다. 예를 들어 돋보기 아이콘을 솔리드로 그릴 때 렌즈 안쪽을 완전히 막힌 원으로 그리면 렌즈처럼 안 보이므로, 링(도넛) 형태로 뚫어서 형태를 지켜야 한다.

언제 쓰나

탭바 선택 상태, 알림 배지, 버튼 안 아이콘처럼 확실히 주목받아야 하는 자리에 쓰세요. 라인 버전과 짝을 이룰 땐 반드시 같은 키라인으로 그려서 전환 시 실루엣이 흔들리지 않게 하세요.