아이콘#
Figma Foundation · 08. Icon
· 값은 coui_core 가 정본입니다. 정본 파일은 Figma 라이브러리.
이 페이지는 글리프를 찾고 이름을 복사하는 카탈로그입니다. 렌더 API 는 Icon 컴포넌트 가 정본이고, 크기·색은
coui_core 의 CoreIconStyle (CoreIconSize · CoreColors) 로 줍니다.
CoUI 는 Iconify 생태계의 네 가지 세트(Lucide · Bootstrap · Radix · HeroIcons)를 Flutter / Web 동일 API
로 제공합니다. 셀을 클릭하면 아이콘 이름이 복사됩니다.
앱은 네 카탈로그를 자유롭게 쓸 수 있지만, CoUI 자신의 컴포넌트는 LucideIcons 하나만 씁니다. 각 세트는 자기 그리드와 자기 획 두께로 그려져 같은 크기를 요청해도 시각적 무게가 다르게 도착합니다 — 인접한 컨트롤끼리는 한 세트로 맞추세요.
토큰 축 전체는 디자인 토큰 을 보세요.
언제 쓰나#
Icon 을 쓰세요
- 버튼·메뉴·네비게이션에 시각 힌트가 필요할 때
- 텍스트 없이 글리프만으로 의미를 전할 때 (접근성 레이블 필수)
한 세트로 맞추세요
- CoUI 키트와 나란히 둘 거면
LucideIcons
- 화면 안에서 Lucide 체크와 Radix chevron 을 섞지 마세요 — 선택이 아니라 렌더 버그로 읽힙니다
숫자·배지가 겹치면 Badge, 강조 액션이면 Fab 와 조합합니다.
coui_core 맵#
| 쓰는 이름 | 의미 |
|---|
LucideIcons.arrowRight 등 |
카탈로그 상수. IconName('lucide', 'arrow-right') 로도 참조 |
CoreIconStyle | 크기·색 슬롯. default 는 24px / onSurface |
CoreIconSize.size16 … size24 |
아이콘 전용 치수 사다리 (박스용 CoreSize 와 별개 이름) |
CoreColor.token(CoreColors.error) | 아이콘 색 — hex 금지 |
사용법#
// Flutter — 카탈로그 어디서든 참조 가능
Icon(LucideIcons.arrowRight)
Icon(
BootstrapIcons.check2,
iconStyle: CoreIconStyle(size: CoreIconSize.size20),
)
// Web — 동일한 참조
Icon(LucideIcons.arrowRight)
아이콘은 prefix:name 으로도 직접 참조할 수 있습니다 (IconName('lucide', 'arrow-right')).
전체 카탈로그#
5355 아이콘
일치하는 아이콘이 없습니다.
