Feather Icons
심플하고 아름다운 오픈소스 아이콘입니다. 미니멀한 디자인과 일관성 있는 스타일로 유명합니다.
#333333
- 살짝 둥근 모서리
- 가는 테두리
- 가는 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
UI 기본 아이콘
홈, 사용자, 검색 등 기본 UI - 20개
화살표 & 셰브론
방향 아이콘 - 8개
커뮤니케이션
연락 및 일정 - 5개
날씨 & 시스템
날씨, 네트워크 - 7개
미디어 재생
미디어 컨트롤 - 9개
사용자 & 보안
사용자 관리 및 보안 - 8개
소셜 미디어
브랜드 로고 - 6개
Feather Icons 특징
- ✓287개의 깔끔하고 심플한 아이콘
- ✓24x24 그리드 기반, 2px stroke width로 일관성 유지
- ✓완벽한 픽셀 정렬로 선명한 디스플레이
- ✓MIT 라이선스 오픈소스, 미니멀 디자인의 대표 아이콘
이웃 스타일
어디에 쓰나
사용 사례
- 미니멀 UI
- 스트로크 스타일 디자인 시스템
- 가벼운 번들 필요 시
이런 프로젝트에 맞습니다
- 미니멀 UI
- 스트로크 스타일
- 가벼운 번들
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
핵심 원칙
- npm install feather-icons-react
- 번들 사이즈: 매우 가벼움
- 287개 아이콘
주요 특징
- 287개의 깔끔한 아이콘
- 24x24 그리드 기반
- 2px stroke width
- 완벽한 픽셀 정렬
- 오픈소스 (MIT)
장점과 한계
장점
- 매우 가볍고 깔끔
- 일관된 2px stroke로 디자인 통일성
- 오랜 역사와 안정성
한계
- 287개로 아이콘 수 적음
- 업데이트 빈도 낮음 (Lucide React로 포크됨)
- Fill 스타일 없음
컬러 시스템
Feather는 미니멀리즘 철학 — 단순한 선, 단일 색상
색의 역할
- stroke: currentColor — 텍스트 색 따름
제약
- fill 없음 — stroke만 사용
- 크기 16px 이하에서 세부 요소 뭉갬 주의
다크모드 — currentColor 자동 처리
명도 대비 — stroke 기반으로 작은 크기 가시성 확인 필수
타이포그래피
아이콘 패키지 — 타이포그래피 해당 없음. Feather는 미니멀 선 기반 스타일
글꼴은 최대 0종 · 스케일 비율 아이콘은 4px 배수 크기 권장 (16/20/24/32/40px)
- 아이콘 크기는 인접 텍스트 font-size의 1~1.5배 권장
- stroke-width 2 (고정) stroke-width — 텍스트 굵기와 시각적 균형 맞추기
설계 제약
반드시 포함
- 일관된 크기 사용 (24px 기본 권장)
- 인터랙티브 아이콘에 tooltip 또는 레이블
- hover/active 상태 색상 피드백
하지 말 것
- 아이콘 스타일 혼용 금지 — 한 프로젝트에서 패키지 1~2개만
- 아이콘 단독 사용 금지 (레이블 없을 때) — aria-label 필수
- Feather 아이콘을 지나치게 크게 사용 금지 — 미니멀·클린 UI 최적화
모션 — 아이콘 자체 애니메이션 최소화. hover 시 opacity 변화 또는 scale 1.1 정도만.
자주 묻는 질문
Feather Icons이란 무엇인가요?
심플하고 아름다운 오픈소스 아이콘입니다. 미니멀한 디자인과 일관성 있는 스타일로 유명합니다.
Feather Icons의 핵심 디자인 원칙은 무엇인가요?
Feather Icons의 핵심 원칙은 npm install feather-icons-react, 번들 사이즈: 매우 가벼움, 287개 아이콘입니다.
Feather Icons은 어떤 프로젝트에 적합한가요?
Feather Icons은 미니멀 UI, 스트로크 스타일 디자인 시스템, 가벼운 번들 필요 시, 미니멀 UI, 스트로크 스타일, 가벼운 번들 등의 프로젝트에 적합합니다.
Feather Icons의 장단점은 무엇인가요?
장점으로는 매우 가볍고 깔끔, 일관된 2px stroke로 디자인 통일성, 오랜 역사와 안정성이 있습니다. 단점으로는 287개로 아이콘 수 적음, 업데이트 빈도 낮음 (Lucide React로 포크됨), Fill 스타일 없음이 있습니다.
Feather Icons에서 색상은 어떻게 사용하나요?
Feather는 미니멀리즘 철학 — 단순한 선, 단일 색상 색상 역할은 stroke: currentColor — 텍스트 색 따름입니다. 주의사항: fill 없음 — stroke만 사용, 크기 16px 이하에서 세부 요소 뭉갬 주의.
Feather Icons에 어울리는 폰트 스타일은 무엇인가요?
Feather Icons에는 아이콘 패키지 — 타이포그래피 해당 없음. Feather는 미니멀 선 기반 스타일 폰트가 적합합니다. 최대 0개 폰트 패밀리 사용을 권장합니다. 제약 사항: 아이콘 크기는 인접 텍스트 font-size의 1~1.5배 권장, stroke-width 2 (고정) stroke-width — 텍스트 굵기와 시각적 균형 맞추기.
Feather Icons 디자인에서 하면 안 되는 것은 무엇인가요?
Feather Icons에서 피해야 할 것: 아이콘 스타일 혼용 금지 — 한 프로젝트에서 패키지 1~2개만, 아이콘 단독 사용 금지 (레이블 없을 때) — aria-label 필수, Feather 아이콘을 지나치게 크게 사용 금지 — 미니멀·클린 UI 최적화.