Icon button

텍스트 라벨 없이 아이콘만으로 특정 액션을 수행하는 버튼 요소입니다. 공간이 제한적이거나 사용자가 즉시 이해할 수 있는 표준적인 기능을 간결하게 제공할 때 사용합니다.

Anatomy

  1. 1. Icon
  2. 2. Container

Variants

Variants
Size
Interaction effect
Alternative

States

Size

Normal

기본적으로 제공되는 사이즈가 존재하지만 아이콘 크기와 패딩을 조절함으로써 크기의 커스터마이징이 가능합니다. 크기와 패딩의 커스터마이징은 2배수 간격으로 제한합니다.

Background

24px을 기준으로, 4배수로 크기를 줄이거나 늘리며 커스터마이징할 수 있습니다.

Solid/Outlined

기본적으로 제공되는 사이즈가 존재하지만 아이콘 크기와 패딩을 조절함으로써 크기의 커스터마이징이 가능합니다. 크기와 패딩의 커스터마이징은 2배수 간격으로 제한합니다.

Usage

Background - Overlay with image

배경이 있을 시 사용하는 배경 전용 버튼입니다. Web, iOS에서는 Material 효과로 배경의 색상이 함께 자연스럽게 어우러집니다. Android는 Alternative 옵션 사용을 권장합니다.

Floating button

화면의 특정 영역에 고정되어서 중요한 행동을 강하게 유도하는 용도로 사용할 수 있습니다.

Conditional button

입력한 값이 유효할 때 Button의 상태가 Inactive에서 Active로 변경됩니다. 사용자가 자유롭게 지정할 수 있습니다.

Interaction Effect

아이콘 주변에 배경이 나타나지 않고, 아이콘의 색상과 투명도만 바뀝니다. Top navigation과 같이 다른 요소 안에서 인터랙션
영역이 드러나지 않는 편이 자연스러울 때 사용합니다. Normal에서만 사용할 수 있습니다.

Interaction Overflow

아이콘 버튼이 아이콘 크기만큼만 공간을 차지하고, 인터랙션 영역은 그 바깥으로 표시됩니다.
Text field처럼 다른 요소 안에 넣어 주변 간격을 그대로 유지해야 할 때 사용합니다. Normal에서만 사용할 수 있습니다.

Gap

Normal은 인터랙션 영역을 포함하고 있지 않기 때문에 나란히 아이콘 버튼을 여러 개 위치시킬 때 최소 12px 이상의 Gap을 유지할 수 있도록 유의하여 디자인합니다.

Scale with icon padding

Solid, Outlined을 커스터마이징할 때 Padding을 함께 조절하면 아이콘의 크기도 바꿀 수 있습니다. Padding을 따로 조절하지 않을 시 아이콘은 기본 사이즈를 유지하게 됩니다. Icon layer를 Fill로 변경하면 Padding을 조절함에 따라 아이콘의 크기도 함께 바뀌게 됩니다.

How to use

Do

Solid는 Background 색상을 변경하여 사용할 수 있습니다.

Don’t

Action area에 배치하여 사용하지 않습니다.

Customize

Normal
size
iconColor
interactionColor
Background
size
iconColor
Solid
padding
backgroundColor
iconColor
Outlined
padding
backgroundColor
borderColor
iconColor

© 2026 Wanted Lab, Inc.