Iconography
아이콘은 명령과 자주 쓰는 동작을 나타내는 기호예요. 크기와 색 토큰으로 일관되게 써요.
small · 12px
셰브론, 입력 검증 메시지, 태그·배지 안, 보조 액션
className="size-3"medium (기본) · 16px
대부분의 경우. 본문 글자와 균형이 맞아요
className="size-4"원칙
- 꼭 필요할 때만 — 아이콘은 길 찾기와 이해를 돕지만 많아지면 화면이 어수선해져요. 텍스트 레이블이나 버튼이 더 분명하다면 아이콘을 빼요.
- 익숙한 기호로 — 널리 알려진 기호와 은유를 쓰고, 특정 문화나 언어에만 통하는 표현은 피해요.
- 단순하게 — 작은 크기에서도 한눈에 알아보도록 꼭 필요한 디테일만 둬요. 비스듬한 3D 원근감은 읽기 어려워서 쓰지 않아요.
- 있는 것부터 — 새 아이콘을 만들기 전에 같은 개념의 아이콘이 이미 있는지 찾아요.
아이콘 라이브러리
Steel 은 오픈 소스 아이콘 라이브러리인 lucide 를 써요. 선 아이콘이라 Steel 의 차분한 인상과 잘 맞고, 트리 셰이킹으로 쓴 아이콘만 번들에 들어가요.
import { Bell } from 'lucide-react';
<Bell className="size-4 text-ds-icon-subtle" aria-hidden />선 두께
원본 아이콘은 16px 격자에 1.5px 선으로 그려져요. lucide 기본 선 두께(2px)도 16px 에서 잘 어울리지만, 원본 인상에 더 가깝게 하려면 strokeWidth={1.5} 를 줄 수 있어요.
크기
| 크기 | 값 | Tailwind | 쓰는 곳 |
|---|---|---|---|
| medium (기본) | 16px | size-4 | 대부분의 경우. 본문 글자와 협업 도구의 밀도에 맞아요 |
| small | 12px | size-3 | 버튼·드롭다운의 셰브론, 입력 검증 메시지, 태그·배지·상태 안, 보조 액션 |
- small 은 알아보기 어려워서 위에 적은 경우에만 써요.
- 큰 장식용 아이콘이 필요하면 아이콘을 색 배경 위에 올린 타일 형태로 써요.
- 아이콘 주변 여백은 아이콘을 감싼 요소에 Spacing 토큰으로 줘요.
색
아이콘 색은 하드코딩하지 않고 color.icon.* 토큰으로 정해요. 아이콘이 옆 텍스트와 같은 색이어야 한다면 color.text.* 토큰을 써도 돼요. 두 토큰 모두 Steel 의 배경·표면 위에서 대비 기준을 통과하도록 만들어졌어요.
lucide 아이콘은 currentColor 를 쓰기 때문에 text-ds-icon-* 유틸로 색을 줘요.
| 토큰 | Light | Dark | 설명 |
|---|---|---|---|
아이콘 전용 버튼, color.text 와 짝을 이루는 아이콘Use for icon-only buttons, or icons paired with color.text | |||
비활성 상태의 아이콘Use for icons in a disabled state. | |||
진한 배경 위의 아이콘Use for icons on bold backgrounds. | |||
선택된 내비게이션 항목 등 선택을 알리는 아이콘Use for icons that communicate selection, such as icons in selected navigation items, or the opened state of a dropdown trigger. On bold selected backgrounds, use color.icon.inverse instead. Do not use for brand emphasis or hover alone. Keep the selected icon treatment when the element also has focus. | |||
브랜드를 강조하는 아이콘Use for icons that reinforce our brand. | |||
오류 처리처럼 위험을 알리는 아이콘Use for icons communicating critical information, such as those used in error handing. | |||
경고 섹션 메시지의 주의 아이콘Use for icons communicating caution, such as those used in warning section messages. | |||
진한 경고 배경 위의 아이콘Use for icons when on bold warning backgrounds. | |||
긍정 결과를 알리는 아이콘Use for icons communicating a favorable outcome, such as those used in success section messaged. | |||
새로움을 알리는 아이콘Use for icons communicating change or something new, such as discovery section messages. | |||
정보·진행 중을 알리는 아이콘Use for icons communicating information or something in-progress, such as information section messages. | |||
color.text.subtlest 와 짝을 이루는 아이콘Use for icons paired with color.text.subtlest | |||
color.text.subtle 과 짝을 이루는 아이콘Use for icons paired with color.text.subtle |
텍스트와 짝 맞추기
아이콘 옆에 텍스트가 있다면 같은 단계의 토큰끼리 짝지어요.
댓글 4개
icon + text담당자 없음
icon.subtle + text.subtle10월 30일 마감
icon.subtlest + text.subtlest필수 항목이에요
icon.danger + text.danger아이콘에는 hovered 토큰이 없어요
아이콘 버튼의 호버·눌림 상태는 아이콘 색을 바꾸지 않고, color.background.neutral.subtle.hovered 같은 은은한 배경으로 표현해요.
접근성
- 가능하면 아이콘과 텍스트 레이블을 함께 써요. 아이콘만으로는 뜻이 모호할 수 있어요.
- 텍스트 옆의 장식용 아이콘에는
aria-hidden을 붙여서 화면 읽기 프로그램이 같은 내용을 두 번 읽지 않게 해요. - 아이콘만 있는 버튼에는
aria-label로 이름을 주고, 툴팁으로 눈에도 보이게 해요. - 의미를 전달하는 아이콘(경고, 오류)은 배경과 3 : 1 이상 대비를 지켜요.
아이콘만 있는 버튼은 aria-label 과 툴팁으로 이름을 알려요.