아이콘 스타일·도형 규칙
각 항목을 클릭하면 시각 예시·비교·원문을 볼 수 있습니다.
네거티브 스페이스 Negative Space
도형 안팎의 비어 있는 공간으로 형태 구분과 균형을 만든다.
구도·레이아웃·작은 아이콘의 판독성과 균형 설계.
같은 화면에서는 선 굵기·모서리·광학 크기·시각적 무게를 맞춘다. 스타일 명칭은 라이브러리마다 다를 수 있다.
광학 정렬 Optical Alignment
수학적 중심 대신 사람이 균형 있게 느끼는 위치로 조정하는 정렬.
재생 삼각형·비대칭 아이콘 배치.
같은 화면에서는 선 굵기·모서리·광학 크기·시각적 무게를 맞춘다. 스타일 명칭은 라이브러리마다 다를 수 있다.
광학 크기 Optical Size
글자·아이콘을 실제 표시 크기에 맞게 잘 보이도록 세부 형태·획·내부 공간 등을 조절하는 크기 설계.
작은 아이콘의 획·공간 조절.
등비 확대나 겉보기 크기와 구분한다. 글꼴·심볼 제품마다 제공하는 광학 크기 축이 다를 수 있다.
아웃라인 아이콘 Outline Icon
외곽선이나 윤곽 획을 중심으로 그린 아이콘.
가벼운 시각적 무게의 UI.
같은 화면에서는 선 굵기·모서리·광학 크기·시각적 무게를 맞춘다. 스타일 명칭은 라이브러리마다 다를 수 있다.
필드·채움 아이콘 Filled Icon
도형 내부를 채워 실루엣 중심으로 표현한 아이콘.
선택된 메뉴·강한 강조.
같은 화면에서는 선 굵기·모서리·광학 크기·시각적 무게를 맞춘다. 스타일 명칭은 라이브러리마다 다를 수 있다.
듀오톤 아이콘 Duotone Icon
두 가지 색조 또는 불투명도 층으로 구성한 아이콘.
계층감·부드러운 강조.
같은 화면에서는 선 굵기·모서리·광학 크기·시각적 무게를 맞춘다. 스타일 명칭은 라이브러리마다 다를 수 있다.
다색 아이콘 Multicolor Icon
여러 색상을 조합해 대상의 특징을 표현한 아이콘.
서비스 분류·브랜드·일러스트형 아이콘.
같은 화면에서는 선 굵기·모서리·광학 크기·시각적 무게를 맞춘다. 스타일 명칭은 라이브러리마다 다를 수 있다.
단색 아이콘 Monochrome Icon
하나의 기본 색으로 표현하는 아이콘.
테마 변경·고대비 UI.
같은 화면에서는 선 굵기·모서리·광학 크기·시각적 무게를 맞춘다. 스타일 명칭은 라이브러리마다 다를 수 있다.
라운드 아이콘 Rounded Icon
끝점과 모서리를 둥글게 처리한 아이콘.
부드러운 시각 언어.
같은 화면에서는 선 굵기·모서리·광학 크기·시각적 무게를 맞춘다. 스타일 명칭은 라이브러리마다 다를 수 있다.
샤프 아이콘 Sharp Icon
각진 모서리와 끝점을 강조한 아이콘.
기하학적·정밀한 UI 표현.
같은 화면에서는 선 굵기·모서리·광학 크기·시각적 무게를 맞춘다. 스타일 명칭은 라이브러리마다 다를 수 있다.
픽셀 아이콘 Pixel Icon
정해진 픽셀 격자에 맞추어 그린 아이콘.
픽셀아트 게임·저해상도 UI.
같은 화면에서는 선 굵기·모서리·광학 크기·시각적 무게를 맞춘다. 스타일 명칭은 라이브러리마다 다를 수 있다.
아이소메트릭 아이콘 Isometric Icon
등각 투영 느낌으로 입체 사물을 나타낸 아이콘.
기능 소개·시스템 구조 설명.
같은 화면에서는 선 굵기·모서리·광학 크기·시각적 무게를 맞춘다. 스타일 명칭은 라이브러리마다 다를 수 있다.
애니메이션 아이콘 Animated Icon
시간이나 상태 변화에 따라 형태가 움직이는 아이콘.
로딩·전환·피드백.
아이콘의 의미 전달을 애니메이션 재생 여부에만 의존하지 않는다.
획 굵기 Stroke Weight
아이콘 선의 두께로 시각적 무게와 가독성에 영향을 준다.
서체 굵기와 아이콘의 조화.
같은 화면에서는 선 굵기·모서리·광학 크기·시각적 무게를 맞춘다. 스타일 명칭은 라이브러리마다 다를 수 있다.
선 끝 모양 Stroke Cap
열린 경로 끝을 평평하게·둥글게·사각형으로 마감하는 방식.
선형 아이콘 세부 규격.
같은 화면에서는 선 굵기·모서리·광학 크기·시각적 무게를 맞춘다. 스타일 명칭은 라이브러리마다 다를 수 있다.
선 연결 모양 Stroke Join
두 선분이 만나는 모서리를 연결하는 방식.
각진 모서리·라운드 모서리 통일.
같은 화면에서는 선 굵기·모서리·광학 크기·시각적 무게를 맞춘다. 스타일 명칭은 라이브러리마다 다를 수 있다.
아이콘 그리드 Icon Grid
아이콘 크기와 배치를 맞추는 기준 격자.
아이콘 세트 제작.
같은 화면에서는 선 굵기·모서리·광학 크기·시각적 무게를 맞춘다. 스타일 명칭은 라이브러리마다 다를 수 있다.
키라인 Keyline
서로 다른 형태의 크기와 시각적 균형을 맞추는 기준 도형.
원·사각형·가로형 아이콘 비교.
같은 화면에서는 선 굵기·모서리·광학 크기·시각적 무게를 맞춘다. 스타일 명칭은 라이브러리마다 다를 수 있다.
라이브 영역 Live Area
아이콘 그래픽이 실제로 차지하도록 설정한 영역.
캔버스 내부 여백 관리.
같은 화면에서는 선 굵기·모서리·광학 크기·시각적 무게를 맞춘다. 스타일 명칭은 라이브러리마다 다를 수 있다.
픽셀 스냅 Pixel Snapping
윤곽·위치를 픽셀 격자에 맞춰 흐릿한 경계를 줄이는 작업.
작은 래스터·벡터 아이콘 출력.
같은 화면에서는 선 굵기·모서리·광학 크기·시각적 무게를 맞춘다. 스타일 명칭은 라이브러리마다 다를 수 있다.
Icon Styles & Geometry
Open an entry for its visual reference, comparisons and source-language text.
Negative Space 네거티브 스페이스
Empty space within or around shapes that supports distinction and balance.
Legibility and balance in compositions, layouts, and small icons.
Match stroke weight, corners, optical size, and visual weight within a screen. Style names may differ between libraries.
Optical Alignment 광학 정렬
Adjusting alignment to appear balanced to the eye rather than relying only on mathematical centering.
Positioning play triangles and asymmetric icons.
Match stroke weight, corners, optical size, and visual weight within a screen. Style names may differ between libraries.
Optical Size 광학 크기
Adjusting letter or icon detail, strokes, and internal space for legibility at its actual display size.
Adjusting stroke and spacing in small icons.
Distinguish optical size from proportional scaling or apparent size. Available optical-size axes vary by font and symbol product.
Outline Icon 아웃라인 아이콘
An icon drawn primarily with outlines or contour strokes.
Interfaces with a light visual weight.
Match stroke weight, corners, optical size, and visual weight within a screen. Style names may differ between libraries.
Filled Icon 필드·채움 아이콘
An icon emphasizing silhouette through filled shapes.
Selected navigation items and strong emphasis.
Match stroke weight, corners, optical size, and visual weight within a screen. Style names may differ between libraries.
Duotone Icon 듀오톤 아이콘
An icon composed of two color tones or opacity layers.
Visual hierarchy and gentle emphasis.
Match stroke weight, corners, optical size, and visual weight within a screen. Style names may differ between libraries.
Multicolor Icon 다색 아이콘
An icon combining multiple colors to communicate an object's characteristics.
Service categories, brands, and illustrative icons.
Match stroke weight, corners, optical size, and visual weight within a screen. Style names may differ between libraries.
Monochrome Icon 단색 아이콘
An icon rendered using a single base color.
Theme changes and high-contrast interfaces.
Match stroke weight, corners, optical size, and visual weight within a screen. Style names may differ between libraries.
Rounded Icon 라운드 아이콘
An icon with rounded corners and line endings.
A soft visual language.
Match stroke weight, corners, optical size, and visual weight within a screen. Style names may differ between libraries.
Sharp Icon 샤프 아이콘
An icon emphasizing angular corners and line endings.
Geometric and precise interface styling.
Match stroke weight, corners, optical size, and visual weight within a screen. Style names may differ between libraries.
Pixel Icon 픽셀 아이콘
An icon drawn to a defined pixel grid.
Pixel-art games and low-resolution interfaces.
Match stroke weight, corners, optical size, and visual weight within a screen. Style names may differ between libraries.
Isometric Icon 아이소메트릭 아이콘
An icon depicting an object with an isometric-style projection.
Introducing features and explaining system structures.
Match stroke weight, corners, optical size, and visual weight within a screen. Style names may differ between libraries.
Animated Icon 애니메이션 아이콘
An icon whose form moves over time or in response to state changes.
Loading, transitions, and feedback.
Do not make an icon's meaning depend solely on animation playback.
Stroke Weight 획 굵기
The thickness of an icon's strokes, affecting visual weight and legibility.
Harmonizing font and icon weights.
Match stroke weight, corners, optical size, and visual weight within a screen. Style names may differ between libraries.
Stroke Cap 선 끝 모양
The treatment of an open path's ends, such as flat, round, or square.
Detailed specifications for line icons.
Match stroke weight, corners, optical size, and visual weight within a screen. Style names may differ between libraries.
Stroke Join 선 연결 모양
The treatment of the corner where two line segments meet.
Consistent sharp or rounded corners.
Match stroke weight, corners, optical size, and visual weight within a screen. Style names may differ between libraries.
Icon Grid 아이콘 그리드
A reference grid establishing consistent icon size and placement.
Creating icon sets.
Match stroke weight, corners, optical size, and visual weight within a screen. Style names may differ between libraries.
Keyline 키라인
A reference shape used to balance the size and visual weight of different icon forms.
Comparing circular, square, and horizontal icons.
Match stroke weight, corners, optical size, and visual weight within a screen. Style names may differ between libraries.
Live Area 라이브 영역
The area designated for the icon's actual graphic.
Managing padding within the icon canvas.
Match stroke weight, corners, optical size, and visual weight within a screen. Style names may differ between libraries.
Pixel Snapping 픽셀 스냅
Aligning contours or positions to the pixel grid to reduce blurry edges.
Rendering small raster and vector icons.
Match stroke weight, corners, optical size, and visual weight within a screen. Style names may differ between libraries.