Doodle Icons: Animated Hand-Drawn React SVG Icons

Description:

Doodle Icons is a React icon library with 152 hand-drawn SVG icons and draw-on, boiling-line animation.

The package exposes typed React components, raw still and animated SVG files, and icon data for custom renderers.

Features

• 152 stroke-only icons on a 48×48 grid.
• Still SVG files and animated SVG files.
• Draw-on controls through draw, drawDuration, and drawDelay.
• A page-wide boiling effect through one BoilFilter instance.
• ESM, CommonJS, TypeScript declarations, and tree-shakable React components.
• Raw icon data through the icon prop.
• ICONS, getIcon, ICON_NAMES, COLLECTIONS, and BOIL exports for custom rendering and configuration.

How To Use It

Install the React package

npm i @oreo-design/doodle-icons

Render animated icons

draw animates the strokes on the first render. The animation replays when the component mounts again, so reserve it for icons that enter the screen once, such as a hero illustration or a newly revealed onboarding step.

import { BoilFilter, DoodleIcon } from "@oreo-design/doodle-icons";
export default function DoodleHeader() {
  return (
    <>
      <BoilFilter id="boil" />
      <div style={{ color: "rebeccapurple" }}>
        <DoodleIcon name="heart" boilId="boil" size={32} />
        <DoodleIcon name="star" boilId="boil" draw size={32} />
      </div>
    </>
  );
}

Set the boiling intensity

Use a second filter when one part of the interface needs a different motion level:

<BoilFilter id="boil" />
<BoilFilter id="boil-loud" amplitude={8} duration="0.3s" />
<DoodleIcon name="flame" boilId="boil-loud" />

Use the icon color from CSS

The paths use currentColor. Apply a CSS color to a parent element or pass a style to the wrapper:

<span style={{ color: "rebeccapurple" }}>
  <DoodleIcon name="bulb" boilId="boil" />
</span>

Render SVG files directly

Use icons/ for still files and icons-animated/ for animated files. Copy the selected file into the asset path used by the application:

<img src="/icons-animated/heart.svg" width="48" height="48" alt="" />

API reference

DoodleIcon

Supporting exports

BoilFilter