Iconography
아이콘 세트 · 크기 · 선 굵기와 상태 · 아이콘 버튼 · 글자와 함께
아이콘은 복잡한 정보나 기능을 빠르게 알아보게 돕는 요소다. 뜻이 분명한 모양을 짧게, 어디서나 같은 굵기로 쓴다.
아직 제품에는 들어가지 않았다. 지금 제품에는 크기 18가지(8 ~ 48px)와 선 굵기 11가지가 섞여 있다 — 앱 적용 단계에서 아래 규칙으로 옮긴다.
세트
housewalletcredit-cardreceiptpiggy-bankchart-piecalendarlist-todosticky-notebellsearchsettingspluspenciltrash-2checkxfiltergroo 는 lucide 하나를 쓴다 — 웹은 lucide-react, 앱은 lucide_icons_flutter. 네 제품이 이미 이 세트다.
SEED 의 아이콘은 당근 로고의 모양을 딴 브랜드 자산이라 쓰지 않는다. 필요한 아이콘은 먼저 lucide 에서 찾고, 없으면 lucide 의 모양 규칙대로 그려 더한다.
- 격자 24 × 24
- 선 2 · 둥근 끝 · 둥근 이음
- 그리는 자리 — 가장자리 2px 는 비운다
크기
12바닥 — 쓰지 않음16UI20UI24기본 격자24 × 2빈 화면 — 24 격자를 비율대로| 크기 | 뜻 |
|---|---|
16px | 작은 UI 아이콘 — 가장 작은 단계 |
20px | 가운데 단계 |
24px | 기본 격자 — lucide · SEED 가 그리는 크기 |
- UI 아이콘은 세 단계만 쓴다. 지금 쓰는 다른 크기는 옮길 때 한 단계 위로 올린다.
- 바닥보다 작은 아이콘은 쓰지 않는다 — 작은 아이콘은 모양이 뭉개져 알아보기 어렵다.
- 빈 화면 · 큰 그림처럼 기본 격자보다 큰 아이콘은 격자를 비율대로 키워 자리마다 정한다.
- 자리마다 어느 단계를 쓸지는 컴포넌트 단계에서 SEED 의 해당 컴포넌트와 비교해 정한다.
선 굵기와 상태
기능이 꺼지는 단추 — 알림 · 금액 가리기
기본선 2
켜짐 · 선택진한 색 + 선 2.5
꺼짐-off 아이콘 · 선 2
금액을 가림지금 상태 eye-off · 선 2.5
모으기 단추 — 관심 · 고정(사선 없이)
관심 — 꺼짐흐린 색 · 선 2
관심 — 켜짐진한 색 · 선 2.5
고정 — 꺼짐흐린 색 · 선 2
브랜드로 강조브랜드 색 + 선 2.5
SEED 는 켜짐 · 선택을 채움 아이콘으로, 꺼짐을 선 + 사선으로 보인다. lucide 에는 채움 모양이 없고, 앱의 lucide 글꼴은 채울 수도 없다. 그래서 groo 는 굵기와 색으로 대신한다.
- 기본은 lucide 의 선 굵기 그대로다. 선은 격자를 기준으로 그려져, 작은 아이콘에서는 그만큼 가늘어진다.
- 켜짐 · 선택은 진한 색(또는 브랜드 색)에 선을 굵게 한다.
- 꺼짐은 lucide 의
-off아이콘(사선)을 쓴다 — 기능이 꺼지는 단추(알림 · 금액 가리기)만이다. - 모으기 단추(관심 · 고정)는 꺼짐에 사선을 긋지 않는다 — 같은 아이콘이 흐린 색 + 기본 선, 진한 색 + 굵은 선으로만 갈린다. 채우지도 않는다.
- 켜고 끄는 단추의 아이콘은 누르면 할 일이 아니라 지금 상태를 그린다 — 금액을 가렸으면
eye-off. 이름은 그대로 두고 켬은aria-pressed가 알린다(Toggle). - 앱은 lucide 글꼴의 굵기 변형으로 같은 굵기를 맞춘다.
아이콘만 있는 버튼
aria-label="설정"보이는 40 · 아이콘 20 · 누르는 영역 44aria-label="설정"보이는 44 · 아이콘 24 · 누르는 영역 44아이콘을 버튼으로 홀로 쓸 때는 읽기 쉽고 누르기 쉽게 넉넉한 자리를 둔다.
- 누르는 영역은 늘 터치 영역 기준 이상이다. 보이는 버튼이 그보다 작으면 보이지 않는 여백으로 채운다.
- 이름을 반드시 단다 — 웹은
aria-label, 앱은tooltip이나Semanticslabel. 이름도 번역 문구에 둔다.
글자와 함께
9월 30일 (수)
x2 8
카드 결제 예정- 한 줄에 둘 때는 높이 가운데로 맞추고, 사이는 간격 토큰으로 둔다.
- 아이콘만으로 뜻이 모호하면 글자를 함께 쓴다.
- 상단 내비게이션은 선 아이콘 24 로 둔다(상자 44 — Top Navigation, 2026-10-04). 하단 탭은 고른 탭을 짙은 글자색(
fg-neutral) + 선 2.5 로, 다른 탭은fg-neutral-subtle+ 선 2 로 둔다 — 브랜드 색으로 칠하지 않는다(Bottom Navigation, 2026-10-04).
구성과 일부 설명은 당근 SEED Design 의 Foundations 문서(Apache-2.0)를 바탕으로 했다. 값과 그림은 groo 것이다. 아이콘은 lucide(ISC).