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

라인 아이콘

Line Icon

면을 채우지 않고 일정한 굵기의 선(스트로크)만으로 형태를 그린 아이콘 — 가볍고 텍스트와 잘 어울린다.

다른 이름: Stroke iconOutline icon
···
html
<div class="row">
  <svg viewBox="0 0 24 24" class="ic"><circle cx="10" cy="10" r="6" pathLength="100" fill="none" stroke="var(--fg)" stroke-width="2"/><line x1="14.6" y1="14.6" x2="20" y2="20" pathLength="100" stroke="var(--fg)" stroke-width="2" stroke-linecap="round"/></svg>
  <svg viewBox="0 0 24 24" class="ic"><path pathLength="100" 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="none" stroke="var(--fg)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/></svg>
  <svg viewBox="0 0 24 24" class="ic"><path pathLength="100" d="M6 16V10a6 6 0 0 1 12 0v6l2 3H4Z" fill="none" stroke="var(--fg)" stroke-width="2" stroke-linejoin="round"/><path pathLength="100" d="M10 21a2 2 0 0 0 4 0" fill="none" stroke="var(--fg)" stroke-width="2" stroke-linecap="round"/></svg>
  <svg viewBox="0 0 24 24" class="ic"><path pathLength="100" d="M4 11 12 4 20 11" fill="none" stroke="var(--fg)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path pathLength="100" d="M6 10V20H18V10" fill="none" stroke="var(--fg)" stroke-width="2" stroke-linejoin="round"/></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)}
.ic path,.ic circle,.ic line{stroke-dasharray:100;stroke-dashoffset:100;animation:draw 3.2s ease-in-out infinite}
.ic:nth-child(2) *{animation-delay:.25s}
.ic:nth-child(3) *{animation-delay:.5s}
.ic:nth-child(4) *{animation-delay:.75s}
@keyframes draw{0%{stroke-dashoffset:100}35%,75%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}}

라인 아이콘은 면을 채우지 않고 일정한 굵기의 선(스트로크)만으로 형태를 그린다. 배경색과 아이콘이 선으로만 분리되기 때문에 시각적으로 가볍고, 텍스트 옆에 놓아도 글자 굵기와 잘 어울려서 내비게이션, 툴바처럼 아이콘이 촘촘하게 늘어서는 UI에 많이 쓰인다.

핵심은 굵기를 세트 전체에서 통일하는 것이다. 보통 24px 기준 1.5~2px 스트로크를 쓰고, 끝처리(cap)와 모서리(join)를 round 또는 square 중 하나로 통일해서 서로 다른 아이콘이라도 같은 손으로 그린 것처럼 보이게 만든다. 곡선이 많은 아이콘(하트, 종)은 직선 아이콘(집, 폴더)보다 시각적으로 가늘어 보이는 경향이 있어서, 실무에서는 둘을 나란히 놓고 굵기를 맞춰본다.

작은 크기(16px 이하)에서는 선이 겹치거나 뭉개지기 쉬우므로, 라인 아이콘을 아주 작게 써야 한다면 디테일을 줄인 별도 버전을 그리거나 solid-icon으로 바꾸는 편이 낫다.

언제 쓰나

내비게이션, 툴바처럼 여러 아이콘이 촘촘히 붙는 UI, 텍스트와 나란히 놓이는 UI에 우선 고려하세요. 16px 이하로 작아지면 디테일을 줄이거나 솔리드 아이콘으로 바꾸세요.