아이콘 크기에 정답은 없지만, 강한 관례는 있습니다. 그 관례에서 고르면 UI가 일관되고 아이콘이 선명하게 유지됩니다.
자주 쓰는 UI 크기
- 16px — 밀도 높은 UI: 작은 텍스트 옆, 표 셀, 메뉴.
- 20px — 버튼, 폼 필드, 컴팩트 툴바.
- 24px — 대부분의 앱 아이콘과 내비게이션의 기본.
- 32px 이상 — 기능 강조, 빈 상태, 마케팅.
24px가 기본인 이유
대부분의 최신 아이콘 세트(Lucide·Tabler·Heroicons)는 24×24 그리드로 그려집니다. 24px(또는 48px 같은 깔끔한 배수)로 표시하면 각 path가 정수 픽셀에 떨어져 선명함이 유지됩니다. 23px·25px 같은 어중간한 크기는 얇은 선을 흐리게 만들 수 있습니다.
24px 그리드에서 정수로 나뉘는 크기(16, 24, 32, 48)를 선호하세요. 깔끔하게 확대되고 반픽셀 흐림을 피합니다.
텍스트에 상대적인 크기
텍스트 옆에 놓이는 아이콘은 em 단위로 크기를 주면 폰트에 맞춰 자동으로 커집니다:
/* Match the icon box to your design grid */
.icon { width: 20px; height: 20px; }
/* Size by text so icons scale with their label */
.icon { width: 1em; height: 1em; }상자 크기가 아니라 시각적 무게를 맞추기
같은 픽셀 크기라도 하나는 빽빽하고 하나는 성기면 나란히 놓았을 때 불균형해 보입니다. 한 줄에서 같은 시각적 무게로 느껴지도록 눈으로 살짝 조정하세요 — 상자 크기는 출발점일 뿐 정답이 아닙니다.
Icony에서는 필요한 정확한 픽셀 크기로 아이콘을 미리 보고 그 크기로 내보낼 수 있어, 보이는 그대로 적용됩니다.