Size

• 1px × 1px를 기준으로 그리드화하여 표현되었다.
• 16px, 20px은 대체로 텍스트와 함께 사용한다.(Small size)
• 24px은 시스템 아이콘의 기본 사이즈로 대부분의 인터페이스에서 사용한다.(Medium size)
• 32px, 48px은 개념을 강조하거나 공간이 충분할 경우 사용한다.(Large size)
• 아이콘의 사이즈는 4px 또는 8px의 배수로 크기를 정의하며 홀수나 소수로 만들지 않도록 주의한다.

Stroke weight

• 모든 아이콘의 Stroke는 크기에 맞는 Weight를 사용한다.
• 아이콘 Scaling 시에는 기본 크기(24px)를 베이스로 %로 Scaling 하거나 Icon 크기의 비율에 맞는 Weight 값을 정의하여 사용한다.
• 정부상징 로고를 사용하는 기관의 System icon은 12~16=1px, 20=1.4px, 24~32=1.6px, 48=2px의 Weight를 사용한다.

Layout

모든 아이콘은 아이콘이 그려지는 영역인 Live area과 빈 공간인 Padding으로 구분되며 기관마다 Padding 값을 정의하여 사용한다.

Keyline

• 같은 크기 아이콘에서 정사각형, 원형, 직사각형의 형태가 시각적으로 동일한 면적으로 표현하기 위한 가이드라인이다.
• 모든 아이콘이 시각적으로 일관된 비율을 유지할 수 있도록 keyline shapes를 참고하여 제작한다.
• 아래 비율은 24x24의 1000% 사이즈 Keyline이며, 사이즈별 비율에 맞게 변형하여 사용한다.

Basic radius

• 기관의 Shape에 맞춰 Icon radius 값을 설정하여 사용한다.
• Radius 값은 낮을수록 정적이고 신뢰감 있는 이미지를, 높을수록 친근감 있고 부드러운 인상을 줄 수 있다.
• 정부상징 로고를 사용하는 기관은 시스템 아이콘 적용 시, 전체적인 톤 앤 매너를 맞추기 위해 Radius 값을 0,1,2로제한한다.

Consistency in Visual

• Radius를 사용할 때 아이콘의 크기에 따라 시각적으로 적절한 Radius 값을 맞춰가며 사용한다.
• 아이콘을 담는 컨테이너가 커질수록 Radius 값도 커진다.

SVG 파일은

• 크기를 줄이거나 늘리더라도 화질에 영향을 받지 않아 다양한 해상도에서 품질 유지에 뛰어나다.
• 마크업 언어로 이루어져 있어 CSS와 JavaScript로 수정할 수 있으며 이미지 편집 툴 없이도 색상과 두께 등 스타일의 변경이 용이하다.
• 용량이 적어 출력 속도가 빠르다.
• 상호작용을 추가하는 경우 애니메이션 작업이 용이하다.

호환성 체크 참고 : caniuse.com/svg

Simple

• 기본 크기(24px)에서 이미지가 명확하게 표현되는지 확인해야 하며, 작은 크기일수록 의미 전달에 불필요한 표현은 생략한다.
• 지나친 생략은 지양하며 모두가 한눈에 인지할 수 있는 형태를 사용한다.

Stroke width

너무 굵거나 가는 선은 가독성이 떨어지므로 사용하지 않는다.

Use one type of stroke width

같은 크기의 아이콘을 표현할 때 한 가지의 두께만 사용한다.

Icon type (Line, Fill)

Line type과 Fill type을 구분하여 사용한다.