oreo-design/doodle-icons

Что это?

Ключевые возможности

• 01204 иконки, состоящие только из контуров, на сетке 48×48, с эффектом рисунка от руки
• 02Анимированный вариант SVG, который прорисовывает контуры и затем продолжает покачиваться
• 03Общий SVG-фильтр для эффекта покачивания с настройками амплитуды, длительности и частоты
• 04React-компоненты с параметрами размера, толщины обводки и времени прорисовки
• 05Для контуров используется currentColor, поэтому цвет иконки задаётся через CSS
• 06Нет runtime-зависимостей; доступны ESM, CJS и типы TypeScript

Сценарии использования

• Добавление игривых иконок в стиле рисунка от руки на маркетинговый сайт или лендинг
• Оформление сезонных страниц и страниц, посвящённых определённым темам, например дням рождения или праздникам
• Использование SVG-файлов напрямую в статичном HTML без этапа сборки
• Предоставление AI coding agent инструкций по созданию интерфейсов в стиле дудл-рисунков

Быстрый старт

1. 1

   Установите пакет React

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

   Один раз смонтируйте boil filter на странице

3. 3

   Отобразите значок, указав prop boilId

Что важно знать

• !Набор Pro с более чем 1 700 дополнительными значками платный и не входит в этот репозиторий.
• !Эффект Wiggle имеет фиксированный стиль, поэтому может подойти не для каждого дизайна.
• !Статичные SVG-значки отображаются чёрными при загрузке через тег img. Чтобы изменить их цвет, нужно встроить SVG в разметку или использовать компонент React.

Темы

Частые вопросы

Что такое doodle-icons?

Бесплатный набор из 204 нарисованных от руки SVG-иконок с лицензией MIT: они сами прорисовываются и покачиваются; доступны React-компоненты. Oreo Doodle Icons — это библиотека из 204 иконок, состоящих только из контуров и намеренно нарисованных неровной рукой. Каждая иконка доступна как статичный SVG или как анимированный SVG, который сначала прорисовывает контуры, а затем продолжает покачиваться. Те же иконки можно использовать через React-пакет или как обычные файлы на любой странице, поддерживающей SVG.

doodle-icons можно использовать бесплатно? Какая у него лицензия?

doodle-icons распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.

doodle-icons всё ещё поддерживается?

Активно поддерживается. Последний коммит в doodle-icons — 4 нояб. 2026 г..

Для чего можно использовать doodle-icons?

Добавление игривых иконок в стиле рисунка от руки на маркетинговый сайт или лендинг Оформление сезонных страниц и страниц, посвящённых определённым темам, например дням рождения или праздникам Использование SVG-файлов напрямую в статичном HTML без этапа сборки Предоставление AI coding agent инструкций по созданию интерфейсов в стиле дудл-рисунков

Как установить doodle-icons?

Установите пакет React: npm i @oreo-design/doodle-icons Один раз смонтируйте boil filter на странице Отобразите значок, указав prop boilId

Где скачать doodle-icons?

Исходный код и инструкции по установке — на GitHub: https://github.com/oreo-design/doodle-icons