oreo-design/doodle-icons

어떤 프로젝트인가요?

핵심 기능

• 0148×48 그리드에 배치된, 손으로 그린 듯한 스트로크 전용 아이콘 204종
• 02스트로크가 그려진 뒤에도 계속 흔들리는 애니메이션 SVG 버전
• 03진폭, 지속 시간, 주파수를 설정할 수 있는 공용 SVG 흔들림 필터
• 04크기, 스트로크 두께, 그리기 타이밍을 props로 설정할 수 있는 React 컴포넌트
• 05스트로크에 currentColor를 사용해 CSS에서 아이콘 색상 설정
• 06런타임 의존성 없이 ESM, CJS, TypeScript 타입 제공

활용 사례

• 마케팅 사이트나 랜딩 페이지에 경쾌한 손그림 스타일 아이콘 추가
• 생일이나 공휴일 같은 계절별·테마별 페이지 꾸미기
• 빌드 단계 없이 정적 HTML에서 SVG 파일 직접 사용
• AI 코딩 에이전트가 두들 스타일 인터페이스를 만들도록 안내

빠른 시작

1. 1

   React 패키지를 설치합니다

   npm i @oreo-design/doodle-icons
2. 2

   페이지에서 boil filter를 한 번 마운트합니다

3. 3

   boilId prop을 지정해 아이콘을 렌더링합니다

사용 전 알아둘 점

• !추가 아이콘 1,700개 이상이 포함된 Pro 세트는 유료이며 이 저장소에 포함되어 있지 않습니다.
• !Wiggle 효과는 고정 스타일이므로 모든 디자인에 어울리지는 않을 수 있습니다.
• !정적 SVG 아이콘은 img 태그로 불러오면 검은색으로 렌더링됩니다. 색을 바꾸려면 인라인으로 넣거나 React 컴포넌트를 사용해야 합니다.

토픽

자주 묻는 질문

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

직접 그린 듯한 애니메이션 효과와 React 컴포넌트를 제공하는 MIT 라이선스의 무료 SVG 아이콘 204종 모음입니다. Oreo Doodle Icons는 일부러 손으로 그린 듯한 흔들림을 살린 스트로크 전용 아이콘 204종을 제공하는 라이브러리입니다. 각 아이콘은 정지 SVG와 스트로크가 그려진 뒤에도 계속 흔들리는 애니메이션 SVG로 제공되며, React 패키지를 통해 사용하거나 SVG를 지원하는 페이지에서 일반 파일로 사용할 수 있습니다.

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

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

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

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

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

마케팅 사이트나 랜딩 페이지에 경쾌한 손그림 스타일 아이콘 추가 생일이나 공휴일 같은 계절별·테마별 페이지 꾸미기 빌드 단계 없이 정적 HTML에서 SVG 파일 직접 사용 AI 코딩 에이전트가 두들 스타일 인터페이스를 만들도록 안내

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

React 패키지를 설치합니다: npm i @oreo-design/doodle-icons 페이지에서 boil filter를 한 번 마운트합니다 boilId prop을 지정해 아이콘을 렌더링합니다

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

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