Iconography

Icon Name

• 명확한 기능이 없으면 형태를 기준으로 이름을 붙입니다. (예: chevron-right, circle)
• 명확한 기능이 있으면 기능명을 씁니다. (예: magnify, logout)
• 두 단어 이상이나 속성(채움·윤곽)은 하이픈으로 잇습니다. MaterialCommunityIcons 원본 이름을 그대로 쓰며 새 이름을 만들지 않습니다. (예: alert-circle, file-eye, close-circle-outline)

아이콘 세트

RN 앱(FNA_CC · FNA_HACCP)이 실제로 쓰는 MaterialCommunityIcons 72종입니다. 새 아이콘은 이 목록에 먼저 추가한 뒤 화면에 씁니다.

상태 (고정 7종)

senior/status.ts 의 판정과 1:1 로 대응합니다. 색만이 아니라 모양이 다르므로 색각 이상·흑백 인쇄에서도 구분됩니다.

내비게이션 · 동작

기록 · 문서 · 결재

센서 · 경보 · 연결

Icon Design Guidelines

Grid & Size

• 24 × 24px 격자 기준으로 그립니다. 사방 2px 여백(안전영역 20 × 20)을 두고, 시각 무게를 맞추기 위해 원형은 22, 가로·세로 직사각은 22 × 16 까지 씁니다.
• 기본 아이콘 크기는 24(L)이며 XS·S·M·L·XL 범위 안에서 씁니다. 아이콘 자체가 작아도 터치 영역은 44(시니어 64)입니다.

Padding

• 아이콘과 글자 사이 간격은 .4em(버튼) · 8px(목록 항목)입니다. 아이콘 단독 버튼은 44 × 44 히트 영역 가운데 24 아이콘을 둡니다.
• 배지 안 아이콘(16)은 라벨 앞 4px. 상태 점(7px)과 아이콘을 한 배지에 같이 쓰지 않습니다.

Stroke

• 선 굵기 2px, stroke-linecap: round · stroke-linejoin: round. 크기가 바뀌어도 선 굵기는 2px 비율을 유지합니다(SVG viewBox 24).
• 채움(fill) 아이콘은 상태 배지 안과 하단 탭 활성 상태에서만 씁니다. 인쇄는 흑백에서 읽히도록 선 아이콘을 씁니다.

Corner

• 바깥 모서리 반지름 2px, 안쪽 모서리 1px. F 심볼의 둥근 막대와 같은 결입니다.
• 뾰족한 모서리는 경고 삼각형(alert)의 꼭짓점처럼 형태가 의미인 경우에만 남깁니다.

Theme

• 색은 currentColor 를 따릅니다. 다크 테마에서 별도 색을 지정하지 않습니다.
• 상태 아이콘만 상태색(--fna-success-text 등 text 단계)을 씁니다. 도형색(DEFAULT)은 글자 대비 4.5:1 에 못 미치므로 아이콘+라벨 조합에는 쓰지 않습니다.

규칙

• 아이콘 단독 금지(앱바·하단 탭·아이콘 버튼 제외). 상태·동작 아이콘은 라벨과 함께. 아이콘 버튼은 aria-label 필수.
• 상태 아이콘은 위 7종 외에 새로 만들지 않습니다. 같은 뜻에 다른 그림을 쓰면 심사관이 혼동합니다.
• 장식용 아이콘·이모지는 쓰지 않습니다. 절 구분에는 쌓인 막대.
• 웹은 이 페이지의 글리프 폰트(문서용) 대신 같은 이름의 인라인 SVG 를 씁니다. 스프라이트 정리는 로드맵 참조.

Do · Don't

초안마지막 갱신 2026-09-29담당 디자인시스템 TF · jjo831@farmzone.kr소스 senior/status.ts (icon 이름) · RN 앱 src/ 에서 쓰는 MaterialCommunityIcons 72종 · components.css .fna-appbar svgFoundations · FNA 디자인 시스템 v1.0