# Iconoir — 디자인 스타일 가이드

## 기본 정보
- **ID**: iconoir
- **카테고리**: icon-package

## 설명
우아하고 미니멀한 오픈소스 아이콘 라이브러리입니다. 1,500개 이상의 SVG 아이콘을 무료로 제공합니다.

## 핵심 원칙
- npm install iconoir-react
- 번들 사이즈: 매우 가벼움
- 1,500+ 아이콘

## 주요 특징
- 1,500개 이상의 우아한 아이콘
- 미니멀하고 모던한 디자인
- 완벽한 픽셀 정렬
- React, Vue, Svelte 지원
- MIT 라이선스

## 컬러 시스템 가이드
1.5px stroke 기반 — Lucide보다 얇고 세련된 느낌. 프리미엄 UI에 적합

### 색상 역할
- stroke: currentColor — 자동 색 상속

### 색상 제약 조건
- stroke-width 1~2 범위 — 1.5 기본값 유지 권장
- 소형 크기(16px 이하)에서 세선 뭉갬 주의

### 다크모드 전략
currentColor 자동

### 대비 요구사항
얇은 선 특성상 작은 크기에서 대비 저하 주의

## 타이포그래피 가이드
- **폰트 성격**: 아이콘 패키지 — 타이포그래피 해당 없음. Iconoir는 outline 기반 정밀 선 스타일
- **권장 폰트 수**: 최대 0개
- **타입 스케일**: 아이콘은 4px 배수 크기 권장 (16/20/24/32/40px)

### 타이포그래피 제약
- 아이콘 크기는 인접 텍스트 font-size의 1~1.5배 권장
- stroke-width 1.5 (기본) stroke-width — 텍스트 굵기와 시각적 균형 맞추기

## 하면 안 되는 것 (안티패턴)
- 아이콘 스타일 혼용 금지 — 한 프로젝트에서 패키지 1~2개만
- 아이콘 단독 사용 금지 (레이블 없을 때) — aria-label 필수
- Iconoir 아이콘을 지나치게 크게 사용 금지 — 미니멀·프리미엄 UI 최적화

## 반드시 포함해야 하는 것
- 일관된 크기 사용 (24px 기본 권장)
- 인터랙티브 아이콘에 tooltip 또는 레이블
- hover/active 상태 색상 피드백

## 모션 가이드
아이콘 자체 애니메이션 최소화. hover 시 opacity 변화 또는 scale 1.1 정도만.

## 사용 사례
- 우아하고 미니멀한 UI
- 포트폴리오·고급 브랜드 사이트
- React·Vue·Svelte 프로젝트

## 추천 프로젝트 유형
- 우아한 미니멀 UI
- 포트폴리오·고급 브랜드
- 다중 프레임워크 지원 필요

## 장점
- 우아하고 세련된 디자인
- React·Vue·Svelte 모두 지원
- MIT 라이선스 완전 무료

## 단점·한계
- 1,500개로 상대적으로 적은 아이콘 수
- 인지도가 낮아 레퍼런스 부족

## 관련 스타일
- [lucide-react](https://ui.buildersgate.com/styles/lucide-react)
- [feather-icons](https://ui.buildersgate.com/styles/feather-icons)
- [heroicons](https://ui.buildersgate.com/styles/heroicons)

## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.

### 색상
- primary: #1A1A1A
- secondary: #000000
- accent: #404040
- background: #FFFFFF
- surface: #F5F5F5
- text: #1A1A1A
- textSecondary: #666666
- border: #E5E5E5

### 헤더
- background: linear-gradient(135deg, #1A1A1A 0%, #000000 100%)
- textColor: #FFFFFF
- accentColor: #404040

### 타이포그래피
- fontFamily: system-ui, 'Noto Sans KR', sans-serif
- headingWeight: 500
- bodyWeight: 400
- letterSpacing: 0

### 스페이싱
- unit: 8px
- scale: 1

### 그림자 (Shadows)
- sm: 0 1px 2px rgba(0,0,0,0.04)
- md: 0 2px 4px rgba(0,0,0,0.08)
- lg: 0 4px 8px rgba(0,0,0,0.12)
- xl: 0 8px 16px rgba(0,0,0,0.16)

### Border Radius
- none: 0
- sm: 2px
- md: 4px
- lg: 8px
- full: 9999px

### 테두리 (Borders)
- width: 1px
- style: solid
- color: #E5E5E5

### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.2s ease

### 애니메이션
- duration: 200ms
- easing: ease

### 컴포넌트 토큰
- 버튼: shape=rounded / hoverEffect=darken / textTransform=none
- 카드: style=flat / hoverEffect=darken
- 인풋: style=outlined / focusEffect=border
- 배지: shape=rounded / style=subtle
- 아이콘: package=lucide / strokeWidth=1.5 / defaultSize=22

### 레이아웃
- containerStyle: boxed
- sectionSpacing: normal

### 특수 효과
- glassmorphism: false
- gradientText: false
- animatedBackground: false
- scanlines: false
- noise: false

## 자주 묻는 질문 (FAQ)

### Q: Iconoir이란 무엇인가요?
A: 우아하고 미니멀한 오픈소스 아이콘 라이브러리입니다. 1,500개 이상의 SVG 아이콘을 무료로 제공합니다.

### Q: Iconoir의 핵심 디자인 원칙은 무엇인가요?
A: Iconoir의 핵심 원칙은 npm install iconoir-react, 번들 사이즈: 매우 가벼움, 1,500+ 아이콘입니다.

### Q: Iconoir은 어떤 프로젝트에 적합한가요?
A: Iconoir은 우아하고 미니멀한 UI, 포트폴리오·고급 브랜드 사이트, React·Vue·Svelte 프로젝트, 우아한 미니멀 UI, 포트폴리오·고급 브랜드, 다중 프레임워크 지원 필요 등의 프로젝트에 적합합니다.

### Q: Iconoir의 장단점은 무엇인가요?
A: 장점으로는 우아하고 세련된 디자인, React·Vue·Svelte 모두 지원, MIT 라이선스 완전 무료이 있습니다. 단점으로는 1,500개로 상대적으로 적은 아이콘 수, 인지도가 낮아 레퍼런스 부족이 있습니다.

### Q: Iconoir에서 색상은 어떻게 사용하나요?
A: 1.5px stroke 기반 — Lucide보다 얇고 세련된 느낌. 프리미엄 UI에 적합 색상 역할은 stroke: currentColor — 자동 색 상속입니다. 주의사항: stroke-width 1~2 범위 — 1.5 기본값 유지 권장, 소형 크기(16px 이하)에서 세선 뭉갬 주의.

### Q: Iconoir에 어울리는 폰트 스타일은 무엇인가요?
A: Iconoir에는 아이콘 패키지 — 타이포그래피 해당 없음. Iconoir는 outline 기반 정밀 선 스타일 폰트가 적합합니다. 최대 0개 폰트 패밀리 사용을 권장합니다. 제약 사항: 아이콘 크기는 인접 텍스트 font-size의 1~1.5배 권장, stroke-width 1.5 (기본) stroke-width — 텍스트 굵기와 시각적 균형 맞추기.

### Q: Iconoir 디자인에서 하면 안 되는 것은 무엇인가요?
A: Iconoir에서 피해야 할 것: 아이콘 스타일 혼용 금지 — 한 프로젝트에서 패키지 1~2개만, 아이콘 단독 사용 금지 (레이블 없을 때) — aria-label 필수, Iconoir 아이콘을 지나치게 크게 사용 금지 — 미니멀·프리미엄 UI 최적화.

## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=iconoir
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=iconoir&merged=true

이 페이지 주소를 AI에게 보여주고 "디자인 시스템 문서를 만들어줘"라고 해보세요.

← 홈으로 돌아가기

Iconoir

우아하고 미니멀한 오픈소스 아이콘 라이브러리입니다. 1,500개 이상의 SVG 아이콘을 무료로 제공합니다.

#1A1A1A

핵심 원칙

1

npm install iconoir-react

2

번들 사이즈: 매우 가벼움

3

1,500+ 아이콘

주요 특징

  • 1,500개 이상의 우아한 아이콘
  • 미니멀하고 모던한 디자인
  • 완벽한 픽셀 정렬
  • React, Vue, Svelte 지원
  • MIT 라이선스

장단점

장점

  • +우아하고 세련된 디자인
  • +React·Vue·Svelte 모두 지원
  • +MIT 라이선스 완전 무료

단점 / 한계

  • −1,500개로 상대적으로 적은 아이콘 수
  • −인지도가 낮아 레퍼런스 부족

적합한 사용처

사용 사례

  • 우아하고 미니멀한 UI
  • 포트폴리오·고급 브랜드 사이트
  • React·Vue·Svelte 프로젝트

이런 프로젝트에 추천

우아한 미니멀 UI포트폴리오·고급 브랜드다중 프레임워크 지원 필요

UI 컴포넌트 예제

이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.

UI 기본 아이콘

우아하고 미니멀한 디자인 - 20개

Home
User
Heart
Star
Search
Bell
Mail
Settings
Shopping
Camera
File
Folder
Download
Upload
Trash
Edit
Check
Close
Plus
Minus

화살표 & 방향

방향 아이콘 - 4개

Up
Down
Left
Right

커뮤니케이션

연락 및 일정 - 5개

Calendar
Clock
Pin
Phone
Chat

날씨 & 시스템

날씨, 네트워크 - 6개

Sun
Moon
Cloud
Flash
WiFi
Bluetooth

미디어 재생

미디어 컨트롤 - 9개

Play
Pause
Next
Previous
Volume
Image
Video
Music
TV

사용자 & 보안

사용자 관리 및 보안 - 6개

Group
Profile
Card
Lock
Shield
Key

소셜 미디어

브랜드 로고 - 6개

Facebook
Twitter
Instagram
YouTube
LinkedIn
GitHub

Iconoir 특징

  • ✓1,500개 이상의 우아하고 미니멀한 아이콘
  • ✓완벽한 픽셀 정렬로 선명한 디스플레이
  • ✓React, Vue, Svelte 등 다양한 프레임워크 지원
  • ✓MIT 라이선스 오픈소스, 매우 가벼운 번들 사이즈

자주 묻는 질문

Iconoir이란 무엇인가요?
우아하고 미니멀한 오픈소스 아이콘 라이브러리입니다. 1,500개 이상의 SVG 아이콘을 무료로 제공합니다.
Iconoir의 핵심 디자인 원칙은 무엇인가요?
Iconoir의 핵심 원칙은 npm install iconoir-react, 번들 사이즈: 매우 가벼움, 1,500+ 아이콘입니다.
Iconoir은 어떤 프로젝트에 적합한가요?
Iconoir은 우아하고 미니멀한 UI, 포트폴리오·고급 브랜드 사이트, React·Vue·Svelte 프로젝트, 우아한 미니멀 UI, 포트폴리오·고급 브랜드, 다중 프레임워크 지원 필요 등의 프로젝트에 적합합니다.
Iconoir의 장단점은 무엇인가요?
장점으로는 우아하고 세련된 디자인, React·Vue·Svelte 모두 지원, MIT 라이선스 완전 무료이 있습니다. 단점으로는 1,500개로 상대적으로 적은 아이콘 수, 인지도가 낮아 레퍼런스 부족이 있습니다.
Iconoir에서 색상은 어떻게 사용하나요?
1.5px stroke 기반 — Lucide보다 얇고 세련된 느낌. 프리미엄 UI에 적합 색상 역할은 stroke: currentColor — 자동 색 상속입니다. 주의사항: stroke-width 1~2 범위 — 1.5 기본값 유지 권장, 소형 크기(16px 이하)에서 세선 뭉갬 주의.
Iconoir에 어울리는 폰트 스타일은 무엇인가요?
Iconoir에는 아이콘 패키지 — 타이포그래피 해당 없음. Iconoir는 outline 기반 정밀 선 스타일 폰트가 적합합니다. 최대 0개 폰트 패밀리 사용을 권장합니다. 제약 사항: 아이콘 크기는 인접 텍스트 font-size의 1~1.5배 권장, stroke-width 1.5 (기본) stroke-width — 텍스트 굵기와 시각적 균형 맞추기.
Iconoir 디자인에서 하면 안 되는 것은 무엇인가요?
Iconoir에서 피해야 할 것: 아이콘 스타일 혼용 금지 — 한 프로젝트에서 패키지 1~2개만, 아이콘 단독 사용 금지 (레이블 없을 때) — aria-label 필수, Iconoir 아이콘을 지나치게 크게 사용 금지 — 미니멀·프리미엄 UI 최적화.

관련 스타일 탐색

Lucide React

Feather Icons의 커뮤니티 포크로, 깔끔하고 일관성 있는 디자인의 모던한 아이콘 세트입니다. 심플하고 미니멀한 스타일이 특징입니다.

Feather Icons

심플하고 아름다운 오픈소스 아이콘입니다. 미니멀한 디자인과 일관성 있는 스타일로 유명합니다.

Heroicons

Tailwind CSS 제작팀이 만든 아름다운 손으로 제작된 SVG 아이콘입니다. Outline과 Solid 두 가지 스타일을 제공합니다.