Doodle Icons plugin
A hand-drawn SVG icon set for React with a skill that teaches the agent setup, the shared filter and real icon names.
- 153 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skill only edits interface code and needs no external service.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add plugins/doodle-iconsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill only edits interface code and needs no external service.
This is third-party code. Review the repository files before installing.
What it does
Doodle Icons is a hand-drawn icon pack shipped as the `@oreo-design/doodle-icons` package and as an agent skill. Each icon draws its strokes in and then keeps wiggling like cartoon animation. The repository includes still SVGs, animated SVGs, a React component and single icons for shadcn/ui. The skill tells an agent the setup order. Install the package, mount one shared `BoilFilter`, pick icons by their real names and pass `boilId` to each one. It also sets the pack look: Schoolbell for headings, a paper and ink palette, and rules for where to animate and where to hold still.
Who it is for. Frontend developers and designers building a landing page or interface in a hand-drawn style who want an agent to place icons without invented names.
Good fit when
- A notebook-style landing page gets icons that draw themselves in.
- An agent picks icons from a fixed list instead of guessing names.
- A shadcn/ui project copies one icon as source code.
- Hand-drawn headings and icons should wiggle through one shared filter.
Not a fit when
- The interface is strict and corporate, so a hand-drawn style does not fit.
- You need static icons with exact grid geometry.
- The page targets weak devices where an SVG filter is costly.
Example request
Add hand-drawn Doodle Icons to the benefits block of the landing page, mount the shared filter and use only names from the real list.Limitations
The wiggle uses an SVG filter, so check the load on a page with hundreds of icons. The `draw` prop replays on every remount, so keep it for a hero section. The skill targets React; other stacks use the plain SVG files. The skill knows the set by name, so reread the name list in the registry after a package update. The styling rules belong to the Oreo Design look and are optional for other projects.
How to disable. Remove the skill from the agent skills folder, or run `/plugin uninstall doodle-icons` in Claude Code, and drop the package from project dependencies.
FAQ
How do I use an icon without the package?
With shadcn/ui run `npx shadcn@latest add https://doodle.oreoui.com/r/heart.json`. It creates a `HeartDoodle` component, and any free icon name can replace `heart`.
What is `boilId` for?
It links an icon to the shared filter that creates the wiggle. Without it an icon stays still and looks unfinished beside wiggling headings.
Can I change the color?
Yes. Strokes use `currentColor`, so ordinary text color CSS controls them.
How do I install the skill?
Run `npx skills add oreo-design/doodle-icons`. In Claude Code a plugin also works: `/plugin marketplace add oreo-design/doodle-icons`.
Is React required?
The `DoodleIcon` component needs it. Without React use the SVG files from `icons/` and `icons-animated/`, which work anywhere SVG works.
Discussion
No questions or reviews yet.
Related
PluginsA dither engine for shadcn plus a skill: the agent builds backgrounds, charts and loaders from dots in theme colours.
An MCP server for Keyline Icons: the agent finds an icon by name and gets its SVG and a ready React import with no guessing
The fun-isometric skill draws isometric stickers from flat slabs with an outline and animates them on real keyframes.
Search and drop in icons from 150+ Iconify collections as an MCP server, CLI and skill, writing SVG straight into the project
An MCP server that finds a coolicons icon by meaning and returns the SVG with the import line, so the agent never guesses names
An MCP server and skill for a set of thousands of brand SVG icons: the agent searches and inserts icons with no key
README in short
Icons come as SVG files, a React package and a shadcn registry. The skill in the repository gives an agent the setup order and the pack styling rules.