Iconography
Design Guidelines
아래 내용에 맞춰 제작 후 크기 및 색상을 변경하여 사용할 수 있습니다. 크기는 blank icon 컴포넌트 속성을 참고합니다.
Grid size & Keyline shapes
아이콘은 24x24 사이즈를 사용하며, 시각적으로 일관된 비율을 유지할 수 있도록 Keyline Shapes를 참고하여 제작합니다.
Stroke Weight
24x24 사이즈의 그리드에 선 굵기는 1.6px(기본) / 2.6px(fill style), 정렬 옵션은 'Center'로 설정합니다.
제작 완료 후 선은 'Outline Stroke'를 적용합니다.
Corner Radius
0px를 기본으로 하되 심미성을 고려하여 변경할 수 있습니다.
Naming
Icon Naming
swap instance에서 쉽게 구분하기 위해 (icon/normal) 규칙을 적용합니다.
분류하기 힘든 경우 카테고리로 구분하여 새로 추가할 수 있습니다. 아이콘 이름은 누구나 알아볼 수 있게 직관적이어야 합니다.
Icon/Normal/Arrow_Left
1
2
3
1.Type
아이콘의 유형을 나타냅니다. 항상 'Icon'으로 시작합니다.
2.Category
아이콘이 속한 카테고리를 나타냅니다. 기본 카테고리는 'Normal'이며, 분류하기 힘든 경우 카테고리로 구분하여 새로 추가할 수 있습니다.
3.Name
아이콘의 의미 혹은 형태를 설명할 수 있는 간단한 키워드를 사용합니다. 아이콘 이름은 누구나 알아볼 수 있게 직관적이어야 합니다. 방향이 있는 아이콘은 언더스코어(_)로 구분하여 방향을 표현합니다.