SVG 선 두께(stroke width): 개념과 고르는 법

외곽선 아이콘(Lucide·Tabler·Heroicons outline)은 채움이 아니라 선(stroke)으로 그려집니다. stroke-width 속성이 그 선의 굵기를 정하는데, 아이콘의 인상에 큰 영향을 줍니다.

stroke-width가 동작하는 방식

SVG에서 stroke-width는 아이콘 자체의 좌표 단위로 측정됩니다. 24×24 그리드에서 stroke-width 2는 2단위 굵기의 선을 뜻합니다. SVG는 벡터이기 때문에 이 굵기는 아이콘과 함께 확대됩니다 — 같은 아이콘을 더 크게 그리면 선도 비례해서 두꺼워집니다.

두께 고르기

• 1–1.5 — 가볍고 우아함; 얇은/보통 굵기 글꼴과 큰 크기에 어울림.
• 2 — 가장 흔한 기본값; 작은 크기에서도 균형 있고 가독성 좋음.
• 2.5–3 — 굵음; 강조, 작은 타깃, 두꺼운 제목과 맞출 때 좋음.

핵심 원칙: 아이콘 굵기를 텍스트 굵기에 맞춰라. 굵은 14px 텍스트 옆의 2px 아이콘은 얇아 보일 수 있고, 가는 제목 옆의 1px 아이콘은 딱 맞을 수 있습니다.

주의점

선 두께는 외곽선 아이콘에만 적용됩니다. 채움/솔리드 세트(Heroicons solid, Phosphor fill)는 조절할 선이 없습니다 — 굵기가 형태에 박혀 있습니다. 선 두께 조절이 아무 변화가 없다면 채움형 변형일 가능성이 큽니다.

Icony에서는 지원 라이브러리(Lucide·Tabler·Phosphor)에서 선 두께를 드래그로 조절하고 내보내기 전에 실시간으로 미리 볼 수 있습니다.