아이콘의 역할·의미
각 항목을 클릭하면 시각 예시·비교·원문을 볼 수 있습니다.
아이콘 버튼 Icon Button
아이콘을 주요 내용으로 사용하는 조작 가능한 버튼.
툴바·닫기·검색 실행.
아이콘 이미지 자체와 버튼의 역할·키보드 동작은 별도로 구현한다.
아이코노그래피 Iconography
아이콘의 의미·형태·굵기·사용법을 일관되게 설계하는 체계.
제품 전체 아이콘 규칙 수립.
명칭은 형태와 역할을 함께 적는다. 특정 그림이 모든 언어·문화에서 같은 의미를 갖는다고 가정하지 않는다.
글리프 Glyph
문자나 기호를 실제로 그린 형태. UI에서는 간결한 단색 아이콘을 뜻하기도 한다.
글꼴 기호와 UI 심볼의 도형 설명.
글리프가 반드시 아이콘인 것은 아니며, 문자 글리프도 포함한다.
아이콘 Icon
대상·기능·상태를 간결한 그림으로 표현한 시각 기호.
검색·저장·경고 등 UI의 의미 전달.
명칭은 형태와 역할을 함께 적는다. 특정 그림이 모든 언어·문화에서 같은 의미를 갖는다고 가정하지 않는다.
픽토그램 Pictogram
사물이나 행동을 단순한 그림으로 표현한 안내 기호.
시설 안내·안전 표지·교통 안내.
명칭은 형태와 역할을 함께 적는다. 특정 그림이 모든 언어·문화에서 같은 의미를 갖는다고 가정하지 않는다.
심볼 Symbol
약속된 의미를 표현하는 기호의 넓은 개념.
브랜드·수학·상태·기능 기호 정의.
명칭은 형태와 역할을 함께 적는다. 특정 그림이 모든 언어·문화에서 같은 의미를 갖는다고 가정하지 않는다.
시스템 아이콘 System Icon
운영체제나 UI 체계에서 공통 동작·대상을 표현하는 아이콘.
파일·설정·네트워크·공유 표현.
명칭은 형태와 역할을 함께 적는다. 특정 그림이 모든 언어·문화에서 같은 의미를 갖는다고 가정하지 않는다.
앱 아이콘 App Icon
앱을 식별하는 대표 이미지로 런처·스토어 등에 표시한다.
앱 브랜드 식별.
일반적인 화면 내부의 기능 아이콘과 요구 규격이 다르다.
파비콘 Favicon
브라우저 탭·즐겨찾기 등에 표시하는 사이트 식별 아이콘.
웹사이트 식별.
명칭은 형태와 역할을 함께 적는다. 특정 그림이 모든 언어·문화에서 같은 의미를 갖는다고 가정하지 않는다.
기능 아이콘 Functional Icon
클릭이나 조작으로 수행할 동작을 표현하는 아이콘.
인쇄·삭제·검색 버튼.
접근 가능한 이름은 생김새보다 수행 기능을 설명해야 한다.
장식 아이콘 Decorative Icon
추가 의미 없이 장식이나 분위기를 제공하는 아이콘.
문장 옆 장식·배경 패턴.
보조기술에 불필요하게 반복 읽히지 않도록 처리한다.
정보 아이콘 Informative Icon
조작 없이 콘텐츠의 의미나 분류를 전달하는 아이콘.
파일 유형·배송 방식·문서 분류.
명칭은 형태와 역할을 함께 적는다. 특정 그림이 모든 언어·문화에서 같은 의미를 갖는다고 가정하지 않는다.
상태 아이콘 Status Icon
성공·오류·동기화 등 현재 상태를 나타내는 아이콘.
표·작업 목록·도구 모음의 상태 표시.
배지·색상·텍스트와 조합할 수 있으며 그 자체가 버튼인 것은 아니다.
브랜드 아이콘 Brand Icon
회사·서비스·제품 브랜드를 식별하는 아이콘.
소셜 로그인·외부 서비스 연결.
아이콘 라이선스 외에 상표 사용 규정도 확인한다.
아이콘 라벨 Icon Label
아이콘과 함께 기능이나 의미를 명시하는 텍스트.
낯선 기능·중요 작업 설명.
명칭은 형태와 역할을 함께 적는다. 특정 그림이 모든 언어·문화에서 같은 의미를 갖는다고 가정하지 않는다.
선행 아이콘 Leading Icon
텍스트나 입력 내용 앞에 배치하는 아이콘.
입력 종류·메뉴 항목 구분.
언어의 읽기 방향에 따라 앞쪽 위치가 달라질 수 있다.
후행 아이콘 Trailing Icon
텍스트나 입력 내용 뒤에 배치하는 아이콘.
펼치기·지우기·상세 이동 암시.
명칭은 형태와 역할을 함께 적는다. 특정 그림이 모든 언어·문화에서 같은 의미를 갖는다고 가정하지 않는다.
아이콘 메타포 Icon Metaphor
현실 사물의 의미를 빌려 디지털 기능을 표현하는 방식.
휴지통으로 삭제, 돋보기로 검색 표현.
명칭은 형태와 역할을 함께 적는다. 특정 그림이 모든 언어·문화에서 같은 의미를 갖는다고 가정하지 않는다.
Icon Roles & Meanings
Open an entry for its visual reference, comparisons and source-language text.
Icon Button 아이콘 버튼
An interactive button whose main content is an icon.
Toolbars, closing panels, and running searches.
Implement the icon image separately from the button's role and keyboard behavior.
Iconography 아이코노그래피
A system for consistently designing icon meaning, shape, weight, and usage.
Establishing product-wide icon rules.
Specify both shape and role. Do not assume an image has the same meaning across all languages and cultures.
Glyph 글리프
The drawn form of a character or symbol; in UI terminology, also a compact monochrome icon.
Describing the forms of font glyphs and interface symbols.
A glyph is not necessarily an icon; character glyphs are included too.
Icon 아이콘
A concise pictorial symbol representing an object, function, or state.
Communicating UI meanings such as search, save, and warnings.
Specify both shape and role. Do not assume an image has the same meaning across all languages and cultures.
Pictogram 픽토그램
A simplified picture representing an object or action for communication or guidance.
Facility guidance, safety signs, and transportation signage.
Specify both shape and role. Do not assume an image has the same meaning across all languages and cultures.
Symbol 심볼
A broad term for a sign expressing an agreed meaning.
Defining brand, mathematical, status, and functional symbols.
Specify both shape and role. Do not assume an image has the same meaning across all languages and cultures.
System Icon 시스템 아이콘
An icon representing a common action or object within an operating system or interface system.
Representing files, settings, networks, and sharing.
Specify both shape and role. Do not assume an image has the same meaning across all languages and cultures.
App Icon 앱 아이콘
The identifying image for an application, used in launchers, stores, and similar locations.
Identifying an application's brand.
Requirements differ from ordinary functional icons within a screen.
Favicon 파비콘
A site's identifying icon shown in browser tabs, bookmarks, and related places.
Identifying a website.
Specify both shape and role. Do not assume an image has the same meaning across all languages and cultures.
Functional Icon 기능 아이콘
An icon representing an action that can be performed through interaction.
Print, delete, and search buttons.
The accessible name should describe the action rather than the icon's appearance.
Decorative Icon 장식 아이콘
An icon used for decoration or atmosphere without adding meaning.
Decorations beside text and background patterns.
Avoid unnecessary repeated announcements by assistive technologies.
Informative Icon 정보 아이콘
An icon communicating content meaning or classification without itself being a control.
File types, delivery methods, and document categories.
Specify both shape and role. Do not assume an image has the same meaning across all languages and cultures.
Status Icon 상태 아이콘
An icon indicating a current state, such as success, error, or synchronization.
Status indicators in tables, task lists, and toolbars.
It can be combined with badges, color, and text, but is not inherently a button.
Brand Icon 브랜드 아이콘
An icon identifying a company, service, or product brand.
Social sign-in and external service connections.
Check trademark rules in addition to the icon license.
Icon Label 아이콘 라벨
Text accompanying an icon to state its function or meaning.
Explaining unfamiliar features and important actions.
Specify both shape and role. Do not assume an image has the same meaning across all languages and cultures.
Leading Icon 선행 아이콘
An icon placed before text or input content.
Distinguishing input types and menu items.
The leading position can change with the language's reading direction.
Trailing Icon 후행 아이콘
An icon placed after text or input content.
Suggesting expansion, clearing, or navigation to details.
Specify both shape and role. Do not assume an image has the same meaning across all languages and cultures.
Icon Metaphor 아이콘 메타포
Representing a digital function by borrowing the meaning of a physical object.
Representing deletion with a trash can and search with a magnifying glass.
Specify both shape and role. Do not assume an image has the same meaning across all languages and cultures.