Icon button

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

Anatomy

  1. 1. Icon
  2. 2. Container

Variants

Variants
Alternative

States

Size

Normal/Background

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

Solid/Outlined

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

Usage

Background - Overlay with image

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

Floating button

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

Conditional button

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

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
Background
size
iconColor
Solid
padding
backgroundColor
iconColor
Outlined
padding
backgroundColor
borderColor
iconColor

© 2026 Wanted Lab, Inc.