Repolode
Submit
oreo-design

oreo-design/doodle-icons

A free MIT-licensed set of 204 hand-drawn SVG icons that draw themselves in and wiggle, with React components.

View on GitHubWebsite
Stars
148
Forks
6
Open issues
0
Last commit
2 days ago

What is it?

Oreo Doodle Icons is a library of 204 stroke-only icons drawn in a deliberately shaky hand. Each icon is available as a still SVG or as an animated SVG that draws its strokes in and then keeps wobbling, and the same icons can be used through a React package or as plain files in any page that accepts SVG.

The wobble comes from a single SVG filter rather than video or sprite sheets. Turbulence noise displaces the strokes, and a six-step animation advances the noise seed in a loop, so the lines jump between frames instead of sliding. Because the effect is applied to rasterized pixels, its cost does not grow with the number of paths in an icon, and one filter can serve every icon on a page.

The React components accept a name or raw icon data, size, stroke width, and drawing timing props, and forward other attributes to the SVG. Strokes use currentColor, so colour is set from CSS. The package has no runtime dependencies, ships ESM, CJS and type definitions, and includes an optional skill for AI coding agents.

Key features

  • 01204 stroke-only icons on a 48×48 grid with a hand-drawn look
  • 02Animated SVG variant that draws strokes on and then keeps wobbling
  • 03Shared SVG filter for the wobble, configurable in amplitude, duration and frequency
  • 04React components with props for size, stroke width and draw timing
  • 05Strokes use currentColor so icons take colour from CSS
  • 06Zero runtime dependencies with ESM, CJS and TypeScript types

Use cases

  • Adding playful hand-drawn icons to a marketing site or landing page
  • Decorating seasonal or themed pages such as birthdays or holidays
  • Using the SVG files directly in static HTML without a build step
  • Giving an AI coding agent guidance for building doodle-style interfaces

Quick start

  1. 1

    Install the React package

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

    Mount the boil filter once on the page

  3. 3

    Render an icon with the boilId prop

Things to know

  • Pro set of 1,700+ extra icons is a paid offering, not included in this repo.
  • Wiggle effect is a fixed style, so it may not suit every design.
  • The still SVG icons render black when loaded through an img tag, so recolouring needs inlining or the React component.

Topics

#icons#svg#react#animation#hand-drawn#design-system#typescript

FAQ

What is doodle-icons?
A free MIT-licensed set of 204 hand-drawn SVG icons that draw themselves in and wiggle, with React components. Oreo Doodle Icons is a library of 204 stroke-only icons drawn in a deliberately shaky hand. Each icon is available as a still SVG or as an animated SVG that draws its strokes in and then keeps wobbling, and the same icons can be used through a React package or as plain files in any page that accepts SVG.
Is doodle-icons free to use? What license does it have?
doodle-icons is open source under the MIT license. Check the license terms before using it in commercial products.
Is doodle-icons still maintained?
Actively maintained. The last commit to doodle-icons was on Nov 4, 2026.
What can I use doodle-icons for?
Adding playful hand-drawn icons to a marketing site or landing page Decorating seasonal or themed pages such as birthdays or holidays Using the SVG files directly in static HTML without a build step Giving an AI coding agent guidance for building doodle-style interfaces
How do I install doodle-icons?
Install the React package: npm i @oreo-design/doodle-icons Mount the boil filter once on the page Render an icon with the boilId prop
Where can I get doodle-icons?
The source code and installation instructions are on GitHub: https://github.com/oreo-design/doodle-icons

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects