guokaigdg/naive-icons

어떤 프로젝트인가요?

핵심 기능

• 01인터페이스, 액션, 미디어, 내비게이션, 동물, 음식 등 11개 카테고리의 아이콘을 제공합니다.
• 02각 아이콘은 SVG 파일과 React TSX 컴포넌트로 제공됩니다.
• 03완전한 TypeScript 타입과 공용 색상 팔레트를 내보냅니다.
• 04stroke 및 color props로 손그림 느낌을 유지하면서 아이콘의 크기와 색상을 조정할 수 있습니다.
• 05아이콘 코드를 생성하는 AI 에이전트 스킬을 설치할 수 있습니다.

활용 사례

• React 웹 앱이나 랜딩 페이지에 유쾌한 손그림 아이콘 세트를 추가할 때.
• 로그인 또는 온보딩 화면에 따뜻하고 개성 있는 시각적 분위기를 더할 때.
• React가 아닌 프로젝트나 아이콘 스프라이트에서 원본 SVG 파일을 사용할 때.
• AI 코딩 어시스턴트가 프로젝트에 어울리는 아이콘을 선택해 삽입하도록 할 때.

빠른 시작

1. 1

   패키지 설치하기

   npm install naive-icons
2. 2

   React에서 아이콘을 가져와 사용하기

   import { HomeIcon } from 'naive-icons';

사용 전 알아둘 점

• !많은 아이콘의 색상이 하드코딩되어 있어 루트의 fill을 지정해도 색상이 바뀌지 않습니다. 쉽게 변경할 수 있는 것은 stroke 색상뿐입니다.
• !React 16.8 이상이 필요합니다.

토픽

자주 묻는 질문

naive-icons은(는) 무엇인가요?

AI 에이전트 스킬도 제공하는 손그림 민속화 스타일의 React·TypeScript SVG 아이콘 라이브러리입니다. Naive Icons는 손으로 그린 민속화 느낌의 SVG 아이콘 라이브러리입니다. 각 아이콘은 48x48 그리드에 3.5 두께의 선과 둥근 선 끝, 고정된 레트로 색상 팔레트를 적용해 그렸으며, 생명체를 표현한 아이콘에는 점눈과 작은 미소가 있는 경우가 많습니다. 모든 아이콘은 SVG 소스 파일과 React TSX 컴포넌트로 제공됩니다.

naive-icons은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

naive-icons은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

naive-icons은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. naive-icons의 마지막 커밋은 2026년 10월 14일입니다.

naive-icons은(는) 어디에 사용할 수 있나요?

React 웹 앱이나 랜딩 페이지에 유쾌한 손그림 아이콘 세트를 추가할 때. 로그인 또는 온보딩 화면에 따뜻하고 개성 있는 시각적 분위기를 더할 때. React가 아닌 프로젝트나 아이콘 스프라이트에서 원본 SVG 파일을 사용할 때. AI 코딩 어시스턴트가 프로젝트에 어울리는 아이콘을 선택해 삽입하도록 할 때.

naive-icons는 어떻게 설치하나요?

패키지 설치하기: npm install naive-icons React에서 아이콘을 가져와 사용하기: import { HomeIcon } from 'naive-icons';

naive-icons은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/guokaigdg/naive-icons