텍스트와 함께 맞추기
웹의 기본 크기 1em은 부모 글자 크기를 따릅니다. 크기를 고정할 때는 size를 지정하세요.
크기와 텍스트 정렬 비교
여섯 크기와 텍스트·Button 배치를 비교하세요. 웹에서는 글자 크기를 바꾸어 기본 1em과 명시한 크기의 차이를 확인합니다.
문서 플랫폼을 확인하는 중…
FOUNDATIONS
아이콘
아이콘을 검색하고 플랫폼별 크기·정렬·형태와 사용 규칙을 확인합니다.
아이콘 목록·검색
선형 0개 · 채움형 0개. 아이콘을 선택하면 크기·형태를 확인하고 이름을 복사할 수 있습니다.
아이콘 검색 정보를 불러오는 중입니다.
목록의 도형은 React 기준입니다. 선택 상세에는 현재 플랫폼의 실제 출력을 표시합니다.
검색 결과 0개
크기·정렬
같은 아이콘을 여섯 크기로 비교하고, 텍스트·버튼 옆에서 어떻게 정렬되는지 확인하세요.
버튼의 아이콘 슬롯 사용하기
앞·뒤 아이콘은 Button의 prefixIcon·suffixIcon을 사용하면 크기와 간격이 함께 맞춰집니다.
모양과 누르는 영역 구분하기
작은 아이콘 자체에 동작을 붙이지 않고 Button·IconToggle로 감싸세요. 도형 경로·획 두께·컨트롤 내부 간격은 유지합니다.
플랫폼별 크기 API와 단위
| 플랫폼 | 기본 크기 | 크기 API 예 |
|---|---|---|
| React | 1em | size={16} 또는 size="1.5em" |
| Vue 2 | 1em | size="16px" 또는 size="1.5em" |
| React Native | 16 논리 단위 | size={16} |
웹의 숫자 크기는 px, em은 부모 글자 크기에 비례합니다. Native의 숫자는 논리 단위이며 기기 픽셀 수가 아닙니다. SVG의 24 × 24 내부 좌표는 표시 크기를 고정하지 않습니다.
Button은 별도 button.iconSizes를 따릅니다: xs 14 · sm 16 · md 16 · lg 18 · xl 20.
형태 선택
선형을 기본으로 사용합니다. 전체 1,054개 채움형은 개별 import 후 Provider에 등록해 사용합니다. 기본 제공되는 heart·star로 두 형태를 비교해 보세요.
선형과 채움형 비교
heart·star의 두 형태와 선형·이름 대체 동작을 비교합니다.
문서 플랫폼을 확인하는 중…
채움형과 선택 상태는 별개
채움형은 도형만 바꿉니다. 지속적인 선택에는 IconToggle의 active와 상태 변경 요청을 연결하세요.
같은 기능에는 같은 아이콘
닫기와 삭제, 뒤로 가기와 외부 링크는 의미가 다릅니다. 모양이 비슷해도 서로 바꾸어 사용하지 마세요.
닫기 삭제 뒤로 외부 링크
지원하지 않는 형태·이름의 대체 동작
지속적인 선택 · IconToggle
버튼을 눌러 선택값과 접근성 상태를 함께 바꿉니다.
문서 플랫폼을 확인하는 중…
사용 규칙
아이콘이 장식인지, 정보를 전달하는지, 행동을 실행하는지에 따라 의미를 전달하는 방법을 선택하세요.
장식은 중복해서 읽지 않기
옆의 보이는 텍스트가 의미를 전달하면 아이콘은 접근성 읽기에서 제외합니다.
저장 완료
텍스트가 이미 완료 상태를 설명합니다.
중요한 정보는 텍스트와 함께
아이콘 모양이나 색상만으로 상태를 전달하지 말고, 사용자가 이해할 수 있는 문구를 함께 제공합니다.
입력 내용을 확인해 주세요
색상을 구분하지 못해도 의미가 전달됩니다.
아이콘 버튼에는 행동 이름
Button·IconToggle에 수행할 행동을 ariaLabel로 제공합니다. Tooltip만으로 이름을 대신하지 않습니다.
ariaLabel="닫기"모양 이름 ‘엑스’ 대신 행동 ‘닫기’로 설명합니다.
플랫폼별 접근성 이름과 읽기 순서
공통 예제는 보이는 텍스트나 부모 컨트롤로 의미를 전달합니다. Native Icon에는 웹 SVG와 동일한 독립 접근성 이름 API가 없습니다. 필요한 의미는 부모 컨트롤과 플랫폼에 맞는 텍스트에서 제공합니다.
React Native 실행 화면은 Native Web 미리보기입니다. 실제 iOS·Android의 렌더링·터치·VoiceOver·TalkBack은 기기에서 별도로 확인합니다.